$$config title: [프론트]? 기본테그 사용부터 메뉴바 만들기 keywords: - IT - 프론트 - 웹프로젝트 $$ # 2022-06-15 ## 웹 개요 [ddd](ddd) - 개념 - 엘리먼트(배우)의 부모, 자식, 형제관계 ```html

``` - [개념 - display 속성정리](https://codepen.io/jangka44/live/ZjbpPR) - [개념 - 글자](https://codepen.io/jangka44/pen/mjPYqy) # 2022-06-16 ## HTML ```html 네이버로 가자
구글로 가자 ``` - br, img 등 단일텍로 존재하는 것을 셀프클로즈드테그라 한다. - a테그에서 href의 주소를 새창으로 열기 : target="_blank" ## 젠코딩 `a[age=11]{나이}` -> 텝 ```html 나이 ``` - div+div 형제 - div>div 부모자식 ## 개념 - a와 br $$codepen https://codepen.io/donhyuck/embed/GRQerWw?default-tab=html%2Cresult&editable=true $$ [개념 - 후손 선택자](https://codepen.io/jangka44/pen/KBzjzB) [개념 - text-align](https://codepen.io/jangka44/pen/JBXgNy) [개념 - text-align v2](https://codepen.io/jangka44/pen/JaLwpr) [개념 - hover](https://codepen.io/jangka44/pen/KBzOKj) [개념 - short code(자식, 인접동생)](https://codepen.io/jangka44/pen/rreXjL) [개념 - nbsp;](https://codepen.io/jangka44/pen/yqOmxJ) [개념 - text-deocration:none](https://codepen.io/jangka44/pen/eLNreO) # 2022-06-17 ## 이미지 ```html

