[HTML]li태그로 메뉴등을 가로로 배열하기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

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

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

Html

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

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

CSS

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는 포괄적으로 적용시키는 것보다는 필요한 만큼 해당 엘리먼트를 구체적으로 지정해서 주는 것이 더 좋기 때문에.....

My Comment..
위 글에 대한 내용을 제대로 이해하고 접하고 한 시점은 불과 2~3년 인 듯하다..
BCCard 에서 프로젝트 및 유지보수를 하면서..
저러한 태그를 많이 봤는데.. 머.. 그 이전에도 html 을 사용은 했지만..
표준이란 것 자체에 대해서 관심도 없었고, 그게 왜 필요한지도 몰랐고..
그런 것을 누가 쓰기는한건가.. 라는 생각만 했으니까..

하지만 BCCard 내에서는 아무래도 표준을 지켜야 하는 입장이고..
카드에 대한 설명 및 유의사항 등을 알려줄 때..
저 태그를 쓰면, img 를 사용할 필요 없이 약간의 css 만으로 상당히 편하게..
표현이 가능하더라능.. 물론 내가 직접 컨트롤 할 일은 좀 드물다..
퍼블팀이 따로 존재하고, css 도 따로 관리를 하기 때문..
그래도 조금씩의 수정을 위해서 써보면.. 상당히 좋은 점을 느끼긴 한다..

근데 형은 2008년에.. 뷁.. 스럽다;; ㅡ;;ㅡ..