by Jeoney Kim

HTML+CSS 세로 메뉴 만들기
2018년 10월 5일에 업데이트됨

by Jeoney Kim

세로 메뉴 만들기 아래로 떨어지는 메뉴 목록

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

코딩으로 실습해보기

  • HTML

    <ul class="vertical-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 */여기서 부터 실제 디자인하는 영역

    .vertical-menu {

    width: 200px;

    margin: 0 auto;blcok 요소 가운데 정렬 / width 값이 반드시 지정되어야 함!

    }

    .vertical-menu a {

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

    height: 50px;

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

    background-color: #d63f22;

    color: #ccc;

    padding: 0 20px;

    border-bottom: 1px solid #bf391f;

    }

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

    background-color: #bf391f;

    color: #fff;

    }

목록이 아래로 떨어지는 이유는
li가 block의 성질을 가지고 있기 때문입니다.
밑으로 떨어지는 모양새는
메뉴의 구조라고 할 수 있습니다.

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

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


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