아래는 CSS를 적용하면서, 꼭 한두 번씩은 개발자의 골치를 썩게 하였을 잘 알려진 IE 6의 버그들을 모아보았다.

Doubled Float-Margin Bug

요넘은 모든 float된 요소들에서 나타나는데, 만약 float된 방향과 같은 쪽에 margin 값을 주어서(float:left된 박스에 margin-left 값을 준 경우) 이 요소의 margin이 float된 박스를 포함하고 있는 부모 요소와 맞부딪칠 경우, 그 너비가 두 배로 늘어나는 현상. (같이 float된 요소들 중에 첫 번째 요소에서만 나타난다.)

해결책으로는, float된 박스에 display:inline을 선언해 주면 된다.
좀 더 자세한 설명은 IE Doubled Float-Margin Bug – CSS fixes and workarounds 참고.

Three-Pixel Jog

이놈은 서로 연결되어 있는 float된 요소들 사이에서 나타나는 놈으로, 잘 드러나지 않을 수도 있다. 이것은 float된 놈과 다음에 있는 inline 요소들 사이에 3 pixels 값의 공간을 추가해 버리는 버그인데, inline 요소들이 block 요소에 둘러싸여 있어도 발생한다.

다행히 쉬운 해결책으로, float된 박스와 옆에 붙어있는 박스의 각기 서로의 이웃한 margin 값을 -3px 빼주면 된다. (물론 다른 브라우저들에 영향을 미치지 않으려면 IE hacks 만을 위한 css 파일에 따로 지정해 놓아야 한다.)
추가 참고 글 – IE6 Three Pixel Gap

Absolute Positioning in a Relative Container

일반적으로, position:absolute으로 위치한 요소가 기본 static 위치가 아닌 다르게 지정된 위치(position:relative 혹은 position:absolute)를 가지는 부모 안에 포함되어 있을 경우, 브라우저 창의 왼쪽 구석이 아닌, 부모 요소의 위치를 기준으로 한 상대적 위치 값을 가지게 되는데, IE 6에서는 부모 요소에 height 값이 안 주어져 있을 경우에는 그냥 무조건 페이지 모서리를 기준으로 위치가 정해져 버린다.

해결책은, absolute으로 위치한 요소를 감싸고 있는 부모 요소에 height:1% 혹은 zoom:1 값을 지정해 주면 된다. 이렇게 하면, absolute하게 위치한 박스의 위치가 올바르게 적용되고, 또 부모 요소가 자식 요소들을 모두 둘러쌀 수 있도록 늘어나게 된다.
참고 글 – Absolutely Buggy II

Whitespace Bug

주로 ul로 메뉴를 작성할 때 나타나는 벌레로, 메뉴 사이에 의도하지 않은 빈 공백이 생기는 버그.

예를 들어 특정 너비의 세로 메뉴를 아래와 같이 짰을 경우,

<ul>
  <li><a href="page1.html">Link 1</a></li>
  <li><a href="page2.html">Link 2</a></li>
  <li><a href="page3.html">Link 3</a></li>
  <li><a href="page4.html">Link 4</a></li>
  <li><a href="page5.html">Link 5</a></li>
</ul>

IE 6에서는 코드의 li 사이에 있는 빈 공백을 페이지에도 그대로 표시해 버린다.

물론, 해결 방법으로 코드에 있는 li 사이의 공백들을 없애주면 되지만, 코드 스타일을 흐트러뜨리지 않으려면, 이젠 눈에 익은 다음과 같은 꼼수를 써주면 된다.

ul li a { height: 1%; }

더는 종잡을 수 없는 벌레들이 남기고 간 오물들로 당황하는 날이 오지 말기를 바라지만, 당장은 상황에 따라 제대로 대처할 수 있는 해결책들을 숙지해 놓는 수 밖에 없을 것이다. 😕

오래전 출판 디자인 분야에서 주로 사용되던 grid 기반 디자인 기법이 요즘은 웹 사이트 디자인에도 도입되어 사용되고 있는 추세이다. 이는 grid 기반 디자인이 시각적으로 편안하고 웹 페이지를 균형잡힌 구조로 설계하는데 도움을 주기 때문이다.

