브라우저별 표시 방법 - container 안의 div들에 float:left 했을 때

CSS 2007. 2. 13. 20:42
지난 번에 태터툴즈의 2단형 스킨의 구조에 대해 알아 본 적이 있습니다. 이번에는 그와 연관해서 하지만 조금 다른 이야기를 해보려 합니다.

기본 형태

html과 css를 이용해서 이런 형태를 만들었죠.


지난 번에 적은 내용에서는 스킨의 마지막 부분에 footer 영역이 있었습니다. 대체로 footer 영역에 clear:both 속성을 넣어주어 디자인되어 있는 스킨이 대부분입니다.

그런데, 만약 header나 footer 영역이 없이 content 영역과 sidebar 영역들만 존재한다고 가정해 보죠. 충분히 그럴 수 있잖아요. 꼭 header와 footer를 적어줘야만 하는 건 아니니까요. 이런 식으로 말이죠.

<div id="container">
   <div id="content"></div>
   <div id="sidebar1"></div>
   <div id="sidebar2"></div>
</div>

<style>
#container { }
#content   { float:left;}
#sidebar1  { float:left;}
#sidebar2  { float:left;}
</style>

이럴 경우 즉, content 영역과 sidebar 영역(들)이 여전히 float:left; 로 지정되는 경우 container 영역과의 위치관계는 어떻게 될까요? float을 사용하면 위에 (가상적으로^^) 뜬다고 했잖아요. 그럼 container는 float을 사용한 div들을 포함할까요? 아니면 포함하지 않을까요? 그래서 질문을 하는 겁니다. 어떻게 될까요?

한 마디로 말하자면 브라우저마다 그 형태가 다릅니다.

간단하게 말하면 인터넷 익스플로러와 오페라 등의 경우는 float:left; 되어도 container가 내부에서 float된 div들을 감싸주게 됩니다. 반면 파이어폭스, 사파리, 컨커러 (Konquerer) 등은 container가 내부에서 float된 div들을 감싸지 않게 됩니다.

백문이 불여일견. 이와 같습니다.

IE7

IE7 (윈도우 XP) (IE6도 같은 모습입니다.)


오페라

오페라 9.10 (우분투)


파이어폭스

파이어폭스 (윈도우 XP)


사파리

사파리 2.0 (OSX)


컨커러

컨커러 (Konqueror) 3.5.5 (데비안)


대부분의 경우 이런 차이가 있어도 크게 문제가 되지는 않습니다. 대체로 아래에 footer 영역을 사용할 때는 clear:both; 등으로 새롭게 시작하니 말이죠. 하지만 이런 차이는 분명히 다른 차이를 만들 수도 있습니다. 그건 다음에 알아보도록 하죠. ^^


참고

사파리와 컨커러는 KHTML 엔진을 사용합니다.
파이어폭스는 게코 (Gecko) 엔진을 사용하죠.
오페라는 오페라 엔진이고요.
인터넷 익스플로러 역시 자체 엔진을 사용합니다.


p.s. 언뜻 보니 몇몇 영역의 가로폭이 슬쩍 다른 것 같군요. 분명 같은 코드인데 말이죠. 이것 역시 다음에 설명하겠습니다. ^^
,

float:left 된 div들 중 마지막 div가 반복되는 경우

팁 2007. 2. 13. 12:24
얼마 전에 [질문] div에서 float 시켰을 때 IE에서 문제가 생깁니다. 라는 글을 쓴 적이 있습니다. 요약하자면 float:left; 로 붙여놓은 div들 중 가장 마지막 div이 이상하게 표현된다는 것이었죠.

이상하게 표시되는 div

IE에서만 이런 일이 생깁니다. 어제 : 3 이라는 부분이 영역을 벗어나 반복되고 있습니다.


왜 이런 일이 생기는지는 아직 잘 모르겠지만 언제 발생하는지는 실험을 통해 알 수 있었습니다. 예를 들면 이런 소스가 있다고 하지요.

<div id="container">
   <div id="content"></div>
   <div id="sidebar1"></div>
   <div id="sidebar2"></div>
</div>

<style>
#container { width:1000px; margin:0px auto;}
#content    { width:600px; float:left;}
#sidebar1  { width:200px; float:left;}
#sidebar2  { width:200px; float:left;}
</style>

보시면 알겠지만 태터툴즈 스킨에서 기본적으로 사용하는 형태의 구조입니다. (사이드바가 1개있든 2개 있든 그건 관계없습니다.) 위와 같은 구조로 되어 있는 경우에 각각의 div에 내용으로 width를 꽉꽉 채워 넣으면 위와 같은 일이 발생합니다.

보통 제가 제작하는 태터툴즈 스킨의 컨텐츠 영역과 사이드바 영역은 빈 공간이 없이 촘촘하게 붙여두고 채워넣는 편인데요, 그럴 때마다 저런 일이 발생하더군요. 즉, #content와 #sidebar1, #sidebar2 등의 넓이의 합과 #container의 넓이가 같으면서 여타의 빈공간이 확보되지 않는 태터툴즈 스킨을 만들다 보면 발생했습니다.

실제로 그래서 Letter To You 1.1 때도 그렇고 Formal Boxes 1.1 때도 그렇고 여러 번 본의 아니게 table 태그를 사용했었습니다[각주:1].

해결책은? #container 영역을 조금 더 크게 잡으니 해결되더군요. 전체를 감싸는 #container의 width를 3px만 크게 잡아도 문제는 사라지더군요. 위의 예라면 #container { width:1003px; margin:0px auto;} 식으로 하면 되겠지요.

