20-04-19 드롭다운 메뉴 만들기 (예습)

드롭다운 메뉴 만들기

***창의 크기가 줄어들면 메뉴가 뭉게지는데 이건 메뉴 컨테이너를 block으로 바꾸고 margin: 0 auto;로 해줘야한다. 하지만 수업에서는 사용하지 않았으니 생략한다.***

position

포지션의 값으로는 static,relative,fixed,absolute가 있다

 

static은 기본 포지션 값으로 특별한 방식으로 위치가 지정되어 있지는 않다

 

relative는 별도의 속성을 지정하지 않는 이상 static과 동일하게 작동한다

상대 위치가 지정된 엘리먼트에 top이나 right, bottom, left를 지정하면 기본 위치와 다르게 위치가 조정된다.

 

fixed는 고정엘리먼트로 viewport에 상대적으로 위치하게된다

 

absolute는 위치가 지정된 부모를 기준으로 상대적으로 위치하게된다.top,bottom,left,right태그를 사용할 수 있다.

top,bottom,left,right를 사용 하지않으면 위치는 부모를 기준으로 static처럼 정리된다.

부모의 컨텐츠 범위를 차지 하지 않게된다.

 

태그ol,ul,li

리스트를 작성할 때에 사용되는 태그이다.

display는 기본적으로 block를 가지고 있다.

ol태그는 ordered list. 즉,리스트에 숫자를 기입하는 태그이다.

ul태그는 unordered list. 리스트에 숫자를 기입하지 않는 태그이다.

li태그는 ol과ul의 하위태그로 리스트를 기입하는 태그이다.

ol,ul,li태그를 사용할 때는 보통 노멀라이즈를 사용한다.

ex) ol,ul,li { list-style: none; margin: 0; padding: 0; }

 

드롭다운 만드는 방법

저번 시간에 만든 메뉴에 position을 추가해서 드롭다운을 만들 수 있다.

메인 메뉴와 형제 태그로 ul을 집어넣어 li로 하위 메뉴를 만들어 준다.

하지만 이렇게 되면 메인메뉴가 위로 올라가고 메인메뉴 안에 하위메뉴가 들어가게된다.

그래서 메인메뉴를 감싸고 있는 태그에 position:relative;를 주고

하위 메뉴를 감싸고있는 ul에 position:absolute;를 적용한다.

그렇게되면 absolute속성을 가지고 있는 ul태그는 relative를 가지고 있는 부모를 기준으로 정리된다.

그리고 absolute 속성은 부모의 컨텐츠 범위를 늘리지 않기 때문에 옆에 있는 다른 메뉴에 영향을 주지 않게 된다.

하지만 형제 태그를 가지고 있기 때문에 형제 태그의 아래로 정리된다.

이제 메인메뉴가 hover되어있지 않을 때에는 나오지 않게 하기 위해서 display: none;를 ul태그에 적용한다.

그리고 메인메뉴의 hover에 display: block;를 적용해준다

이제 서브메뉴와 메인메뉴의 사이즈를 동일하게 하기 위해서 바꿔줘야할게 있다.

padding은 안에있는 컨텐츠를 기준으로 넓어지기 때문에 글의 길이에 따라서 너비가 바뀐다.

그래서 메뉴를 위,아래의 중앙으로 정렬시키기 위해서 padding: n 0; 값으로 넣어주고 너비는 고정시키기 위해서 width값을 넣어준다.

하위 메뉴 역시 같은 width 값을 넣어 준다.