li태그로 메뉴등을 가로로 배열하기

예전에는 페이지 디자인을 할 때 table이용해서 했기 때문에 테이블안에 테이블을 삽입하는 식으로 틀을 잡으면 어떤식의 레이아웃이라도 쉽게 잡을 수 있었지만 요즘에는 table보다는 div등을 이용해서 레이아웃을 잡는게 권장되고 있기 때문에 이런 방법은 쓸수가 없다.

그래서 메뉴등을 배열할때는 보통 ul, li를 이용해서 리스트에 css 스타일로 원하는 모양을 잡는 것 같다. 알다시피 ul, li는 리스트를 만드는 태그이고 스타일을 적용시키지 않으면 앞에 ● 표시가 붙으면서 리스트형태로 만들어지는데 css를 이용하면 원하는대로 배열시킬수 있다.

1
2
3
4
5
6
7

<ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
    <li>menu 4</li>
    <li>menu 5</li>
</ul>

위처럼 html태그를 구성하고 이제 css로 스타일을 주면 된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

ul {
    list-style:none;
    margin:0;
    padding:0;
}

li {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border : 0;
    float: left;
}

ul에 리스트스타일을 주지 않고 필요에 따라 margin과 padding을 적절하게 준다. 가로로 배열하려면 float를 left로 주면 가로로 배열할 수 있다. li안에 글자가 들어갈때는 상관없지만 image(보통 메뉴는 이미지로 구성하니까..)를 넣는다면 border를 0을 주면 빈공간 없이 가로로 배열할 수 있다.

물론 여기서는 간단한 예제이기 때문에 스타일을 ul과 li에 직접 주었지만 실제사이트는 복잡하기 때문에 class를 주거나 id를 주어 스타일을 적용하는 것이 더 좋다. css는 포괄적으로 적용시키는 것보다는 필요한 만큼 해당 엘리먼트를 구체적으로 지정해서 주는 것이 더 좋기 때문에.....