정확한 이유는 저도 잘 모릅니다. 무슨무슨 IE 버그라고 이미 유명한 버그인지도 모르겠어요. [각주:2] 태터툴즈의 스킨 시스템에서만 작동하는 건지도 모르죠. (물론 그럴 일은 희박하다고 보지만요.)

혹시 비슷한 문제 때문에 고민하는 분들은 이와 같은 방법을 시도해보세요. :)


추가

만박님께서 알려주셨습니다. ^^
만박 2007/02/13 20:28

E6의 Three-pixel text job bug하고 duplicate character bug라고 부른답니다. CSS 마스터전략 9장에 나와요 ^^
구글링 해보니 나옵니다. three-pixel text jog 와 duplicate character bug.


추가 #2

PIE의 설명에 따르면 이 버그를 피하는 두 가지 방법이 있다고 합니다.

1. 제일 마지막에 float:left; 된 div에 margin-right:-3px; 을 하라.
2. 제가 위에서 이야기한 것과 같이 container 영역을 3px 크게 줘라.

  1. 물론 table 태그를 사용한다고 크게 잘못되었다는 건 아닙니다. 하지만, 보다 자유로운 디자인을 위해 그리고 디자인과 컨텐츠를 구분하는 코딩을 하려고 할 때 되도록이면 table 태그로 레이아웃을 잡는 일은 하지 않으려 한다는 것 뿐입니다. [본문으로]
  2. 비슷한 현상을 찾아 보려고 구글링 해봤는데 찾지는 못했습니다. 아시는 분들은 알려주세요. [본문으로]
,

방명록에 사용되는 비밀글 기능 치환자

스킨/추가설명 2007. 2. 11. 22:20
저는 원래 태터툴즈 클래식 사용자입니다. 태터툴즈 1.1과 티스토리의 사용은 스킨을 만들고 싶어서 사용하게 된 것이고요; (이유가 좀 웃기군요. ^^)

티스토리용 기본 스킨

티스토리용 기본 스킨

따라서, 제가 처음에 스킨을 만들 때 참고했던 스킨이 바로 티스토리용 기본 스킨이었습니다. skin 폴더에 tistory라는 폴더에 들어있었지요.

이 티스토리용 기본 스킨과 태터툴즈 스킨 레퍼런스를 벗삼아 스킨의 구조도 익히고, 치환자도 확인해가며 익혔죠. 그런데, 오마이갓- 이제까지 제가 만들어 온 스킨에 뭔가 이상한 게 있다는 걸 이제야 알았습니다.

굳이 이야기하자면 이상하다기 보다는 뭔가가 빠진 거죠. 저도 왠지 그게 이상했던… 바로 그것입니다.

예, 이미 아시는 분들도 많으실 거라 생각합니다. 바로 제가 만든 스킨들에는 방명록에 비밀글 체크박스가 없더군요. ㅜ.ㅡ

오늘에야 알았습니다. 곰님이 얼마 전 방명록에 비밀댓글이 가능하냐고 여쭤보셨는데, 저는 안된다고 알고 그렇게 대답했거든요. -_-; 태터툴즈의 공식 스킨 레퍼런스에도 비밀글 입력 체크박스에 대한 치환자는 없었거든요.

태터툴즈 스킨 레퍼런스 중에서

보세요. 없잖아욧~!


그런데, 다른 블로그에 가보면 그런 게 있고 해서 참 신기했었거든요. 무슨 플러그인이 있나보다. 하지만, 배포용 스킨은 플러그인까지 신경쓸 수 없다는 게 제 생각이기 때문에 그냥 넘어갔었는데, 다른 분들이 만든 스킨을 보다가 [ ##_guest_input_is_secret_## ] 라는 치환자가 있다는 걸 알게 되었습니다. 오마이갓.

이제까지 제 스킨을 받으신 분들 중 혹시 방명록에 비밀글 기능이 필요하신 분들은 다음과 같이 조치해주시면 될 듯 합니다.

skin.html을 열어서 <s_guest_form> 과 </s_guest_form> 사이에 홈페이지 입력란 바로 아래에 다음과 같은 코드를 살짝 추가해주시고,

<p class="secret-wrap">
     <input type="checkbox" class="checkbox" id="[ ##_guest_input_is_secret_## ]" name="[ ##_guest_input_is_secret_## ]" />
     <label for="[ ##_guest_input_is_secret_## ]"> 비밀글 </label>
</p>

(실제로 추가하실 때는 [ 와 ##_ 를 붙여서 사용하시는 거 아시죠?)

style.css 에도 다음처럼 추가해주세요. 위치는 그냥 아무 곳에나 넣어주시면 되요.

.guest-write .secret-wrap    {}
.guest-write .checkbox        { width:25px; border:none; padding:0; margin:0; }



앞으로 새로 만들 스킨들에는 방명록의 비밀글 기능을 꼭 넣겠습니다. 또, 이제껏 제가 만든 스킨들도 조금씩 업그레이드를 할텐데, 그 때는 꼭 이 기능을 추가하겠습니다. 죄송합니다;;; (아아- 진짜 몰랐어요. 저는 플러그인 기능인 줄 알았어요. -_-)

우선 가장 최근에 배포한 스킨인 Formal Boxes 1.1 에는 적용을 했으니 별다른 수정을 하지 않으신 분들은 자료실에서 다시 받으시면 되겠습니다.

태터툴즈 관계자분들 중 이 글 보시면 스킨 레퍼런스에도 이 치환자를 추가해주세요.

,
글 목록 번호 : 1 ··· 4 5 6 7 8 9 10 ··· 17
◀ 다음 글 목록 이전 글 목록 ▶

티스토리툴바