[CSS] 간단한 네비게이션바 만들기 (1) float, (2) height를 이용하기

        <div id="floatBorder">
            <ul>
                <li><a href="#">메뉴A</a></li>
                <li><a href="#">메뉴B</a></li>
                <li><a href="#">메뉴C</a></li>
                <li><a href="#">메뉴D</a></li>
            </ul>
        </div>

 

/*tag reset*/
body, h1, ul {padding: 0px; margin:0px;}
ul {list-style: none;}
a {text-decoration: none; color: inherit;}


#floatBorder ul {float: left; border-bottom: 1px solid #009000;}
/* ② 자식인 li가 float되어 생기는 문제 해결 - 부모도 float추가 */

#floatBorder ul li{float: left;} 
/* ① block인 li를 한 줄에 여러개 배치 */

#floatBorder ul li a {display: block; padding: 10px 20px; font-weight: bold; color: #f00;} 

#floatBorder ul li a:hover {padding-bottom: 5px; border-bottom: 5px solid #009000; color: #009000;}

 

원하는 메뉴의 모습

 

① 자식요소가 float속성을 가지게되면 화면에서 붕떠서

부모요소는 사라진 자식요소로 인해 자신의 높이가 얼마인지 제대로 모르는 상황이 발생한다.

메뉴 위로 밑줄이 올라가버림

 

② 이때 부모요소에 float속성을 주면 원하던대로 밑줄이 아래쪽으로 내려가게 된다.

float으로 li도 뜨고 ul도 떴기 때문이다.

그 뒤에 원하는 메뉴에 맞게 스타일만 적용시켜주면 된다.

 

②' 더 간단한 방법은 부모요소의 높이를 구체적으로 지정해주는 것이다.

밑줄이 위치했으면 하는 곳까지의 세로폭을 잰 후 ul의 세로너비를 입력하면

마찬가지로 아래의 모습이 만들어진다.

 

이렇듯 ul을 감싸는 div가 하나만 있으면 윗과정을 통해 간단하게 메뉴를 만들 수 있다.

그러나 만약 div가 여러 개라면 레이아웃이 이상하게 되기 때문에

과정을 더 거쳐서 보기 좋게 만들어야 한다.

 

왜냐면 아래 사진과 같이 div가 ul의 float으로 인해 마찬가지로

자신의 높이를 알지 못하게 되어 두 번째 div요소가 상단으로 달라붙기 때문이다.

아래의 새로운 예시를 보자

 

이럴 땐 div의 대략적인 높이를 측정하여 지정해주면

원하는 곳에 달라붙게 된다.

 

 

 

 

 

출처

- 2020 국비교육과정 공부내용