하지만, 실제 웹 디자인에 적용하려면 grid 시스템을 떠받드는 여러가지 고려되어야 할 사항들이 많은 관계로 기본적인 grid 구조를 구현하는데는 여러움이 따르는데, 여기에 도움을 주는 여러 framework들이 등장하고 있다. 이런, CSS Grid Framework로 개인적으로 눈에 띄는 것이 두 가지가 있다.

• blueprintcss
• YAML(Yet Another Multicolumn Layout)

이들 framework들은 각기 웹 상에서 몇 가지 설정만으로 코드를 생성해주는 도구도 함께 제공하고 있는데, Blueprint Grid CSS Generator, YAML Builder에서 컬럼(Culumn)의 수와 몇 가지 기본적인 설정 값을 입력하면 이에 맞는 코드를 자동 생성해 준다.

개인적으로 blueprintcss framework의 사용법이 더 간단하고 생성된 코드가 더 깨끗해 보인다. 곧 공개될 0.6 버전에 가서는 어느 정도 안정화되면서 grid 디자인의 손 맛을 익히는데 큰 도움이 되리라 생각됨. 아무래도 이런 툴들에 눈이 가는 건 이미 대다수 테이블로 짜여진 여러 웹 페이지들이 가지고 있는 병폐에 상관없이 올바로 균형잡힌 구조의 페이지를 구현하는데 큰 도움이 될 수 있을 것이라는 이유겠지.

TextMate와 함께 기본적으로 제공되는 CSS 번들에는 못난 Internet Explorer, 특히 IE 6 만을 위해서 사용될 수 있는 CSS hacks이 들어 있다.

바로 Other 항목 밑에 있는 것들로, 예를 들어 IE 6에게 png 그림의 투명도를 제대로 표시하게 하려고 Microsoft 전용 AlphaImageLoader Filter를 쓴 것이 있는데, background tab trigger로 사용될 수 있다.

.png-transparent {
  background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='image/scale/crop');
}

또 CSS3의 opacity 속성을 지정할 때는 IE를 위해 MS의 Alpha Filter가 사용된다. -moz-opacity 속성은 오래된 버전의 Mozilla 계열 브라우저들(Mozilla 1.7과 Firefox 0.9 이전) 위한 것으로 지금은 삭제해도 무관하다.

.opacity-div {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
}

그런데, 이것들 말고도 자주 쓰이는 꼼수들이 더 있기 마련인데, 개인적으로 두 가지를 더 추가해서 쓰고 있다.
하나는 IE 6 만을 위한 꼼수로, 이 놈은 CSS의 max-width와 min-width 속성을 전혀 알아듣지 못하는 관계로 할 수 없이 또 MS 전용 expression() 속성을 빌려와서 적용해 주어야 한다.
아래는 IE min-max-width라는 이름으로 저장된 CSS snippet의 내용인데, tab trigger로 iemwidth를 지정해 주었다.

width:expression(document.body.clientWidth > ${1:980} ? "$1px" : (document.body.clientWidth < ${2:480} ? "$2px": "auto" ));

또 하나는 CSS layout을 구성할 때 자주 쓰이는 snippet으로 float된 자식 요소를 감싸주려고 과거에는 CSS의 :after pseudo-element를 써서 float을 clearing하는 벙법이 많이 사용되었으나, IE가 아직까지 CSS 2.1의 :before와 :after pseudo-element를 지원하지도 않거니와, 더 간편한 방법으로 알려진 pseudo-element를 쓰지 않고 float을 clearing하는 방법이 많이 사용되는데, 여기에는 또 IE 6 이하 버전 때문에 꼼수가 들어가야 한다.
그래서 아래는 짧지만 타이핑의 수고를 덜어주기 위해 IE 7까지 고려한 새 float clearing 방법을 참고해서 추가한 아주 간단한 snippet이다.

${1:.clearfix} {
  overflow: hidden;
  ${2:_}height: 1%; /* IE 6 fix */
}

