요즘 제가 float속성 대신 많이 사용하고있는 방법은 inline-block입니다.
이미지 겔러리 같은 디자인을 코딩시 float의 단점은 높이가 다를 경우 다음줄의 정렬이 뒤틀어지는 문제가 생기기 때문에 높이를 정해주거나 사이에 clear를 해야 하는 문제가 있었죠..
(저같은 경우는 말이죠.. 좋은 방법을 알고계시다면 알려주세요.)
그래서 사용하는 방법이 inline-block입니다.
inline-block로 정렬시 높이가 일정하지 않아도 정렬이 뒤틀림 없이 나오게 할수가 있습니다.
거기다 세로 정렬까지 되는 아주 멋진 속성인듯 싶습니다.
단점
구버전 브라우저의 빈약한 지원
파이어폭스 2.0 이하의 브라우저에서는 이 속성을 지원하지 않기 때문에 -moz-inline-box속성을 써야만 합니다.
하지만 이것 역시 완벽한 방법은 아닌듯합니다.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> Code Example </title>
<style type="text/css">
li {
display:-moz-inline-box; /* 구 버전의 Moz */
display:inline-block; /* Op, Saf, Moz3.0이상, IE8등 */
}
</style>
</head>
<body>
<ul>
<li>
<span>test</span>
<span>test</span>
</li>
</ul>
</body>
</html>
[/html]
위와 같은 코드가 있을시 li의 자식요소인 span까지 -moz-inline-box속성을 먹어서 줄바꿈되는 문제가 있습니다.
CSS tests and experiments를 운영하는 Bruno Fassino님은 li의 자식요소를 한번 더 감싸는 방법으로 회피하고 있더군요.
익스플로러의 경우 inline요소(span, strong..등)에서는 문제가 없지만 block요소(div, li, p…등)에서는 문제가 생깁니다.
이 방법을 회피 하기 위해서는 익스플로러에서는 inline속성으로 만들어주면 됩니다.
[css]
li {
display:-moz-inline-box; /* 구 버전의 Moz */
display:inline-block; /* Op, Saf, Moz3.0이상, IE8등 */
}
/* IE7 */
*+ html li {
display:inline;
}
/* IE6 */
* html li {
display:inline;
}
[/css]
공백문자
inline-block의 경우 inline속성과 같이 줄바꿈없이 내용을 보여주게 되지만 코드의 가독성을 위해서 사용된 줄바꿈, 들여쓰기를 하나의 공백문자로 인식하게 되어서 한개 만큼의 공백이 생기게 됩니다.
제가 아는 해결방법은 두가지가 있습니다.
첫번째로는 아래와 같이 부모 요소에 font-size, line-height를 0으로 설정하고 inline-block을 준 요소에 font-size와 line-height를 다시 설정해주는 방법이죠.
[css]
ul {
font-size:0;
line-height:0;
}
ul li {
font-size:12px;
line-height:1.2;
display:-moz-inline-box; /* 구 버전의 Moz */
display:inline-block; /* Op, Saf, Moz3.0이상, IE8등 */
}
[/css]
두번째 방법은 html코드의 “>”부분을 줄바꿈해 버리거나 한줄로 붙여 쓰는 방법이죠.
(위에서도 언급했던 Bruno Fassino님의 경우에도 아래와 같은 방법으로 공백문자가 생기는 방법을 회피 했더군요.)
[html]
<ul
><li>content</li
><li>content</li
><li>content</li
></ul>
[/html]
두번째 방법의 경우 개발자와의 대화가 필요합니다.
html를 잘 모르는 개발자일 경우 이런 상황을 인식하지 못하고 할줄로 붙여서 쓴 방법을 무시해 버릴수도 있기 때문이죠.
덧.
위의 글은 접근성에 대한 부분은 무시하고 작성되었습니다.
접근성에 문제가 있다고 딴지를 거신다면 할말이 없습니다.:(