Minicube.kr - 블로그닷컴 Ver 3.03

CSS에서 사용하는 다중 선택자(Multi Class)란 동일 엘리먼트에 여러개의 선택자(id, class)를 동시에 적용하기 위한 목적으로 여러개의 선택자를 사용하는 것을 말합니다.
CSS1에서 선택자의 개념이 사용된 후, CSS2에서 다중 선택자가 추가되어 사용되고 있는데요, CSS를 사용해 웹사이트를 개발하다 보면 다중선택자는 정말 편리한 존재입니다.

<style>
.foo { background:yellow; }
.bar { border:solid 4px red; }
.foo.bar { border-style: dashed; }
</style>

<div class="foo">foo</div>
<div class="bar">bar</div>
<div class="foo bar">foo bar</div>

아마 기존에 다중 선택자에 대한 자료를 찾아보셔서 알고 계신 분은 foobar 라는 단어가 익숙하실 지도 모르겠습니다. (웃음)
위의 코드는 다중 선택자를 적용하여 foo 클래스와 bar 클래스의 속성을 하나의 엘리먼트에 동시에 적용한 예제입니다. 또한 클래스를 붙여서 선언하게 되면 평소에는 적용되지 않다가 두 클래스가 동시에 적용될 경우에만 별도의 효과를 주는 것도 가능합니다.
이렇게 여러 개의 클래스를 하나의 엘리먼트에 적용하여 서로 다른 효과를 동시에 적용할 수 있고, 이 다중 선택자는 3개 이상도 사용이 가능합니다.
만약 클래스 내의 css속성이 겹친다면 뒷쪽에 선언된 클래스의 css속성을 우선하지만(덮어쓰기 효과) 만약 !important 가 속성에 포함되어 있을 경우 순서에 상관없이 해당 속성을 우선 적용하게 됩니다.

그래서 CSS개발하시는 분은 대부분 다중 선택자를 매우 유용하게 사용하고 있지만, IE6에서는 관련 버그가 존재하기 때문에 사용에 주의해야 합니다. (또 IE6이 문제입니다! -_-)


1. id와 class 를 동시 조합하여 이용시, 나중에 선언된 다중 선택자 구문 무시
이 부분은 NHN NULI의 css가이드를 참고하였습니다. IE6의 경우 id와 class를 다중 선택자로 적용할 때에 나중에 선언된 다중 선택자를 무시하는 버그가 존재합니다.

<style>
#id.class1{background:#f00;}
#id.class2{background:#0f0; width:200px;} /* Does not exist in the IE6 */
#id2.class2{background:#00f; width:200px;}
#id2.class3{background:#0f0; width:300px;} /* Does not exist in the IE6 */
#id.class3{background:#f00; width:300px; font-weight:bold;} /* Does not exist in the IE6 */
</style>
<div id="id" class="class1">class1</div>
<div id="id" class="class2">class2</div>
<div id="id2" class="class2">class2</div>
<div id="id2" class="class3">class3</div>
<div id="id" class="class3">class3</div>

원래 위의 예제에서는 그림처럼 보이는 것이 바른 렌더링입니다. 하지만 IE6에서는 예제에서 2, 4, 5번째 줄에 해당하는 부분을 무시하게 됩니다. 아래 이미지처럼요.



따라서 불쌍한 IE6 을 위해서라면, 붙여서 쓰는 다중 선택자를 사용할 때에는 id와 class를 동시에 사용하지 않고, class만 사용하는 것을 권장합니다.

2. class 조합하여 이용시, 앞에 선언된 class 무시
하지만 불쌍한 IE6을 생각해서 class만 가지고 다중 선택자를 구성했음에도 불구하고, 특정 상황에서는 또 오작동을 해버립니다.
class만으로 다중 선택자를 구성할 때 예를 들어 .foo.bar{} 라는 클래스를 구성하면 IE6은 앞의 .foo를 무시하고 .bar{} 라는 클래스로 인식하게 됩니다.

원래 코드
.foo { background:yellow; }
.bar { border:solid 4px red; }
.foo.bar { border-style: dashed; }
IE6이 인식하는 코드
.foo { background:yellow; }
.bar { border:solid 4px red; } /* border 속성 중 border-style 속성이 삭제됨 */
.foo.bar { border-style: dashed; } /* bar class의 border-style 속성이 오버라이딩됨 */

이를 이미지로 보여드리면 다음과 같습니다.

<style>
.foo { background: yellow; }
.bar { border: solid 4px red; }
.foo.bar { border-style: dashed; }
</style>
<div class="foo">foo!</div>
<div class="bar">bar!</div>
<div class="foo bar">foo bar!</div>

위에서 foo bar 라는 유명한 예제(?)를 보여드렸는데요, 이게 IE6에서 다중선택자의 버그가 있다는 것을 적나라하게 보여주고 있죠. 원래 bar class의 경우 border-style 속성이 solid임에도 불구하고 IE6에선 .foo.bar 를 .bar로 인식함에 따라 border-style이 dashed 로 모두 교체된 것을 확인할 수 있습니다. 1번 항에서 다루었던 버그도 이 버그의 영향이 겹쳐서 생긴 문제가 아닐까 하는데요, 정확히는 잘 모르겠습니다.
이 버그를 회피하기 위해서는 class를 붙여서 선언하는 다중 선택자를 사용하지 않는 것이 최선입니다. 하지만 CSS작성 중의 편의를 위해서 붙여서 선언해야 할 경우엔 뒤에 붙이는 class명을 겹치지 않도록 사용하는 것도 방법입니다.

