이번에는 IE 이중여백 버그 (double-margin bug) 입니다.

여타의 모든 브라우저에서는 지정해준 margin 그대로 보입니다만, IE 에서는 지정해준 margin이 두배로 표현됩니다.


// 빨간색 부유 박스에 정의된 스타일

.floatbox {

    float: left;
    width: 150px;
    height: 150px;
    margin: 5px 0 5px 100px;

    /* 마지막 줄에는 왼쪽에 margin 값으로 100px이 정의되어 있습니다. */
}


버그가 발생하는 경우

이 버그가 항상 발생하지는 않습니다. float이 정의된 부유엘리먼트에 지정된 margin의 방향과 동일한 컨테이너(부유엘리먼트를 포함하는) 박스 방향에만 여백(margin)이 이중이 됩니다.
즉 위의 그림에서 보면, float는 left (왼쪽)로 지정되어 있기 때문에, 부모 엘리먼트와 인접한 그와 동일한 방향인 왼쪽의 margin만이 두배가 됩니다.

아무튼 부모 엘리먼트와 맨 첫번째로 인접해있는 부유엘리먼트에만 이중여백이 발생합니다.


버그 바로잡는 법

.floatbox {

    float: left;
    width: 150px;
    height: 150px;
    margin: 5px 0 5px 100px;
    display: inline;
}

설정: 유동 박스에는 float가 정의되어 부유된 상태이다. IE 6에서 보여지지만 않는다면 모두 멀쩡하다. 근데 IE 6에서 보면 버그가 발생한다. "어라? 내용이 어디갔지??!" 페이지를 새로고침 하면 내용이 다시 보인다. 아래로 스크롤하든지 다른 창으로 마우스를 이동하면, 다시 문제의 내용이 제대로 나온다.
이것을 일명, 깍꼭놀이 버그 (peek-a-boo bug; 숨어있다 갑자기 나타나서 어흥! 놀래키는 놀이에 비유함)라고 한다.

버그가 적용되었던 원상태로 돌리려면, 새로고침 하면 된다.

버그: 이러한 효과는 여러가지 상황에서 다른 형태로 나타날 수가 있다. 그 종류를 열거하자면 상당히 길어지므로 생략.

링크가지고 실험해보기: 각 시범 링크들을 클릭해보자. 그러면 스크롤시와 마찬가지로 사라졌던 내용이 나타날 것이다. 만약 부유 엘리먼트가 링크된 이미지라고 해도 마찬가지다. 하지만 div#floatholder에 들어있는 링크와 부유해제된 div보다 앞에 있는 링크들만 해당된다.

주의: div에 여러번 반복된 내용이 들어있을 경우, 버그가 매우 요상하게 발동이 걸리는 경우가 있다. 부유가 해제된 div로 인해 버그가 발동되는 것으로 보인다. 인위적으로 float를 해제할 경우, 아마도 float 적용 이후에 나온 그 앞의 내용이 div#floatholder(점선 테두리)의 배경에 다소 가려지는 것 같다.

따라서, div#float가 div#floatholder 앞에 온다 하더라도 이 버그는 발동될 것이며, 이러한 외부 float이 실제로 div#floatholder안에 포함된 float해제 div에 맞닿게 되는 것이다.

바로잡기: 세가지 방법으로 이 버그를 예방할 수 있다.

P.S : - -;;

다 작성해놓고 보니, 버그 효과가 안나타나는군요.
제가 zb5 수정할 때, IE 6 깍꼭놀이 버그도 고려해서, 부모엘리먼트들의 높이를 전부 명확히 지정해줘버려서 그런 것 같습니다 - -;; 예제가 헛게 됐네요.

긴 문장이 제한된 폭을 넘어가서 테이블이나 DIV가 깨지는 경우가 많다.
zb5 에서도 역시 본문 뷰에서 영문 링크 등이 길 경우, 다음 칸으로 줄바꿈되지 않고 가로로 넘어가는 바람에 레이아웃이 깨진다.

이것을 해결하는 방법은 간단하다.
CSS의 해당 엘리먼트 선택자에 다음 스타일을 추가하면 된다.

{ word-break:break-all; }

4. CSS, Level2 Rev1 설명서 - part 2
W3C 작업초안 2006년 4월 11일

원문: http://www.w3.org
번역: pinkhare(분홍토끼) in GTport

3) CSS 2.1이 CSS 2에서 달라진 점

CSS의 오류들이 다양한 에러 발표를 거쳐 이후에 수정되었다. CSS2가 1998년 권고안으로 제정되면서 상당한 발전이 있었다. CSS2 설명서의 오류는 다양한 오탈자의 보고를 통해 순차적으로 수정되었으나, 아직도 수정해야 할 점이 남아있다.

