프로그래밍/html14 [220317] 티스토리 캘린더 위젯 / 색상, 여백 세부 조정 의도 그간 기록한 결과를 달력별로 깔끔하게 모아보고 싶다. 과정 https://tistory.noo9ya.com/67 Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력 이번 시간에는 "사이드바 달력" 모듈입니다. 제 경험상 티스토리 블로그에 달력을 노출하는 사람은 많이 못 봤지만 그래도 없는것보단 있는게 낫지 않을까 싶어서 달력도 만들어 보도록하겠습 tistory.noo9ya.com 포스팅한 기록을 날짜별로 볼 수 있는 달력형 위젯을 알게 되어서 적용했다. 내 티스토리 컨셉색에 맞게 색 변경이랑 여백을 세부 조절함. html 코드에서 header 안에 작성할 코드 CALENDAR css 코드 안에 작성할 코드와 세부조정건 * calendar */ //아래에 여백을 46px를 줌 ... 2022. 3. 17. 티스토리 코드블럭 스타일 수정하기 - 모서리 둥글게, 줄간격, margin 코드블럭 안의 폰트스타일이나 배경색을 바꾸고 싶은 경우는 다음 글에 게시해놓았다. https://hancoco.tistory.com/55 티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기. 방법은 2가지다. 1) 블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일을 바꾼다. 2) 직접 스타일을 받아서 바꾼다. ( 여기서 주의할점은, 위에서 말한 코드 문법 강조를 해제한 hancoco.tistory.com 코드블럭 폰트랑 배경색을 바꾸고나니 좀더 욕심이 생긴다. 줄간격도 넓히고 삐쭉한 모서리도 좀 둥글둥글하게 바꾸고 싶다!!!! 그러니, 바꿔보자. 1) 티스토리 블로그관리 > 스킨편집 > html 편집 > css에 들어가자 2) css에 해당 .. 2022. 2. 3. 티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기. 방법은 2가지다. 1) 블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일을 바꾼다. 2) 직접 스타일을 받아서 바꾼다. ( 여기서 주의할점은, 위에서 말한 코드 문법 강조를 해제한 상태여야한다. 별 다섯개!!!!! ) 1. 원하는 스타일의 폰트를 고르기 https://highlightjs.org/static/demo/ highlight.js demo highlightjs.org 여기 들어가서 원하는 스타일의 폰트를 고른다. 나는 Atom One Dark를 골랐다. 2. 설치방법을 선택하기 폰트를 설치하는 방법은 두가지가 있다. 첫번째는 파일 다운로드를 하지않고 네트워크로 연결해서 바꾸는 cdnjs 방법. 두번재는 파일을 다운로드해서 폰트를 바꾸는 방법. 첫번째는 간편하지만 인터넷 상.. 2022. 2. 3. [220124] input="radiobox" / label / 슬라이드 / 형제 선택자 의도 : 클릭하면 div가 사라졌다가 나타나기 html css : 인접 형제 선택자 + 이용 #header{ width: 500px; height: 180px; background: #eee; padding:20px; box-sizing: border-box; display: flex; justify-content: space-between; } #header > div > input{ display: none; } .container{ width:130px; height: 130px; } input[id*="box"]+label{ display: inline-block; width:15px; height: 15px; background: blue; border-radius: 100%; } input[i.. 2022. 1. 24. [220124] input="checkbox" / label / 아코디언 메뉴 input과 연결되는 label See the Pen Untitled by supermint (@ma_ad_shouri) on CodePen. checkbox를 체크 유무를 표시하는 법 관계 없는 둘을 묶어주는 id 체크박스, 라벨과 다른 컨텐츠를 연결하기 id가 app1인 체크박스와 id가 box1, box2인 div와 연결하기 클릭하면 빨간박스 #box1랑 파란박스 #box2가 보이게 만들기 클릭하면 접히는 메뉴 만들기 어떻게 구성할지 생각하기 체크박스 여러개 : 아코디언 메뉴 2022. 1. 24. [211231] clone_네이버 회원가입폼 / select, option, ::focus footer 정렬 맞춤 팝업메뉴 저 아래 화살표 표시는 어떻게 넣나 코드 보니까 아이콘이 아니었다. 심지어 ul, li도 아니었음. 목록은 option이었고, 화살표는 background로 들어가는 이미지였음. 홀리몰리. 다들 알았는가. background에도 position이 있음을. 나는 방금 알았다. 심지어 사이즈도 조절이 가능하다. #header > h1 > #logo{ display: block; margin: 0 auto; width: 240px; height: 44px; background-image: url('../img/logo_naver.png'); background-repeat: no-repeat; background-size:240px auto; background-position.. 2021. 12. 31. [211229] url, uri, form table 복습 tr : 줄(행)부터 시작하는 테이블 td : 줄(행)을 기반으로 열(칸)을 붙여나가기 url, uri, queryString, 주소 읽기 작성한 html끼리는 a 태그를 이용해 연결이 가능하다. 이제는 연결을 해서 생성하는 주소에 신경쓸때가 되었다 URI와 URL의 차이점 uri Uniform Resource Identifier, 자원을 구분하고 접근하기 위해 사용하는 유일한 식별자 주요목적 : 리소스를 찾는것, html, xml 및 기타 파일에도 사용됨 예) :urn:isbn:0-342-34243-3 url Uniform Resource Locator (지원의 위치), 자원의 주소로 자원을 식별한다 주요목적 : 웹 페이지만 찾는데 사용 예) http://google/com url 구문.. 2021. 12. 29. [211228] label응용, positon:flex, box-shadow, 라이브러리 목차 1. input과 label 2. transform 3. display:flex 4. box-shadow 1. input과 label See the Pen label by supermint (@ma_ad_shouri) on CodePen. 1) input과 label이 선언된 순서대로 각각 생성된다. 2) 코드가 옆으로 나열되는 것과 background가 글씨크기만큼 생성되는 것을 보면 inline 속성이다 3) input id를 label 요소인 for로 연결하면, label을 클릭할때 input의 checkbox도 같이 반응한다. 4) 2번째 박스는 색이 없고, 3번째 박스는 색이 있는 이유. 인접접근자는 연결하려는 본체코드 밑에 있어야 적용되기 때문. 2번째 박스는 input 코드가 label.. 2021. 12. 28. [211227] 반응형 목록 만들기 / 햄버거, 속성선택자, 인접접근자 목차 1. 속성선택자 (실습 : 반응형 메뉴) 1-1. input 복습 1-2. [ ] 1-3 :checked 2. Display:none; 3. 실습 : 햄버거 버튼 3-1. 인접접근자 (+) 3-2. :nth-child (n) -> 이름 알아오기(숙제) 3-3. relative와 absolute의 상관관계 3-4. transform:translateY (-50%); 3-5. 생성기준점을 알고 회전시키기 3-6. 모션 만들기 3-7. 커서 모양 바꾸기 3-8. clear:both 4. 프로그래밍 팁 1. 속성선택자 (실습 : 반응형 메뉴) 1-1. input 복습 기본 체크형 input 박스 check check를 누르면 입력란에 커서가 나타남. check check를 누르면 체크박스가 체크됨 -> 이.. 2021. 12. 27. [211225-211226] 클론코딩_연습day 홀로 짜보는 클론코딩을 하며 메타인지를 해봅시다. 목적 내가 뭘 알고 뭘 모르는지 알기. 진행 1. html 큰 틀을 짜놓는다 2. css로 background 색을 넣어서 영역을 확인한다. 3. 세부요소를 넣는다 방법 각 파트별로 걸린 시간을 작성할 것 코드가 꼬인다고 재작성 하지 않을것. 수정으로만 반드시 할것. 주석이랑 블로그에 문제점과 해결법과 생각한 방향을 작성할것. 이렇지 않을까?하고 넘어가지 말고 속성은 정확히 알고 사용할것. 사용의도를 설명 가능해야함. 목표 영역이 흐르고 넘치는 것을 무지성으로 때려박아서 해결하지 않는것. 예상 문제점 어느 요소가 block이고 inline속성인지 애매 block, inblock, inline-block의 차이점 애매 float의 기능 개념 애매 뭐, 해봅.. 2021. 12. 25. 이전 1 2 다음