기존
.dx.class {}
.dy.class {} /* 별도의 class로 인식되지만, IE버그로 dy.class{}만 인식 */
수정(버그 회피)
.dx.classx {}
.dy.classy {} /* 최종 class명을 다른 이름과 겹치지 않는 고유의 클래스명으로 사용 */

이렇게 수정하는 방법은 다중 선택자의 장점을 완전히 무시하는 비효율적인 방법이긴 하지만, 어쩌겠습니까... 이놈의 IE6이 도와주지 않는걸요...

물론, IE7은 위에 나타나는 다중클래스의 버그는 해결하였습니다. 하지만, 표준모드(HTML 4.01, XHTML 1.0)로 동작할 때에만 버그가 나타나지 않게 되어 있으며, Quirks mode DTD로 동작될 때에는 IE6과의 호환을 위해 (또는 미처 쿽스모드 엔진을 고치지 못했을 수도 있죠) 이 버그가 그대로 나타나도록 되어있습니다.

IE6은 언제까지 우리 UI개발자를 괴롭히게 될까요? ㅠ_ㅠ

이 포스트는 NHN WSG(Web Standardization Guide) 블로그와 네이버의 개인 블로그에 함께 연재되고 있습니다.

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

CSS의 display 속성은 해당 엘레멘트가 화면에 어떻게 보여지는지를 결정하는 역할을 합니다.
display 속성의 값은 다 따지면 19가지나 되지만, 실제로 자주 쓰이는 것은 inline과 block, inline-block, none 값이며, 이외의 것은 브라우저에서 지원하지 않는 것도 많기 때문에 불안정해서 사용되지 않는다고 하네요.

기본적으로 모든 요소들은 디폴트 display 속성이 지정되어 있으며 이를 자유롭게 변경할 수 있습니다. 예를 들면, 인라인 요소인 <span>요소에 display속성을 block으로 지정하면 <div>태그와 같은 역할을 하게 되는 것이죠.
사실 이번 기회에 책이나 인터넷을 찾아보고 조사하긴 했지만, 저도 실제로 사용하는 것은 위쪽의 다섯가지 정도밖에 안되는 것 같습니다.

display 속성 중에 주목할 만한 것은 table-cell 이라는 값인데요... 이게 테이블에서 <td>태그와 같은 속성을 가지게 해줍니다. 아시다시피 <td>태그는 기본적으로 상하 중앙 정렬이 됩니다.
레이아웃을 잡아보셨다면 아시겠지만, <div>태그는 상하 중앙정렬이 지원되지 않지요. 이럴 때 div태그에 display:table-cell; 속성을 주시면, 상하로 중앙 정렬이 가능하게 됩니다.
다만 이게 또 문제많은 IE에서 지원하지 않는다는 것이 참 아쉽습니다. -_-;;; (FF는 지원됩니다.) 레이아웃에서 상하 중앙정렬에 관한 포스트는 다음 기회로 미루기로 하지요.

아무튼 float 속성과 마찬가지로 display 속성을 잘 활용하면 CSS로 더 정밀한 레이아웃을 잡을 수 있습니다. 모르고 막 쓰던 display 속성을 이제는 제대로 알고 사용하는 것은 어떨까요?

ps. 회사에서 일에 휘말려 열심히 수습하고 나서 글을 쓰자니... ㅡㅡ;; 뭘 쓸지 참 막막하더군요. 역시 글은 자꾸 쓰는 버릇을 들여야 잘 쓸 수 있을텐데 말입니다. 그런데... 울회사 슬슬 평가시즌이 되어서 또 일을 열심히 해야지 말입니다. ㅠㅠ

ps2. 블로그에는 적어도 일주일에 한번은 UI개발 분야의 지식이나 소식 등을 전하려고 합니다. 그 외에는 소소한 제 일상 관련 글로 채우려고 해요~

ps3. 미투데이도 하고 있습니다. -_-;; 심심하시면 오셔서 "이놈이 어떻게 사나" 궁금한 것도 물어보시면 답변 드립니다. (....) 그러고보니 거기도 글쓴지 백만년 ㅠㅠ

http://me2day.net/amati

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

CSS에서는 글자 폰트 크기나 width, height 등의 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. (pt, px, em, ex, %) 대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위(모니터의 픽셀)로 인식하여 렌더링을 하게 되지만, 현재 표준은 단위를 항상 명시해주는 것입니다. (0 제외)

대부분 HTML 개발 시에는 px 단위를 사용하고 폰트 크기에는 pt, px 단위를 혼용하여 사용하고는 하는데, em 이라는 단위를 사용하자는 움직임도 있는 것 같습니다.

pt, px 가 절대적인 크기를 나타내는데 반해서, em, ex, % 는 상위 엘레멘트에 대한 상대적인 크기를 나타냅니다.
em, ex 단위의 장점이라면 웹 브라우저 메뉴에서 글꼴 크기를 변화시켜 줄 수 있고, 그에 따라 레이아웃을 유동적으로 적용할 수 있기 때문에 접근성이 향상됩니다. 즉 작은 글자를 보기 어려운 분들도 글자 확대를 하여 쉽게 볼 수 있다는 점이죠. (IE6을 사용하신다면 콘트롤 키를 누르고 마우스 휠을 돌려보세요)
IE 기준으로 글꼴 크기를 "보통"으로 지정했을 경우(웹브라우저 디폴트) 최상엘리멘트 1em은 12pt, 16px 와 같습니다. 기준인 셈이죠. 보통 많이 사용하는 굴림체 9pt 의 경우는 12px 이므로 em 으로 환산하면 0.75em 이 됩니다. 참고할 만한 단위표는 다음을 참고!

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.