한님은 잡학편식에서 "0380. 가변폭 스킨(테마), 튼튼하십니까?"라는 글을 읽었습니다. 마침 제가 가변폭 스킨을 공개하려고 있던 참이라 눈에 들어오는군요.
CSS2 스탠다드에서 규정한 속성들 중 매우 단순하면서도 막강한 기능을 가지고 있는 것들이 있습니다. 바로 min-width, max-width, min-height, max-height 이죠.
예를 들어 <div style="min-width:250px;">가나다라마</div> 이렇게 적으면 div 안에 내용이 아무리 적어도 크기를 최소한 250px 으로 맞춰줍니다. 물론 내용이 많아지면 자연스럽게 늘어납니다. 그게 최소-넓이, min-width 지요. 반대로 내용이 아무리 많아져도 최대폭을 결정시켜주는 값은 max-width 겠지요. 두 값을 동시에 이용할 수도 있습니다. 이런 식으로 말이죠. <div style="min-width:250px; max-width:500px;">가나다라마</div>
문제는 이 편리한 속성을 인터넷 익스플로러 (이하 IE)가 알아듣지 못한다는데 있습니다. 적어도 IE 6 는 그렇습니다. IE 7 은 아직 써보지 않아서 잘 모르겠고요. 이 중에 특히 min-width, min-height 가 문제입니다. 브라우저의 가로폭이 줄어들다 보면 사이트의 기본적인 레이아웃이 망가질 수 있기 때문이지요. 구글링을 하면 이 문제로 고통받는 수많은 인민들이 보일 겁니다. 나무아비타불…
이 문제를 해결하기 위한 몇 가지 hack이 존재하기는 하지만 제 경험으로는 어떤 경우에는 제대로 작동하고, 또 어떤 경우에는 작동하지 않는 경우가 있습니다. 엄밀히 따지면 그 hack을 제대로 적용시키려면 디자인을 해체하고 다시 구성해야 되는 일이 생기는가 하면 레이아웃이 복잡하게 정의되어 있을 때는 다른 요소들과 충돌하는 경우도 생긴다는 것이지요.
결국 제가 내린 결론은 레이아웃과 관련된 모든 문제를 CSS로 처리할 필요는 없다는 것입니다. 아니, 완벽하게 처리할 수 없다가 더 맞는 말이겠지요.
그렇다면 IE 에서 min-width와 max-height를 구현하는 가장 쉬운 방법은요? 이미지를 사용하는 겁니다. min-width를 예로 들죠. 어떤 영역이 커지면 커졌지 350px 이하로는 줄어들지 말아야 할 어떤 영역이 있다고 한다면,
간단한 원리지요. 가로폭이 350px인 이미지가 영역 안에 들어있으니 해당 영역은 절대 그 이하로 표시되지 않을 겁니다. 게다가 어차피 투명 이미지이기 때문에 세로 1px 이 남아있어도 큰 지장은 없겠지요. 보이지 않으니까요. 물론 나중에 디자인을 수정하면 스타일시트 말고도 문서를 직접 손봐야 하는 번거로움이 생겼지만 그래도 뭐, 어쩌겠어요.
간단하죠? IE 쪽에서는 언제쯤 이 문제를 수정할까요? 혹시 벌써 수정했나요? Hey, IE! Can you speak CSS2?
p.s. 하지만 이 방법 역시 문제가 있습니다. 바로 width를 em으로 지정했을 때이지요. 이건 위의 방법으로는 불가능합니다. img 태그 안의 width를 em으로 줄 수 없는 걸로 알고 있어요.
CSS2 스탠다드에서 규정한 속성들 중 매우 단순하면서도 막강한 기능을 가지고 있는 것들이 있습니다. 바로 min-width, max-width, min-height, max-height 이죠.
예를 들어 <div style="min-width:250px;">가나다라마</div> 이렇게 적으면 div 안에 내용이 아무리 적어도 크기를 최소한 250px 으로 맞춰줍니다. 물론 내용이 많아지면 자연스럽게 늘어납니다. 그게 최소-넓이, min-width 지요. 반대로 내용이 아무리 많아져도 최대폭을 결정시켜주는 값은 max-width 겠지요. 두 값을 동시에 이용할 수도 있습니다. 이런 식으로 말이죠. <div style="min-width:250px; max-width:500px;">가나다라마</div>
문제는 이 편리한 속성을 인터넷 익스플로러 (이하 IE)가 알아듣지 못한다는데 있습니다. 적어도 IE 6 는 그렇습니다. IE 7 은 아직 써보지 않아서 잘 모르겠고요. 이 중에 특히 min-width, min-height 가 문제입니다. 브라우저의 가로폭이 줄어들다 보면 사이트의 기본적인 레이아웃이 망가질 수 있기 때문이지요. 구글링을 하면 이 문제로 고통받는 수많은 인민들이 보일 겁니다. 나무아비타불…
이 문제를 해결하기 위한 몇 가지 hack이 존재하기는 하지만 제 경험으로는 어떤 경우에는 제대로 작동하고, 또 어떤 경우에는 작동하지 않는 경우가 있습니다. 엄밀히 따지면 그 hack을 제대로 적용시키려면 디자인을 해체하고 다시 구성해야 되는 일이 생기는가 하면 레이아웃이 복잡하게 정의되어 있을 때는 다른 요소들과 충돌하는 경우도 생긴다는 것이지요.
하지만, 이 hack에 대해서도 간단하게 설명하고 넘어가자면 expression 이라는 걸 이용하는 겁니다. 이건 또 IE 만 알아듣는다죠. (나중에 따로 설명할게요.)
다른 브라우저에서는 이와 같이 적으면 되는 정의를
IE를 위해서는 이런 식으로 추가하는 겁니다.
클라이언트 브라우저의 화면 가로 사이즈가 1024px 보다 작으면 350px 을 유지하라는 뜻이죠.
다른 브라우저에서는 이와 같이 적으면 되는 정의를
.box {min-width:350px;}
IE를 위해서는 이런 식으로 추가하는 겁니다.
.box {width:expression(document.body.clientWidth < 1024? "350px": "auto" );}
클라이언트 브라우저의 화면 가로 사이즈가 1024px 보다 작으면 350px 을 유지하라는 뜻이죠.
결국 제가 내린 결론은 레이아웃과 관련된 모든 문제를 CSS로 처리할 필요는 없다는 것입니다. 아니, 완벽하게 처리할 수 없다가 더 맞는 말이겠지요.
그렇다면 IE 에서 min-width와 max-height를 구현하는 가장 쉬운 방법은요? 이미지를 사용하는 겁니다. min-width를 예로 들죠. 어떤 영역이 커지면 커졌지 350px 이하로는 줄어들지 말아야 할 어떤 영역이 있다고 한다면,
1. 가로 세로 1px 짜리 투명 gif 이미지 하나를 준비합니다. 이름을 spacer.gif 라고 하죠.
2. 필요한 영역 안에 간단하게 다음과 같이 적어주세요.
3. 끝
2. 필요한 영역 안에 간단하게 다음과 같이 적어주세요.
<img src="spacer.gif" border=0 width="350px" height="1px">
3. 끝
간단한 원리지요. 가로폭이 350px인 이미지가 영역 안에 들어있으니 해당 영역은 절대 그 이하로 표시되지 않을 겁니다. 게다가 어차피 투명 이미지이기 때문에 세로 1px 이 남아있어도 큰 지장은 없겠지요. 보이지 않으니까요. 물론 나중에 디자인을 수정하면 스타일시트 말고도 문서를 직접 손봐야 하는 번거로움이 생겼지만 그래도 뭐, 어쩌겠어요.
간단하죠? IE 쪽에서는 언제쯤 이 문제를 수정할까요? 혹시 벌써 수정했나요? Hey, IE! Can you speak CSS2?
p.s. 하지만 이 방법 역시 문제가 있습니다. 바로 width를 em으로 지정했을 때이지요. 이건 위의 방법으로는 불가능합니다. img 태그 안의 width를 em으로 줄 수 없는 걸로 알고 있어요.
