선택자

선택자는 스타일시트를 적용할 수 있는 HTML 요소를 선택하는 방법입니다. HTML 테그에 CSS를 적용하기 위해서는 요소를 선택해 주어야 합니다.

선택자란?

CSS는 스타일을 HTML에 적용하기 위해서 선택자를 먼저 지정하게 됩니다.

선택자

CSS를 적요하기 위해서는 HTML의 요소를 선택해 주어야 합니다. CSS 작성규칙에서도 알 수 있듯이 모든 CSS의 속성은 먼저 선택자로 요소를 선택한 뒤에 속성을 부여하게 됩니다.

기본 선택

기본 선택은 가장 일반적으로 CSS 요소 선택 방법입니다.

태그 선택자

HTML 요소를 선택할 수 있는 대표적인 방법입니다. HTML의 요소들은 각각의 태그명을 가지고 있습니다. 테그명을 이용하여 요소를 선택하는 방법을 태그 선택자라고 합니다.

작성하는 방법은 다음과 같습니다. 선택자 이름에 태그명만 지정해 주면 됩니다.

태그 {
    속성:속성값;  
    속성:속성값;   
    ...
}

태그 선택자를 다른 이름으로 타입 선택자라고도 합니다.

전체 선택자

전체 선택자(universal selector)는 페이지에 있는 모든 요소를 대상으로 스타일을 적용할 때 사용합니다. 전체 선택자는 일반적인 테그나 속성명을 사용하지 않고 특별한 기호인 *를 사용합니다.

* {

}

전체 선택자를 사용하면 html 태그를 포함해 head 태그, title 태그, style 태그까지 선택됩니다.

일반적으로 전체 선택자는 잘 사용을 하지 않습니다.
다만, 브라우저의 기본 속성값을 초기화 할때와 같이 특수한 상황에서 사용하면 편리합니다.

전체선택자는 속성을 초기화 할때에도 유용하게 사용을 합니다.

속성 선택자

자주 사용하는 class나 id는 요소의 속성값입니다. 이외에도 다양한 속성의 존재 여부나 값을 통하여 요소를 선택할 수 있습니다.

속성이란

클래스 선택자

요소의 클래스 속성값을 이용하여 선택하는 방법입니다. 클래스 선택자는 웹 페이지를 개발할때 가장 많이 사용하는 선택자입니다.

HTML 태그에서 class 속성을 부여할때는 한개의 값만 사용하지 않습니다. 뛰어쓰기를 통하여 여러개의 클래스명을 선언 하여 사용합니다. 따라서, 선택된 클래스의 이름이 포함되어 있으면 요소로 선택됩니다.

클래스명은 id선택과 달리 한개의 태그에서만 사용되지 않고, 다른 태그에도 중복되어 지정되는 경우가 많습니다. 여러개의 요소를 선택하려고 한다면 id보다 class 선택을 사용하는 것이 좋습니다. 클래스가 적용된 모든 태그들에 CSS 속성이 부여 됩니다.

CSS에서 클래스를 선택할 때에는 .을 클래스명 앞에 지정합니다.

.클래스이름  {
    속성:속성값;  
    속성:속성  값;   
    ...
}

클래스명은 다른 태그명, id값, 속성등과 결합하여 정교한 선택을 위하여 사용할 수도 있습니다.

id 선택자

HTML 테그에 선언된 id 속성값을 이용하여 요소를 선택하는 방법입니다.

id는 태그의 속성이며, 동일한 id 값을 여러 테그에 사용을 해도 브라우저는 정상적으로 동작을 합니다. 하지만, 웹 표준에 따르면 “id 속성은 웹 페이지 내부에서 중복되면 안 된다”라는 규정을 하고 있습니다. 이말은 HTML 문서에서 id는 유일한 값으로 1번만 사용을 하는 것을 말합니다.

이러한 원칙으로 보면, id선택자는 특정한 하나의 태그를 선택할 때 시용합니다.

CSS에서 id를 선택할때에는 #을 앞에 지정합니다.

#id이름  {
    속성:속성값;
    속성:속성값;   
    ...
}

css에서 id 속성은 레이아웃이나, 요소에게 특별한 위치등을 부여할때 자주 사용합니다.

복합 선택

