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

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

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


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

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

Response : No Trackback , 5 Comments

Trackback URL : 이 글에는 트랙백을 보낼 수 없습니다

Comments List

엑소버드 | 2015/04/15 15:31 + M/D Reply

li에 display: inline;을 주는 것보다도 더 좋나요?
1. Outsider | 2015/04/16 01:30 + M/D
  
  오래 전 글이라 처음 float를 써보면서 썼던 글입니다. 요즘은 반응형때문에라도 inline-block을 더 많이 쓰긴 합니다.(물론 실제에선 상황에 따라 둘을 바꿔가면서 쓰고요.)
감사합니다 | 2016/08/29 14:16 + M/D Reply

감사합니다 퍼갈께요!
siwa | 2016/09/28 09:00 + M/D Reply

안녕하세요. 올려주신글 유용하게 잘 보았습니다. 혹시 포스팅 글 속의 코드는 어떤 서비스를 사용하셔서 작성하셨는지 궁금합니다. 블로그에 글 쓸때 코드를 보기좋게 올리고 싶은데 올려두신 예시가 적절해 보여서 질문 드립니다^^
1. Outsider | 2016/09/28 20:51 + M/D
  
  코드는 prism.js로 문법강조를 한 것입니다.

Comments