CSS 선택자(Selector) 및 지원 여부

CSS 선택자의 종류와 용도를 알아보고 IE 버전별로 지원 가능한지 알아봅니다.

CSS 선택자

CSS에서 선택자(selector)는 스타일을 원하는 요소를 선택하는데 사용되는 패턴이다.

선택자 & 상속

전체(universal) 선택자

* 기호를 이용해서 문서의 모든 요소를 선택하게 된다.

* {
backgrond-color: green;
}

리스트1
리스트2
리스트3

유형(type) 선택자

원하는 요소를 요소 이름으로 선택하게 된다.

p {
  color: #ffffff;
  background-color: green;
}

<div>

<p>

ID 선택자

요소중에 해당 id 속성의 값으로 구성된 것을 선택하게 된다.

#header {
  position: relative;
}

클래스(clsass) 선택자

요소중에 해당 class 속성의 값으로 구성된 것을 선택하게 된다.

.header {
  position: relative;
}

체인(chain) 선택자

체인 선택자는 아래와 같이 한 요소에 여러개의 클래스가 지정된 경우에 사용한다.

<div class="class1">class1</div>
<div class="class2">class2</div>  
<div class="class1 class2 class3">.class1.class2.class3</div>

.class1, .class2 {
  background-color: blue;
}

.class1.class2.class3 { 
  background-color: green; 
}

.class1

.class2

.class1.class2.class3

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

얼핏보면 IE6 에서도 지원하는 것 같아보이나, 사실은 체인의 마지막 클래스가 부여 되어 있다면 무조건 적용해 버린다. 3개의 클래스가 모두 주어졌을 때만 적용되어야 정상동작이다.

자식(child) 선택자

부모 요소의 직계 자식(손자는 제외)을 모두 선택한다. 아래의 예에서는 body가 부모이고, p가 자식이다.