이러한 많은 논점들이 곧 공개될 CSS3 설명서에서 제기되는 동안, 현재의 여건들로 인해 CSS2의 구현 및 공동 사용이 진행되지 못하고 있다. CSS 2.1 설명서는 아래 내용을 통하여 이러한 상황을 설명하고 있다:
 
    ● 폭넓게 수용되고 구현되는 CSS2의 특성들에 대한 호환성 유지
    ● 발표된 모든 CSS2의 오류(오탈자) 추가
    ● 구현이 CSS2 설명서와 압도적으로 차이날 경우 일반적으로 수용되는 관례에 따르기 위해 설명서 수정
    ● 잠재 기능이 구현되지 않고 있어서, CSS 커뮤니티가 반대한 CSS2 도구들 제거. CSS 2.1는 일반적으로
        HTML 및 XML 언어에 대해 (특정 XML 언어나 HTML에 대해서만이 아니라) 광범위하게 합리적으로
        구현되는 것이 어떠한 CSS 도구들인지를 반영하려는 목적으로 탄생했다.
    ● CSS3에서 폐지될 CSS2 도구들을 제거함으로써, 제안된 CSS3 도구들의 채택을 촉진
    ● 구현 경험이 CSS2를 구현하는 데 필요하다고 밝혀질 경우, (상당히) 적은 수의 새로운 프로퍼티 값들을 추가

CSS 2.1은 CSS2에서 나왔고, CSS2를 대체하기 위한 것이다. CSS2의 어느 부분은 CSS 2.1에서도 그대로이지만, 일부는 대체되었으며, 일부는 제거되었다. 제거된 부분은 차후 CSS3 설명서에 사용될 수도 있다. 향후 명세는 CSS 2.1을 참조할 것이다 (그것들이 CSS 2.1에서 사라진 CSS2의 도구들을 필요로하지 않고 그러한 기능들에 있어서 CSS2만을 참조해야 하는 것이 아니거나, 혹은 오히려 그 도구들을 포함하는 각 CSS 모듈에서 그 도구들을 참조하지 않는다면).

3. Cascading Style Sheets, Level2 Rev1 설명서 - part 1
W3C 작업초안 2006년 4월 11일

날짜를 보아하니 CSS2 설명서를 공식적으로 발표한지도 꽤 오래되었네요.
그러고보면 조만간 CSS 3가 나오게 될 이 시점에서 어째서 CSS 2에 관심을 두느냐 ..
네. 하지만 아직 CSS 3의 정확한 세부사항이 명쾌히 발표된 것이 아니고, 또한 CSS 3가 완성된다 하더라도
CSS 2를 자세하게 공부해 둠으로써 아무런 어려움 없이 CSS 3에 직면했을 때 대처할 수 있습니다.
CSS 활용의 장점에 대해서는 앞서 충분히 말씀을 드렸으니, 분홍토끼의 이번 연재부터는 실질적으로
CSS 2의 상세 및 소개의 간략한 요약, 그리고 실질적인 내용 진도를 싣기 시작하겠습니다.

사실 CSS 뭐 그리 거창하거나 방대하지도 않아보인다.. 굳이 체계적인 공부가 필요하냐... 라고 의문을 가지실 수 있겠습니다만, 실제로 분량이 결코 적지도 않을 뿐더러 이것의 자유로운 실질적 활용을 위해서는 완벽한 이해를 한 상태에서도 쉬운 일은 아닙니다. 그나마 제대로 이해를 해 둔다면 언제든 웹프로그래밍 도중에 CSS 때문에 곤란을 겪는 일은 사전에 막을 수 있겠죠.
긴 서론은 이쯤 해두고 바로 시작하지요.

* 흠. 우연히 찾았는데 -.- 한글 w3c 사이트에 이미 한글화된 설명서가 있었네요. 헉스~. 그것도 모르고 열심히 번역했다는.. 그치만 너무 틀린 해석도 많고, 이해하는데 어렵게 옮겨진 분분이 많아서..... 차라리 원문 보고 하는게 낫겠다는 생각에서 그냥 현 상태를 유지하며 분홍토끼가 직접 번역하고 공부한 내용을 정리해 올리려합니다.
이번 글과 같이 필요에 따라 분홍토끼의 번역 그대로를 올리는 때도 있겠고요.


원문: http://www.w3.org
번역: pinkhare(분홍토끼) in GTport

# 규범적인 내용을 표시하기 위한 것이 아닌, 정보를 제공하는 목적입니다. (규칙성이 아닌 정보성)

1) HTML 4.0에 대한 스타일 시트 예제 (xhtml에서는 사용 불가능한 것들도 다수 포함)

일부 HTML 엘리먼트들은 CSS 2에서 모두 표현되지 않는 것들도 있습니다.
예) 대체 엘리먼트 (img, object), 스크립팅 엘리먼트 (script, applet), 폼 제어 엘리먼트, 프레임 엘리먼트

