CSS FAQ
CSS로 삽질 중인 퍼블리셔 위한 FAQ와 해결방안을 경험을 통해 정리하고 있다. 사실은 스스로 나중에 참조하기 위한 성격도 있다.
- IE와 FF에서 다르게 나와요.
- 레이어의 높이가 늘어나지 않아요.
- 오른쪽 레이어가 아래 칸으로 밀려요.
- 가운데 정렬 어떻게 하는거죠?
- IE에서 max-width가 안되네요.
- to be continued…
1. IE와 FF에서 다르게 나와요. 왜 그렇죠?
IE는 기본적으로 표준을 좋아하지 않는다(좀더 정확하게는 W3C 표준을 싫어하고, MS 표준을 좋아한다). 이 때는 IE를 잘 달래서 가능한한 W3C 표준을 따르도록 유도해야한다. IE에게 던져줄 당근은 두가지이다.
- DTD 선언
- HTML 엘리먼트의 초기화
각설하고, 실예를 보자. 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">
CSS 문서의 맨 상단에 다음 코드를 삽입한다.
-
* {margin:0; padding:0; line-height:1.5; font-size:12px; font-family:Gulim, verdana, arial, AppleGothic, sans-serif;}
이렇게만 선언하면, 왠만하면 IE와 FF 모두에서 비슷하게 보일 것이다. 주의할 것은 모든 것을 의미하는 ‘*’에는 상대크기의 단위(em,%)를 사용하지 말자. 중첩 에리먼트가 있을 경우, 감당하기 어려운 결과를 초래할 것이다. 무슨말인지 궁금하면 직접 시험해 보라.
DTD 선언에 대해 더 알기를 원한다면 W3C 문서를 참조하자. http://www.w3.org/QA/2002/04/valid-dtd-list.html
top
2. 레이어의 높이가 늘어나지 않아요. 미치겠어요.
높이가 정해진 경우에는 문제될게 없지만, 높이가 정해지지 않았고 float 된 레이어인 경우 높이가 내용물의 크기에 따라 늘어나지 않아 무척이나 성가시다. 배경이나 테두리가 있으면 아주 흉찍한 모습이된다. 이문제는 width와 overflow를 이용하면 거의 해결할 수 있다.
-
#sidebar {float:left;width:100px;overflow:hidden;}
3. 오른쪽 레이어가 아래 칸으로 밀려요. 자꾸 테이블 생각나게 하네요.
다 만들어 놓은 레이아웃에 이런 현상이 한번 발생하기 시작하면 정신건강에 매우 해롭다. 큰 맘먹고 시작한 CSS 레이아웃을 포기하기까지 한다. 경험해 본 사람은 알 것이다. 이런 현상이 발생하는 이유는 주로 다음 두가지 경우이다.
- IE6 3px 버그
- 단순 계산 실수
코드를 먼저 보자
-
<div id="container">
-
<div id="col1">
-
<div id="menu1">menu1</div>
-
<div id="menu2">menu2</div>
-
</div>
-
<div id="col2">
-
<div id="step1">step1</div>
-
<div id="step2">step2</div>
-
</div>
-
</div>
스타일시트는 다음과 같이,
-
#container {width:600px;}
-
#col1 {float:left;width:100px;height:100px;}
-
#col2 {margin-left:100px;height:100px;}
FF에서는 기대하는 대로 왼쪽에 100px짜리 오른쪽에 500px짜리 레이어가 배치되지만, IE6에서는 안타깝게도 오른쪽에 있어야 할 레이어가 아래칸으로 밀린다. 이런 경우 다음과 같이 시도해 보자.
-
#container {width:600px;overflow:hidden;}
-
#col1 {float:left;width:100px;height:100px;}
-
#col2 {float:left;width:500px;height:100px;}
두번째 경우 단순 계산 착오는 주로 margin이나 padding 때문에 발생한다. 잘못된 예를 보자.
-
#container {width:600px;overflow:hidden;}
-
#col1 {float:left;width:100px;height:100px;}
-
#col2 {float:left;width:500px;height:100px;}
-
#step1 {margin:3px;width:100%;}
-
#step2 {width:100%;border:1px solid #ccc;}
#step1의 전체 너비는 3+100%(500)+3=506px 이 되고,
#step2의 전체 너비는 1+100%(500)+1=502px 이 되어
두 경우 모두 기대한 대로 표현되지 않을 가능성이 높다. 이런 경우에도 width와 overflow의 조합으로 어느정도 극복은 되지만, 근본적으로 폭을 정확하게 계산해 주면 깔끔하게 해결할 수 있다. 이를테면,
-
#container {width:600px;overflow:hidden;}
-
#col1 {float:left;width:100px;height:100px;}
-
#col2 {float:left;width:500px;height:100px;}
-
#step1 {margin:3px;width:494px;}
-
#step2 {width:498px;border:1px solid #ccc;}
4. 가운데 정렬 어떻게 하는거죠? 될때도 있고 안될때도 있어요.
먼저 정렬하고자 하는 엘리먼트가 인라인인지 블록인지 확인하자. 행동 양식이 다르므로 해법 역시 차이가 있다. 비교적 간단한 가로 정렬부터 알아보자. id=wrapper인 레이어를 가운데 정렬하려면,
-
#wrapper {margin:0 auto;}
오른쪽 정렬하려면,
-
#wrapper {margin:0 0 0 auto;}
테이블 셀 안에 모든 인라인 엘리먼트(텍스트,img,span 등)를 가운데 정렬하려면,
-
table td {text-align:center;}
center 태그나 align=center를 사용하지 않고도 깔끔하게 정렬된다.
세로 정렬은 정말로 만만치 않은 작업이다. 컨텐츠의 흐름이 좌에서 우로, 위에서 아래로 자연스럽게 흐르도록 하는 것에 우선순위를 두어서인지 div+CSS만으로 세로 정렬하는데는 한계가 있다. 이를 감안하여 디자인하여 가능한한 세로 정렬할 필요가 없게 하는게 좋다. 실제로 세로의 높이가 가변이면서 가운데 정렬을 해야만 하는 디자인은 거의 없다고 보아도 무방하다. 정말로 불가피한 상황에서 사용해야 한다면 table 태그를 하나 정도 사용하는 것도 무방하다.
-
<table id="outterLayer"><tr>
-
<td>
-
<p id="middleLayer">가운데 정렬된 레이어</p>
-
</td>
-
</tr>
-
</table>
스타일은 다음과 같이.
-
#outterLayer {width:300px;height:300px;}
-
#outterLayer td {vertical-align:middle;text-align:center;}
-
#middleLayer {margin:auto;}
이렇게 하면 id=middleLayer의 높이가 변하더라도 항상 가운데 정렬를 유지하게 된다.
top
5. IE에서 max-width가 안되네요.
IE가 max-width을 지원하지 않아 생기는 고질적인 문제이다. 사실 이미지는 width와 height을 명확하게 지정해 주는 것이 좋다. 하지만 일반 사용자가 올리는 이미지에 폭과 높이가 지정되어 있기를 바라는 것은 IE가 Acid2 테스트를 통과하기를 기대하는 것보다 훨씬 어려워보인다. 또한 이 블로그와 같이 폭이 달라지는 경우도 있기 때문에 다음과 같은 꼼수를 쓸 수 밖에 없다.
-
#content img {
-
width:expression(this.width > 450 ? "100%" : "auto");/*for IE*/
-
max-width: 100%;
-
}
사실 이것은 표준도 아니고, expression은 어차피 자바스크립트이다. 현재로서는 이보다 더 나은 방법을 찾지 못했다.
좀더 범용적으로 이용하고 싶다면 다음을 참조하자.
http://www.svendtofte.com/code/max_width_in_ie/
http://tom-lee.blogspot.com/2006/03/max-width-in-ie-using-css-expression.html
to be continued…