body > p { 
  color:#fff;
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

IE7 에서는 부모와 자식사이에 주석이 있다면 동작하지 않는다.

형제(sibling) 선택자

형제 선택자는 앞에 지정된 요소 이후의 모든 형제요소에 적용된다.

<p>First</p>
<h1>Heading</h1>
<p>Sibling</p>
<p>Sibling</p>

h1 ~ p {
  background-color: green; 
}

First

Heading

Sibling

위의 코드의 경우 아래 두개의 p에 모두 적용된다. 다만, 헤딩(h1) 앞에 있는 p에는 적용되지 않는다.

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

인접 형제(adjacent sibling) 선택자

인접 형제 선택자는 앞에 지정된 요소 이후로 가장 근접한 하나의 형제요소에만 적용된다. 아래의 예제 코드는 h1 이후로 가장 근접한 p요소 만을 찾는다.

<h1>Heading</h1>
<p>First Sibling</p>
<p>Second Sibling</p>

h1 + p { 
  background-color: green; 
}

Heading

First Sibling

Second Sibling

위의 코드에서는 첫번째 p에만 해당 CSS가 적용되고 두번째에는 적용되지 않는다.

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

IE7 에서는 부모와 자식사이에 주석이 있다면 동작하지 않는다.

속성(attribute) 선택자

속성만 선택자로 이용한 경우와 속성의 값까지 이용한 경우로 나뉜다.

요소[속성]

특정 속성이 존재하는 요소를 선택하며 속성명을 대괄호로 묶어 표현한다.

p[title] { 
  padding: 5px; 
  border: 1px solid gray; 
}

일부 브라우저는 <p title=" ">과 같이 속성값이 비어 있는 요소는 선택하지 않으니 주의하자.

요소[속성=값]

지정된 특정 속성의 값에 특정 단어가 포함된 요소를 선택한다.

p[title="love"]

특정 값이 포함된 단어를 선택한다.

<p title="First love">

p[title~="love"]

특정 값으로 시작되는 요소를 선택한다.

<p title="lovelikeu">

p[title^="love"]

특정 값으로 끝나는 요소를 선택한다.

<p title="Lastlove">

p[title$="love"]

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

가상 클래스 & 가상 콘텐츠

:hover 뒤에 따라오는 자손 선택자(공백)

:hover가 작동하는 경우에 한해서 하위 자손에게 속성을 줄 수 있다.

a:hover span { 
  color: #0f0; 
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

체인 가상 클래스

가상 클래스를 연속적으로 이어서 사용할 수 있다. 아래의 예시에서는 첫째 a가 hover 되었을 때만 적용됩니다.

a:first-child:hover {
  color:#0f0; 
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

a가 아닌 다른 태그에서의 :hover 사용

IE6에서는 a에서만 가상 클래스를 사용할 수 있었으나, IE7 이후부터는 다른 요소에서도 사용 가능하다.

div:hover {
  color:#f00; 
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

:first-child

첫번째 자식요소에만 적용된다.

div li:first-child { 
  background:blue; 
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

IE7에서는 부모와 자식사이에 주석이 있다면 동작하지 않습니다.

:focus

브라우저 포커스를 받은 요소에 적용된다.

a:focus { 
  border: solid 1px red; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

가상 콘텐츠(:before, :after)

지정한 요소에 가상의 컨텐츠를 추가한다. content 속성이 있어야만 유효하다.

#box:before { 
  content: "this text is before the box"; 
}

#box:after { 
  content: "this text is after the box"; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

:before, :after 와 ::before, ::after의 차이점은?

:active, :first-child, :nth-child등은 싱글클론을 사용하고, 가상 요소(::first-letter, ::first-line, ::before, ::after)에는 더블클론(::)을 사용한다. 다만, IE8 이하에서는 CSS3를 지원하지 않기 때문에 더블콜론을 이용하면 가상 요소를 인식하지 못하게 된다.(가상 요소소는 IE 8부터 지원)

속성 지원

포지셔닝에 의한 가상 영역 설정

top, right, bottom, left 값을 절대값으로 준 요소는 width, height가 지정되어있지 않더라도 가상의 영역이 설정된다.

#box { 
  position: absolute; 
  top: 0; 
  right: 100px;
  left: 0;
  bottom: 200px;
  background: blue;
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

Min-Height & Min-Width

최소 넓이, 최소 높이 값을 설정한다. 지정된 값보다 커질 수는 있으나 작아질 수 없다.

#box {
  min-height: 500px;
  min-width: 300px;
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

Max-Height & Max-Width

최대 넓이, 최대 높이 값을 설정한다. 지정된 값보다 작아질 수는 있으나 커질 수 없다.

#box {
  max-height:500px;
  max-width:300px;
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

투명 Border Color

투명한 보더 값을 사용할 수 있다.

#box { 
  border: solid 1px transparent; 
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

Fixed-Position

요소의 위치를 시점에 고정시킨다.

#box { 
  position:fixed; 
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

시점에 따른 Fixed-Position Background

배경 속성이 시점에 고정되도록 할 수 있다.

#box { 
  background-image: url(images/bg.jpg);
  background-position: 0 0;
  background-attachment: fixed;
}

IE 버전	지원 여부
IE6	X
IE7	O
IE8	O

IE6에서는 root 요소(html)에서만 적용됨.

inherit 속성 값

해당 요소를 감싸고 있는 부모 요소에 지정된 해당 속성값을 상속 받게 된다.

#box {
  display: inherit; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

IE6, IE7 에서는 방향 설정과 visibility 설정에서만 적용됨

테이블에서의 Border Spacing

셀과 셀 사이의 간격을 설정한다.

table td { 
  border-spacing: 3px; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

표에서 빈 셀의 표시여부 설정

빈셀의 border와 배경을 보여줄 것인지 아닌지를 선택할 수 있다.

table { 
  empty-cells: show; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

테이블 Caption의 수직 위치 설정

테이블 caption의 위치를 기본 값인 top 대신 botttom으로 줄 수 있다.

table { 
  caption-side: bottom; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

영역 클리핑

특정영역을 클리핑 할 수 있다. 해당 요소에서 클리핑 된 영역만 보여지게 된다.

#box { 
  clip: rect(20px, 300px, 200px, 100px); 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

흥미롭게도 IE6, IE7에서는 컴마 대신 띄어쓰기를 하면 사용이 가능하다. (이런 문법은 거의 사라지고 있는 추세이다.)

인쇄 스타일에서의 고아(orphans), 과부(widows) Text

orphans 속성은 인쇄된 페이지 하단에 보여줄 최소 라인수를 설정한다. widows 속성은 인쇄된 페이지 상단에 보여줄 최소 라인수를 설정한다. (왜 고아와 과부라는 이름이 붙었는지는 모르겠다.)

p { 
  orphans:4; 
}

p {
   widows:4; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

박스 안에서의 Page Break

이 속성은 해당 요소 안에서 page break가 발생할 지의 여부를 설정한다.(break는 떨어짐 현상을 의미)

#box { 
  page-break-inside: avoid; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

Outline 속성

outline은 outline-style, outline-width, outline-color의 속성을 축약형으로 줄인 표기법이다. 이 속성은 문서 flow에 영향을 미치지 않는 border를 만들어 낸다.(즉, 이 속성을 사용하면 박스모델에 영향을 미치지 않는다.outline이 들어가더라도 근접한 요소들이 밀려나지 않으므로, focus 표시를 할 때 유용하게 사용할 수 있다.)

#box {
  outline: solid 1px red; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

추가된 display 속성들

inline-block은 블럭요소를 인라인과 같이 취급되도록 한다. 그 외에도 다음과 같은 속성들이 사용 가능하다.

inline-block
inline-table
list-item
run-in
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group

#box { 
  outline: solid 1px red; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

여백 접기 핸들링

white-space 속성에서 사용할 수 있는 값인 pre-line는 한 영역 안에 여러개의 공백이 들어갈 수 없게 한다.(여백을 접는다고 표현하여 Collapse라는 단어를 사용) pre-wrap 값은 한 영역 안에 여러개의 공백이 들어갈 수 있게 한다

p { 
  white-space: pre-line; 
}

div { 
  white-space: pre-wrap; 
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

그 외 자잘한 테크닉

@import에서의 미디어 타입

삽입된 스타일시트 파일 지정뒤에 미디어타입을 붙여서 해당 미디어에만 적용 할 수 있다.

@import url("style.css") screen;

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

IE6, IE7에서는 미디어 타입이 지정되면 @import 선언 자체를 통채로 무시한다.

카운터 형식 설정

가상 컨텐츠를 사용하여 CSS로 카운터를 붙일 수 있다.(OL에서와 같은 방식으로 카운터가 붙는다.)

h2 { 
  counter-increment: headers; 
}

h2:before {
  content:counter(headers) ". ";
}

IE 버전	지원 여부
IE6	X
IE7	X
IE8	O

그 외 버그 및 호환되지 않는 부분

위에서 설명하지 않은 버그들이다.

IE6 버그

abbr 태그를 스타일링 할 수 없다.
하이픈(-)이나 언더스코어(_)로 시작되는 클래스나 ID를 지원하지 않는다.
select 태그는 z-index가 먹지 않고 언제나 최상위 레이어로 나타난다.
a의 가상 클래스가 순서대로 지정되지 않았다면 :hover 는 무시된다. (:link, :visited, :hover)
!important을 사용하여도 같은 방식(same rule)으로 같은 속성을 다시 정의하면 값이 덮어 써진다.
height가 마치 min-height 처럼 동작한다.
width가 마치 min-width 처럼 동작한다.
요소가 플롯된 방향과 같은 방향으로 margin을 주면 두배의 값이 적용된다.
Dotted border가 dashed border와 같은 모양으로 나타난다.
text-decoration:line-through (가운데 줄 긋기)가 다른 브라우저보다 위쪽에 나타난다.
OL의 리스트 카운터 표시가 제대로 동작하지 않는다.
표준에 정의된 list-style-type 에서 사용 가능한 모든 값을 사용할 수 없다.
플롯된 경우 list-style-image로 정의된 리스트 아이템이 나타나지 않는다.
@font-face를 일부만 지원한다. (eot 이야기인듯)
어떤 선택자들은 오동작한다. (Some selectors will wrongly match comments and the doctype declaration)
ID 선택자에 사용되지 않은 클래스를 붙였을 때, 같은 ID에 다른 클래스를 붙인 스타일지정도 무시된다.

IE7 버그

OL의 리스트 카운터 표시가 제대로 동작하지 않는다.
표준에 정의된 list-style-type 에서 사용 가능한 모든 값을 사용할 수 없다.
플롯된 경우 list-style-image로 정의된 리스트 아이템이 나타나지 않는다.
@font-face를 일부만 지원한다. (eot 이야기인듯)
어떤 선택자들은 오동작한다. (Some selectors will wrongly match comments and the doctype declaration)

여기에 언급되지 않은 IE 버그들은 특정 상황에서만 발생하는 것들이거나, 특정 속성이나 값에서 발생하는 것이 아닌 버그들이다. 그 밖의 자세한 내용들을 더 알고 싶으면 아래 자료들을 참조하라.

참조할만한 자료들

'웹코딩 > CSS' 카테고리의 다른 글

CSS 테두리속성(Border Property) (0)	2015.06.02
CSS 배경속성(Background Property) (0)	2015.06.01
CSS 기초(정의, 링크, 문법, 우선순위) (2)	2015.06.01
Placeholder 포커스시 감추기 (3)	2015.05.23
CSS 가운데(중앙) 정렬 (20)	2015.04.15