화면 가운데 위치하는 가로 메뉴

CSS 댓글 달기

보통 메뉴를 마크업할 땐 li로 나열해서 float propterty를 줘서 일렬로 늘어트린 후 감싸고 있는 상위 엘르먼트에다 width를 지정하고 margin propterty로 중앙에 위치시키는 기법이 많이 사용된다.

그런데 메뉴가 더 추가되거나 삭제되면 전체 가로 너비를 다시 지정해줘야 하는 문제가 발생하는데, 이런 단점을 보완한 기법이 있는데 바로 display:inline과 display:inline-block propterty에 그 해법이 있다.

CSS Wizardry에 소개된 기법으로 마크업과 CSS는 다음과 같다.

마크업:

<ul id="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

CSS:

#nav{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
#nav li{
  display:inline;
}
#nav a{
  display:inline-block;
  padding:10px;
}

text-aling:center;로 inline 속성을 갖게 된 li를 중앙 정렬하되 중요한 것은, li에다 display:inline;을 주고 a에는 display:inline-block;을 지정해 주는 것.

일반적으로 그냥 li에 display:inline-block;을 지정해 줄 수도 있지만, IE6-7에선 inline-block을 inline elements에 지정했을 때만 제대로 인식하기 때문에 a elements에 지정하였다.

얼핏 IE에선 inline-block이 말을 잘 듣지 않는다고 들은 것 같아서 이름 그대로 float만 떠올렸는데, IE6-7에서도 inline-block을 제대로만 활용하면 이렇듯 그 효용성은 더 높아질 것이다.

꼬리표:

관련된 주제의 글

댓글을 남겨 주세요