IE의 경우, float된 자식을 감싸려면 부모가 MS 전용 속성인 “hasLayout“이 true 값을 가져야 하는데, 우연히도 IE 7에 와서는 overflow의 속성이 주어질 경우(visible 제외) 자동으로 hasLayout 값을 갖게 되면서 또 다른 꼼수를 사용할 필요가 없다. 하지만, 불행히도 IE 6에서는 여전히 hasLayout 값을 주려면 이미 알려져 있는 여러 hasLayout 값을 갖게 하는 CSS 속성들 가운데 하나를 적용해 주어야 한다. (위에서는 “Holly Hack”이라 일컬어지는 height: 1%를 사용했고, 다른 브라우저들로부터 감추기 위해 underscore hack이 사용되었지만, 부모 요소에 height 값을 지정할 필요가 없다면 밑줄은 필요없다.)

이런 꼼수들의 실제 적용은 나중에 CSS 파일에 따로 모아서 사용하는 것이 사이트 관리하는데 수월할 것이다.

웹 표준을 준수하고 순차적으로 잘 정렬되어 있는 의미론적 마크업의 사용 그리고 표현과 동작의 분리에서 오는 잇점을 알리기 위해 올해 두 번째로 열리는 CSS Naked Day를 맞이하여, 이곳 블로그만이라도 4월 5일 하루 동안 발가벗겨 놓을 예정이다.

CSS를 걷어낸 적나라한 <body>의 속살을 드러내 놓고서 하루 동안 따스한 봄 햇살을 맞이할 준비는 마쳤지만, 어딜 가든 겉모습보단 벗겨놓고 감상해야만 직성이 풀리는 버릇은 계속되겠지.

예전에는 블로그 글에 포함된 코드의 문법을 색깔별로 구분하기 쉽게 표시되도록 WordPress의 plugin인 iG:Syntax Hiliter를 사용했었다. 하지만, 보이는 코드의 모양도 별로 마음에 들지 않거니와 코드 속에 쓸데없이 자동으로 포함되는 특정 요소 관련 링크들은 오히려 코드의 해석을 어렵게 하고, 문서의 구조까지 해치는 부작용이 있었다. 물론 지원되는 언어들도 한정적이었고.

그래서, 바램이었다면 평소 애용하는 TextMate를 이용해서 지원하는 여러 가지 다양한 테마들에서 보이는 코드의 모양을 그대로 블로그에도 옮겨놓을 수 없을까 궁금해하던 차에, 찾아보니 딱 내가 바라던 방법을 소개해 놓은 글을 발견하게 되었다. 그 후로 소개된 요령을 참고 해서 이미 올려두었던 코드들을 일일이 바꾸면서 이곳에도 비슷하게 적용해서 만족하게 사용하고 있다. 물론 코드를 올릴 일이 있으면 그 전에 TextMate에서 또 한 번의 변환 과정이 필요하지만 “Create HTML From Selection” 메뉴에 단축키만 지정해 두면 이것 또한 번거로운 작업은 아니다.

그런데, 사람의 욕심은 끝이 없어서인지 작업은 여기서 멈추지 않고, 이렇게 변환돼서 예쁘게 올려진 코드라도 실제로 쓰려고 복사할 때는 줄 바꿈이라든지 코드의 원래 모양이 제대로 전달되지 못하는 부작용이 있을 수 있다. 이것을 해결하기 위해서는 블로그에서 코드의 원래 모양을 그대로 전달해 주는 또 하나의 간단하면서도 깨끗한 버전의 모양새를 선택할 수 있게 해야 하는데, 일반적으로 떠오르는 방법으로 JavaScript의 힘을 빌려 새로운 창에 보여주는 방법이 있지만, 이것도 그리 깔끔한 방법은 아닌 듯 보였다.

마침, 요새 주무르고 있는 jQuery에서 제공하고 있는 몇 가지의 동작 효과들을 사용하면 간단하게 원하는 기능을 구현할 수 있을 것 같아서 바로 적용해 보았고, 참고를 위해 그 적용 방법을 여기에도 남겨둔다. jQuery를 이용해서 코드의 모양새(style)를 자동으로 바꾸어 주기(이)란 제목의 글 마저 읽기 →