나라디자인

모깍기란 ‘물건의 모난 부분을 깍아 다듬는 일’ 을 뜻하는 순 우리말 입니다. IT 관련업종에 종사하면서 수도 없이 쏟아져 나오는 외래어 홍수속에 그나마 바른 우리말 찾아 쓰고 싶어서 적당한 단어를 찾다가 ‘모깍기’ 라는 단어를 찾았습니다. 예전 개인 웹사이트를 운영할 때에는 웹사이트를 ‘누리집’ 이라 하고 스스로를 ‘누리집 목수’ 라고 부르기도 했는데 이를 접해본 주변 사람들의 반응은 ‘순 우리말 찾아서 쓰는 것도 좋지만 오히려 더 알아듣기 힘들다’ 라는 평이 대부분이었고 이 일을 계기로 순 우리말 사용에 대한 혼자만의 생각을 고쳐먹게 되었습니다. 지금의 생각은 ‘순 우리말도 좋지만 이시대의 보통사람들이 직관적으로 이해 할 수 있는 단어 중에서 잘 선택해서 사용하여야 한다’ 라는 겁니다. 사실 오늘 하려는 이야기는 ‘순 우리말’ 에 대한 이야기는 아닙니다.

블로그를 손보다 보니 이래저래 골치아픈 문제들도 만나고 문제를 해결하던 과정을 적어놓을 필요가 있다는 생각에 한자 적습니다. 따로 시간내서 CSS 강의교안 쓰는것보다 이렇게 랜덤하게 그날그날의 문제해결 과정을 공개하는 것이 쓰는사람도 그렇고 듣는사람도 그렇고 그다지 지루하지 않게 느껴질것도 같습니다.

IE6.x. 너 때문에 웹 표준 때려치우고 싶을 때가 있다.

이 블로그는 IE 6.x,  FF 2.x, OP 9.x 버전에 거의 완벽하게 대응하도록 제작되었지만 IE 6.x 버전에서는 그 특성상 margin, padding, font-size, letter-spacing, line-height 등 크기와 관련된 속성들의 렌더링에 약간씩의 차이가 있습니다. 이런 이유때문에 픽셀에 심하게 집착했던 웹 표준 스터디 초기에는 많이 고생했던 생각이 납니다. 지금은 그나마 유연한 구조의 디자인을 구현하려고 노력하는 편입니다. 그러나… IE 6.x 때문에 웹 표준 때려치우고 싶은 충동이 가끔씩 생깁니다.

IE 6.x 에서 ‘border’ 속성이  렌더링 되지 않는 버그.

분명히 ‘border’ 에 대하여 ‘border:2px solid #F00′ 따위의 관련 속성을 주었지만 IE 6.x 에서는 ‘border’ 가 렌더링 되지 않는 경우가 있습니다. 이런 경우는 해당 마크업에 대한 높이값이 없거나 또는 순서상으로 그 상위의 블럭이 높이값을 갖지 않는 경우 입니다. 본래는 높이값과 상관 없이 ‘border’ 스타일이 렌더링 되어야 정상이지만 IE 6.x 에서는 이것을 제대로 표현하지 못하기 때문에 문제가 되었습니다. 마크업의 중첩이 단순한 경우에는 이런 경우를 보지 못했지만 대략 4~5단계 정도, 또는 그 이상 중첩된 상태에서는 제대로 렌더링 하지 않더군요. 원인을 찾느라고 한참을 삽질했습니다. 해당요소의 높이값과 ‘border’ 가 관계가 있으리라고 누가 상상이나 했겠습니까? ㅡㅡ;

IE 6.x 에서 ‘:first-child’ 를 지원하지 않는 것은 저주받아 마땅함.

‘:first-child’ 라는 가상선택자는 ‘p:first-child’ 형식으로 사용되어 첫 번째 p 태그에만 무슨짓을 할 수 있도록 지원하는 선택자입니다. 이와 유사한 가상 선택자로 ‘:first-letter’ 와 ‘:first-line’ 이 있는데 이 두 가지는 다행히도 IE 에서도 지원하고 있습니다. 그러나 ‘:first-child’ 라는 선택자를 지원하지 않음으로 해서 디자인을 위한 마크업 코드를 쑤셔넣고 싶은 유혹에 빠질때가 한두번이 아닙니다. 특히, 목록태그를 이용하여 로컬메뉴 네비게이션 박스를 만들때 그렇게 느낍니다. 한편 블로그를 모깍기 하면서 ‘dropcap’ 효과(첫 번째 글자만 크게 장식하는 효과)를 내려고 다음과 같은 코드를 작성하였습니다.

.storycontent>p:first-child:first-letter {display:block; float:left;  font-size:2.5em; padding:.05em .05em .05em 0;}

이 예제 코드는 첫 번째 문단의 첫 번째 글자만 ‘dropcap’ 기법으로 장식할 수 있는 코드입니다. 그러나, FF 와 OP 에서만 정상적인 결과를 기대할 수 있습니다. IE 6.x 에서는 ‘:first-child’ 라는 가상선택자를 지원하지 않기 때문입니다. 만약 ‘:first-child’ 를 빼고 ‘p:first-letter’ 라는 선택자만 사용한다면 p 태그로 시작되는 첫 번째 글자는 모두 커지는데 이것은 그다지 바람직해 보이지 않는군요. 제가 원했던것은 하나의 페이지에서 가장 처음 등장하는 단 하나의 p 태그, 그속에 들어있는 단 하나의 첫 번째 문자에만 이를 적용하고 싶었던 겁니다.

결국 ‘dropcap’ 효과는 FF와 OP 에서만 정상적으로 렌더링 되었고 저는 지금 IE 6.x 를 몹시 저주하고 있답니다. 때때로 완벽에 집착하는 사람들에게는 IE 6.x 가 정신건강에 매우 해롭다는 것이 오늘의 교훈이군요.