``` ## margin, padding ```css div { width:300px; height:300px; background-color:red; display:inline-block; /* 박스의 바깥쪽 여백 */ margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:10px; /* 위 4줄과 의미가 같다. */ margin: 10px; /* 박스의 안쪽 여백 */ padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px; /* 위 4줄과 의미가 같다. */ padding:10px; } ``` - [개념 - margin, padding](https://codepen.io/jangka44/pen/rZvRmQ) - img, a, span 은 기본적으로 display가 inline 이다. # 2022-06-20 ## div:nth-child - 누군가의 자식중 n번째 - div:nth-first-child div:first-child - div:nth:last-child div:last-child - div:nth-child(3n) 3번째 마다 지정 - div이면서 n번째 자식 ## 블록정렬 - text-align은 글자에 대해서만 지정하므로 div에 대해서는 영향이 없다. - margin-left:auto # 2022-06-21 ## id, class - [개념 - 클래스와 ID](https://codepen.io/jangka44/pen/XWdBoMO) - [개념 - 클래스 선택자](https://codepen.io/jangka44/pen/oMZMyQ) ### 식별자 - 동일한 id는 HTML문법오류 - 숫자로 시작하면 안된다. - 한개만 가질 수 있다. - div#idx 로 속성선언 ### 클래스 - 동일한 클래스로 붙일 수 있다. - 여러개를 가질 수 있다. - 클래스와 식별자간의 충돌이 있을 경우, 식별자를 따른다. ## border-radius ``` border-radius : 50%; border-radius : 20px; border-radius : 5px 10px 15px 20px; ``` ## inherit - [개념 - inherit](https://codepen.io/jangka44/pen/JBRgyK) - [개념 - inherit v2](https://codepen.io/jangka44/pen/aaKMxg) - a테그에 상속을 통해 페이지에 다른 요소들과 동일하게 효과를 적용한다. ## 노말라이즈 ```css /* 이 세상의 모든 a 엘리먼트를 평범하게 만든다. */ a { color:inherit; text-decoration:none; } body { margin:0; } ``` ## 1차 메뉴 만들기 - nav의 역할은 메뉴박스, 메뉴의 위치를 설정 - 메뉴아이템이 한줄하기 위해 inline-block속성을 두었다. - 메뉴만들기 1 $$codepen https://codepen.io/donhyuck/embed/eYVajMm?default-tab=html%2Cresult&editable=true $$ - 메뉴만들기 2 $$codepen https://codepen.io/donhyuck/embed/MWQdBMa?default-tab=html%2Cresult&editable=true $$ # 2022-06-22 ## 메뉴 레이아웃 - ul, li / div 등으로 의도에 따른 구분 $$codepen https://codepen.io/donhyuck/embed/jOZjxbg?default-tab=html%2Cresult&editable=true $$ ## 풀다운 메뉴 $$codepen https://codepen.io/donhyuck/embed/eYVwrQW?default-tab=html%2Cresult&editable=true $$ # 2022-06-23 ## position 속성 정리 | 종류 | absolute, fixed | relative | static | | -- | -- | -- | -- | | 너비 | 최대한 줄어든다. | 그대로 유지 | 그대로 유지 | | 본질 | 유령화, 유령의집화 | 유령의집화 | 사람화 | | 겹침허용 | 겹치는게 가능 | 겹치는거 불가능 | 겹치는거 불가능 | | 이동 | top, left, right, bottom으로 이동, 기준이 부모유령 | top, left, right, bottom으로 이동, 기준이 현재위치 | - | ## position 예제 $$codepen https://codepen.io/donhyuck/embed/eYVwoRz?default-tab=html%2Cresult&editable=true $$ $$codepen https://codepen.io/donhyuck/embed/QWQXPOW?default-tab=html%2Cresult&editable=true $$ $$codepen https://codepen.io/donhyuck/embed/KKQjYxV?default-tab=html%2Cresult&editable=true $$ $$codepen https://codepen.io/donhyuck/embed/QWQXPzj?default-tab=html%2Cresult&editable=true $$ # 2022-06-24 ## 줄바꿈 속성 정리 ```css div { /* 절대 줄바꿈 금지 */ white-space:nowrap; /* 가로방향으로 스크롤바를 무조건 생성(넘치치 않으면 스크롤바가 안생김) */ overflow-x:auto; /* 필요에 따라 가로 스크롤바 생성 */ overflow-x:scroll; /* 넘쳐나는 내용 무조건 숨김 */ overflow-x:hidden; /* 넘쳐서 숨겨지는 텍스트 ... 처리 */ text-overflow:ellipsis; ``` ## 2차 메뉴 $$codepen https://codepen.io/donhyuck/embed/vYdoZQm?default-tab=html%2Cresult&editable=true $$ ## 3차 메뉴 $$codepen https://codepen.io/donhyuck/embed/eYVqEYY?default-tab=html%2Cresult&editable=true $$ # 2022-06-27 ## 테이블 만들기 - th테그는 강조되는 열에 적용 thead는 통상적으로 전부 th인 요소로 구성 $$codepen https://codepen.io/donhyuck/embed/zYWOjWq?default-tab=html%2Cresult $$ ## ::before, ::after $$codepen https://codepen.io/donhyuck/embed/gOeYKbZ?default-tab=html%2Cresult $$ - 추가 메뉴바 하단에 막대바 효과 [프론트 메뉴 예제](https://codepen.io/hjyee/pen/PoRYayo?editors=1100) ## 트렌지션 - 기본 상태 div -> 최종 상태 마우스를 올린 hover 상태 이 사이에 지연효과를 준다. - 마우스를 땔때 효과는 기본div에 설정한다. 이는 opacity 가 0이라서 안보일 뿐이다. $$codepen https://codepen.io/donhyuck/embed/bGvbKrN?default-tab=html%2Cresult $$ # 2022-06-28 ### 좌측 토글 사이드바 (1차 메뉴) $$codepen https://codepen.io/donhyuck/embed/jOzOqVE?default-tab=html%2Cresult&editable=true $$ ### 좌측 토글 사이드바 (1차 메뉴 중 하나만 다수) $$codepen https://codepen.io/donhyuck/embed/dymyMRK?default-tab=html%2Cresult&editable=true $$ ### 좌측 토글 사이드바 (2차 메뉴) $$codepen https://codepen.io/donhyuck/embed/NWYWrRd?default-tab=html%2Cresult&editable=true $$