하위 선택자

하위 선택자는 특정한 태그 아래에 있는 후손을 선택할 때 사용하는 선택자입니다.

하위 선택자(descendant selector)는 2개 이상의 선택자를 이용하여 적용 대상을 부분적으로 한정시키고자 할 때 사용하는 선택자입니다.

상위요소 하위요소 {
    속성:속성값;   
    ...
}

하위 요소를 선택할 때에는 선택자 사이에 공백을 통하여 구분합니다.
상위요소 안에 있는 하위 요소를 선택하게 됩니다.

선택자를 공백을 이용하여 지정합니다. 예를들면 A B로 하면 A선택자 하위에 있는 B선택자를 모두 선택합니다.

/* div 테그 하위에 있는 모든 span 요소를 선택합니다.*/
div span {
    color:blue;
}

div 테그 안에 있는 모든 span 테그를 선택합니다.

그룹선택자

그룹 선택자(group selector)는 여러 선택자에 같은 속성을 적용해야 할 경우 사용합니다.

요소1, 요소2, ... {
    속성:속성값;
    ...
}

CSS 여러 요소에 속성을 추가하는 방법입니다. 여러 요소를 구분할때에는 ,를 사용합니다.

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

자손 선택자

자손 선택자는 특정 태그 아래에 있는 자손을 선택할때 시용하는 선택자입니다.

자식 선택자

자식 선택자는 바로 밑의 하위 요소만을 선택합니다，자식 테그는 > 로 선택합니다. 첫번째 자손만을 선택하는 것이 자식 결합자 입니다. 자식 선택자를 정의할 때 부모요소와 자식요소를 나란히 작성하고, 두요소 사이를 >로 표시합니다.

부모요소 > 자식요소  {
    속성:속성값;   
    ....
}

자식 선택자 vs 하위 선택자

동의 선택자

동위 선택자는 동위 관계에서 뒤에 위치한 태그 를 선택할 때 사용하는 선택자입니다.

인접 형제 선택자

인접 형제 선택자(adjacent selector)는 문서 구조상 길은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용됩니다.

인접 형제 선택자를 정의할 때는 요소1와 요소2 사이에 +(더하기 기호)를 표시합니다.

요소1 + 요소2 {
    속성:속성값;
    ...
}

인접 형제 + 결합자는 형제, 즉 첩번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두번재 요소를 선택합니다.

문법

A + B

p + code {
    color: red;
}

같은 형제에서 바로 인접한 다음 테그를 선택합니다.

형제 선택자

모든 형제 요소에 다 선택합니다.

형제 선택자는CSS3부터 정의되었습니다.

형제 선택자를 정의할 때는 첫 번째 요소와두 번째 요소 사이에 ~(틸드)로 표시합니다.

요소1 ~ 요소2 {
    속성:속성값;
    ...
}

형제란? 동일한 레벨(깊이)상에 있는 테그를 말합니다.

일반 형제 ~결합자는 형제, 즉 첫번째 오소를 뒤따르면서 같은 부모를 공유하는 두번째 요소를 선택합니다.

문법

A ~ B

/* p 테그 뒤에 나오는 모든 sapn 요소 */
p ~ span {
    color:blue;
}

예제

<section>
    <span>aaa</span>
	<p>
        문단의 시작.
    </p>
    <span>bbb</span>
    <span>ccc</span>
</section>

p 테그 다음에 있는 같은 형제의 span 테그 모두 적용됩니다. bbb와 ccc에 모두 적용됩니다. 하지만, 같은 형제라도 p테그 앞에 있는 aaa는 선택되지 않습니다.

가상클래스 선택자

가상 클래스는 슈도 클래스(pseudo class)라고 합니다. HTML 문서에는 존재하지 않지만, css에서 가상으로 요소를 추가하여 처리하는 것을 말합니다.

구조 선택자
반응 선택자
상태 선택자
링크 선택자
부정 선택자

가상 클래스

가상 클래스는 슈도 클래스(pseudo class)라고 합니다. HTML 문서에는 존재하지 않지만, css에서 가상으로 요소를 추가하여 처리하는 것을 말합니다.

가상클래스

가상 요소 클래스 선택자

문자 선택자

::first-letter
::first-line
::after
::before
::selection