$$config title: [웹1]최흥진 공부위키 keywords: - 220630_8일차 - HTML - CSS $$ # 220630_8일차 ## 풀다운 메뉴 만들기 - 메뉴아이템 3개 만들기(클래스 중복설정) - HTML ``` ``` - CSS ``` /* 노말라이즈 */ body, ul, li { list-style:none; padding:0; margin:0; } a { color:inherit; text-decoration:none; } /* 커스텀 */ .menu-1 { text-align:center; margin-top:50px; } .menu-1 > ul { background-color:#dfdfdf; display:inline-block; padding:0 10px; border-radius:5px; } .menu-1 > ul > li { display:inline-block; width:200px; } .menu-1 > ul > li > a { display:block; padding:10px; } .menu-1 > ul > li:hover > a { background-color:black; color:white; } .menu-1-2 > ul > li > a { color:red; } .menu-1-3 > ul > li > a { color:gold; } ``` ## position 예제 1 - 2X2등분 > 속성 정리 속성정리[https://cdpn.io/pen/debug/aaXopM] - 정의 - `position` : 위치를 지정하는 방식을 정하는 css 속성 - `absolute` : 절대적인 위치 - width값을 주지 않으면 최소한으로 줄어든다. - `top`, `right`, `bottom`, `left` 값으로 위치 조절이 가능하다. - `relative` : 상대적인 위치 - `top`, `right`, `bottom`, `left` 값으로 위치 조절이 가능하다. 현재 위치를 기준으로 이동된다. - `static` : position의 기본 값 --- - HTML `

` `

` - CSS ``` section { margin-top:500px; width:200px; height:200px; border:10px solid red; /*position : relative;를 주면 빨간 네모 안에 위치하게 됨.*/ } section > div { width:60%; height:40%; background-color:blue; position:absolute; } section > div:nth-child(1) { top:0%; left:0%; } section > div:nth-child(2) { background-color:gold; top:10%; left:10%; } section > div:nth-child(3) { background-color:pink; top:20%; left:20%; } section > div:nth-child(4) { background-color:green; top:30%; left:30%; } ``` ## position 예제 2 - 1X3등분 - HTML `

` `

` - CSS ``` section>div { position:absolute; width:33.3333%; height:100%; } section>div:first-child { /* y 좌표 */ top:0%; /* x 좌표 */ left:0%; background-color:black; } section>div:nth-child(2) { top : 0%; left : 33.3333%; background-color : green; } section>div:nth-child(3) { top : 0%; left : 66.6666%; background-color : red; } ``` ## position 예제 3 - 3X3등분 - HTML `

` `

` - CSS ``` section > div { position:absolute; width:33.3333%; height:33.3333%; } section > div:nth-child(1) { top:0; left:0; background-color:#af2323; } section > div:nth-child(2) { top:0; left:33.3333%; background-color:#bf2323; } section > div:nth-child(3) { top:0; left:66.6666%; background-color:#cf2323; } section > div:nth-child(4) { top:33.3333%; left:0; background-color:#cf3323; } section > div:nth-child(5) { top:33.3333%; left:33.3333%; background-color:#cf4323; } section > div:nth-child(6) { top:33.3333%; left:66.6666%; background-color:#cf5323; } section > div:nth-child(7) { top:66.6666%; left:0; background-color:#cf5333; } section > div:nth-child(8) { top:66.6666%; left:33.3333%; background-color:#cf5343; } section > div:nth-child(9) { top:66.6666%; left:66.6666%; background-color:#cf5353; } ``` ## top, left, right, bottom의 개념 - `top`, `right`, `bottom`, `left`의 기본값은 auto이다. - 유령화를 시킨 후에 `top`, `right`, `bottom`, `left`값을 주지 않으면 유령화 시키기 전의 위치에 그대로 있다. - HTML `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur voluptate sapiente molestias doloremque, reprehenderit nam a omnis earum! Quod odit explicabo ducimus quisquam nam minima id perferendis quam architecto obcaecati?` `

abcd

` `

` - CSS ``` div { position:absolute; background-color:red; width:30%; height:30%; top:auto; left:auto; right:auto; bottom:auto; } ``` ## top, left, right, bottom을 이용하여 너비, 높이 조절 - 유령화를 시킨 엘리먼트에 `width`와 `height`값을 주지 않아도 `top`, `right`, `bottom`, `left`을 모두 주면 늘어나 나타난다. - HTML `

` `

` - CSS ``` div { background-color:red; position:absolute; top:auto; bottom:0; left:auto; right:100px; width:20%; height:20%; } section { position:absolute; top:0; left:0; right:300px; bottom:400px; background-color:gold; } ```