ADDRESS,
BLOCKQUOTE,
BODY, DD, DIV,
DL, DT,
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4,
H5, H6, IFRAME,
NOFRAMES,
OBJECT, OL, P,
UL, APPLET,
CENTER, DIR,
HR, MENU, PRE   { display: block }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.33 }
H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; margin: 1em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }
BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS    { font-style: italic }
PRE, TT, CODE,
KBD, SAMP       { font-family: monospace }
PRE             { white-space: pre }
BIG             { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB             { vertical-align: sub }
SUP             { vertical-align: super }
S, STRIKE, DEL  { text-decoration: line-through }
HR              { border: 1px inset }
OL, UL, DIR,
MENU, DD        { margin-left: 40px }
OL              { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL    { margin-top: 0; margin-bottom: 0 }
U, INS          { text-decoration: underline }
CENTER          { text-align: center }
BR:before       { content: "\A" }

/* An example of style for HTML 4.0's ABBR/ACRONYM elements */

ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
A[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/* Elements that are block-level in HTML4 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,
COL, COLGROUP, TD, TH, CAPTION
                { unicode-bidi: embed }
/* End bidi settings */


@media print {
  @page         { margin: 10% }
  H1, H2, H3,
  H4, H5, H6    { page-break-after: avoid; page-break-inside: avoid }
  BLOCKQUOTE,
  PRE           { page-break-inside: avoid }
  UL, OL, DL    { page-break-before: avoid }
}

@media speech {
  H1, H2, H3,
  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
  H1            { pitch: x-low; pitch-range: 90 }
  H2            { pitch: x-low; pitch-range: 80 }
  H3            { pitch: low; pitch-range: 70 }
  H4            { pitch: medium; pitch-range: 60 }
  H5            { pitch: medium; pitch-range: 50 }
  H6            { pitch: medium; pitch-range: 40 }
  LI, DT, DD    { pitch: medium; richness: 60 }
  DT            { stress: 80 }
  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  DFN           { pitch: high; pitch-range: 60; stress: 60 }
  S, STRIKE     { richness: 0 }
  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  U             { richness: 0 }
  A:link        { voice-family: harry, male }
  A:visited     { voice-family: betty, female }
  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}


2) CSS1 에서 변화된 사항들

CSS2는 CSS1을 기반으로 제작되었고, CSS1에서 사용할 수 있는 스타일시트는 모두 CSS2에서도 사용할 수 있습니다. CSS2와 CSS1의 차이점은 세가지로 분류할 수 있습니다.

ㄱ. 새로운 기능

- media types (매체 형태) 개념
- 모든 프로퍼티에 대한 inherit (상속) 값
- paged media
- 청각 스타일 시트
- 국제화 도구들 (목록 번호매김 스타일, 양방향 텍스트, 언어 인식 따옴표(인용 표시))
- 확장 글꼴 선택 메카니즘 (지능형 맟춤, 합성, 다운로드 가능 폰트 포함), 시스템 폰트, 새로운 프로퍼티 'font-size-adjust' 추가
- 테이블류, 새로운 값 'display', 'vertical-align'
- 상대위치, 절대위치 (고정 위치 포함)
- 새로운 박스 타입 (block과 inline이 있는): compact, run-in
- 비주얼 포맷팅 모델에서 내용 overflow, clipping, visibility 제어 가능
- 비주얼 포맷팅 모델에서 최대 및 최소 width, height 지정 가능
- 확장 선택자 메카니즘 (자식 선택자, 인접 선택자, 애트리뷰트 선택자 포함)
- 생성 내용, 카운터, 자동 번호 매김, 마커
- 새로운 프로퍼티 'text-shadow'를 이용한 텍스트 쉐도우
- 몇 개의 새로운 가상 클래스, :first-child, :hover, :focus, :lang
- 시스템 색상 및 폰트
- 커서들 (cursor)
- 동적 윤곽선들 (outline - border와 다름)

ㄴ. 갱신된 설명들

CSS1 설명서는 짧고 간결했습니다. 그에 비해 CSS2 설명서는 훨씬 방대하며 가독성이 높습니다. 많은 부가 문맥을 통해 새로운 기능을 설명하며, CSS1 도구들에 대한 설명 역시 확대되었습니다. 아래(ㄷ) 설명된 몇몇 경우를 제외하고는, 다시 작성된 설명이 문맥이나 의미적인 변화를 의미하지는 않습니다.

ㄷ. CSS1에서의 의미 변화

CSS1 스타일 시트가 CSS2 스타일 시트에서도 사용할 수 있기는 하지만, 때때로 적은 경우에 있어서 CSS2 스타일 시트에서는 해석되는 의미가 다른 경우가 있습니다. 대부분의 변화는 설명서로 피드백 되는 구현 경험에 의한 것이지만, 일부는 오류의 수정도 있습니다.


part 2 에서 이어집니다.