그래서 메뉴등을 배열할때는 보통 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는 포괄적으로 적용시키는 것보다는 필요한 만큼 해당 엘리먼트를 구체적으로 지정해서 주는 것이 더 좋기 때문에.....
li에 display: inline;을 주는 것보다도 더 좋나요?
오래 전 글이라 처음 float를 써보면서 썼던 글입니다. 요즘은 반응형때문에라도 inline-block을 더 많이 쓰긴 합니다.(물론 실제에선 상황에 따라 둘을 바꿔가면서 쓰고요.)
감사합니다 퍼갈께요!
안녕하세요. 올려주신글 유용하게 잘 보았습니다. 혹시 포스팅 글 속의 코드는 어떤 서비스를 사용하셔서 작성하셨는지 궁금합니다. 블로그에 글 쓸때 코드를 보기좋게 올리고 싶은데 올려두신 예시가 적절해 보여서 질문 드립니다^^
코드는 prism.js로 문법강조를 한 것입니다.