by Jeoney Kim

HTML+CSS float를 이용한 가로 메뉴 만들기
2018년 10월 21일에 업데이트됨

by Jeoney Kim

가로 메뉴 만들기 float를 이용한 가로 메뉴 만들기

홈페이지에서 메뉴 목록은 일반적으로 앞에 순서가 붙지 않습니다.
그래서 보통 순서가 없는 목록인 ul을 많이 사용합니다.

본 예제는 float를 사용하여 가로 배치하는 방법입니다.
float를 대체하는 신기술이 나오긴 했지만
아직까지는 float가 보편적으로 많이 사용되고 있습니다.

코딩으로 실습해보기

  • HTML

    <ul class="horizontal-menu">

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li><a href="#">Products</a></li>

    <li><a href="#">Contact</a></li>

    </ul>

  • CSS설명보기

    /* CSS RESET */CSS 초기화 - 브라우저마다 기본으로 제공하는 스타일이 모두 다르기 때문에 반드시 초기화 해야한다

    body, ul {

    margin: 0;

    padding: 0;

    }

    li {

    list-style-type: none;목록 앞에 붙는 점을 없애기

    }

    a {

    text-decoration: none;밑줄 없애기

    color: inherit;부모의 글자색 물려받기

    }

    /* Design Area */여기서 부터 실제 디자인하는 영역

    body {

    text-align: center;

    }

    .horizontal-menu {

    display: inline-block;메뉴 가운데 정렬 / 이 때 text-align 속성은 반드시 상위 요소에 지정해야한다 / 본 예제에서는 body에 지정함

    overflow: hidden;float clear , float 해제 / float를 사용했을 때 부모의 높이가 없어지는 문제점을 보완해주는 방법 중 한 가지!

    border-bottom: 3px solid #318294;

    }

    .horizontal-menu li {

    float: left;float를 이용하면 세로로만 배치되는 block 요소를 쉽게 가로배치 할 수 있다

    }

    .horizontal-menu a {

    display: block;사용자 입장에서 링크 버튼을 사용하기 편하도록 링크 영역을 확장시켜줌

    height: 50px;

    line-height: 50px;텍스트 요소의 높이와 동일한 값을 지정하면 텍스트를 세로 가운데 정렬을 할 수 있다 / 단, 이 방법은 텍스트가 한 줄일때만 가능하다

    background-color: #3ea3ba;

    color: #ddd;

    padding: 0 35px;각 메뉴 버튼의 크기를 지정하지 않고 내부 여백을 이용하면 유지보수 작업에 용이하다

    border-right: 1px solid #358da1;

    }

    .horizontal-menu li:last-child a { 가상클래스(last-child) / 해당 항목 중 제일 마지막 항목을 자동으로 선택해준다

    border-right: 0;

    }

    .horizontal-menu a:hover { 가상클래스(hover) / 마우스를 해당 요소위에 얹었을 때 디자인을 변경할 수 있다

    background-color: #358da1;

    color: #fff;

    }

아래 그림처럼 float가 적용되기 전에는
메뉴의 구조가 세로 형태입니다.

최초에 목록이 아래로 떨어지는 이유는
li가 block의 성질을 가지고 있기 때문입니다.

float를 이용하면
세로로만 배치되는 block 요소를
쉽게 가로배치 할 수 있습니다.

li에 float를 지정하면
메뉴의 형태가 세로에서 가로 형태로 바뀝니다.
li는 메뉴의 구조 담당이라고 할 수 있습니다.

목록에서 메뉴 버튼의 디자인은
말 그대로 버튼 디자인입니다.
그러므로 버튼 디자인에 들어가는 스타일은
모두 버튼에 지정하면 됩니다.

구조 담당디자인 담당을 구분하여 스타일을 지정하면
차 후 유지보수 작업의 효율성을 높일 수 있습니다.


UL의 어원 - Unordered List (순서가 없는 목록)
가상클래스(pseudo-class) - 해당 요소의 상태가 변화되었을 때 자동으로 추가되는 클래스