CSS는 단순한 HTML태그에 여러가지 스타일 속성을 부여해서 보다 아름다운(?) 웹 페이지를 만들 수 있도록 도와줍니다. 하지만 모든 태그에 동일한 스타일 속성을 지정한다면 정말 무미건조 해지겠지요. 그래서 특정 태그만을 지정 하여 속성을 적용 할 수 있도록 범위를 한정 지을 수 있습니다. 그 때 사용되는 것이 바로 CSS Selector 입니다.
CSS Selector를 사용하여 스타일 적용 범위를 한정 하는 것에는 간단하게 세 가지 방법으로 나뉩니다. 물론 앞의 세 가지 방법들을 조합해서 사용하는 것도 가능하구요 :
- 태그를 이용해 구분하는 방법
- 클래스를 이용해 구분하는 방법
- 아이디를 이용해 구분하는 방법
그럼 위의 세 가지 방법에 대해서 보다 자세히 알아 보도록 하겠습니다.
태그를 이용해 구분하는 방법
처음으로 태그를 이용한 selector에 대해서 알아보도록 하겠습니다. 예를 들어 '<DIV> 태그에 포함 되어진 모든 <H1> 태그들에 대해서 이런저런 스타일 속성을 지정하라!' 같은 것은 아래와 같이 표시 될 수 있을 겁니다 :
위의 코드를 한번 다시 살펴 볼까요. 먼저 'DIV H1' 이라는 것에 주목을 해보도록 하겠습니다. 왠지 디렉토리 경로 표시에서 '\'나 '/'를 제외한 것 같지 않습니까? 네~ 맞습니다. CSS는 기본적으로 DOM 문서 규칙을 채택하고 있기 때문에 문서를 하나의 트리 형태, 즉, 디렉토리 구조와 같이 계층형으로 문서의 구조를 유지하고 있습니다. 특정한 엘리먼트를 찾으려면 디렉토리 패스를 따라가듯이 경로를 지정 해 주시면 됩니다.
'{ color: red; }' 라는 것은 CSS를 적용하는 방법으로써, 찾아진 엘리먼트에 대해서 빨간색을 적용 하라는 뜻입니다.
클래스를 이용해 구분하는 방법
태그의 속성 중에 'class'라는 것이 있습니다. class 속성을 이용하여 선택을 하려면 '.'를 클래스 앞에 붙여 주면 됩니다. 예를 들어 'callout이라는 클래스 속성을 가진 <div>태그 안에 있는 텍스트는 이런저런 속성을 지정 하라!' 라는 규칙을 적어 주고 싶다면 아래와 같이 하면 됩니다 :
위의 스타일을 태그에 지정하기 위해서는 태그의 클래스 속성을 'callout'이라고 하기만 하면 됩니다. 아래와 같이 말입니다 :
<div class='callout'>이 텍스는 callout 스타일 속성이 적용된 체로 보여 집니다</div>
또한 한 개 이상의 클래스에도 중복적인 스타일 지정이 가능합니다. 아래와 같이 'loud'라는 클래스에 대한 스타일 속성이 추가적으로 지정되었다고 가정해 봅시다 :
그리고 이전에 했던것 과 비슷하게 두 스타일을 하나의 태그에 적용 시켜 보도록 하겠습니다 :
<div class='callout'>callout 스타일 속성이 적용된 텍스트입니다</div>
<div class='callout loud'>위의 두 가지 스타일 속성이 동시에 적용된 텍스트입니다</div>
아이디를 이용해 구분하는 방법
아이디를 이용하여 selector를 적용하는 방법은 클래스를 이용한 것과 거의 비슷합니다. 다만 '.'가 '#'로 변경 된 것 외에는 다른 것이 없습니다. 다만 클래스는 한 HTML문서에서 여러번 나타날 수 있지만, 아이디는 한번만 나타나야만 한다는 것이 차이점이라고 할 수 있습니다. 그러니까 아이디를 이용해 속성을 적용한다는 것은 하나의 태그에만 속성을 적용한다는 뜻이지요. 간단하게 아래의 예를 보도록 하겠습니다 :
close라는 아이디를 가진 태그의 문자는 빨간색으로 스타일 속성을 지정하라는 뜻입니다. 그리고 이것이 의미하는 것은 여러 태그에 지정되는 것이 아니라 단 하나의 태그에만 지정된다는 것입니다.
위의 방법들을 복합적으로 사용
위에서 나온 방법들은 하나씩 따로 쓸 수 있을 뿐만 아니라, 원하는 만큼 서로 섞어서 사용 할 수도 있습니다. 예를 들어 '<span> 태그 중 클래스 속성이 highlight인 태그들에게 이런저런 스타일 속성을 지정하라!'라고 한다면 아래와 같이 태그에 대한 select방법과 클래스에 대한 select방법을 복합해서 사용 할 수 있습니다 :
그리고 계층적으로 구성 되어 있는 태그일지라도 복합적인 방법을 이용해서 사용하는 것이 가능합니다. 아래 처럼요 :
그외 다양한 Selector
| Selector | 예제 | 설명 |
|---|---|---|
| .class | .intro | class="intro" 이라고 지정 되어 있는 모든 엘리먼트 선택 |
| .class1.class2 | .name1.name2 | name1과 name2가 클래스 속성에 지정되어 있는 모든 엘리먼트 선택 |
| .class1 .class2 | .name1 .name2 | name1과 name2 사이에 공백이 있음에 주목. name1 뒤에 name2가 클래스 속성으로 지정되어 있는 모든 엘리먼트 선택 |
| #id | #firstname | id="firstname" 이라고 지정 되어 있는 모든 엘리먼트 선택 |
| * | * | 모든 엘리먼트 선택 |
| element | p | 모든 <p> 엘리먼트 선택 |
| element.class | p.intro | class="intro" 라고 지정되어 있는 모든 <p> 엘리먼트 선택(엘리먼트에 종속적인 클래스르를 사용 할 땐 p.intro 사이에 공백이 없어야 한다) |
| element,element | div, p | 모든 <div> 엘리먼트와 <p> 엘리먼트 선택 |
| element>element | div > p | 부모를 <div>로 가지고 있는 모든 <p>엘리먼트 선택 |
| element+element | div + p | <div> 엘리먼트 바로 다음에 위치한 첫번째 <p>엘리먼트 선택(부모 자식 관계가 아니라 순서상 다음임) |
| element1~element2 | div ~ p | <div> 엘리먼트 다음에 위치한 모든 <p>엘리먼트 선택(부모 자식 관계가 아니라 순서상 다음임) |
| [attribute] | [target] | target이라는 어트리뷰트를 가진 모든 엘리먼트 선택 <a href="..." target="...">...</a> |
| [attribute=value] | [target = _blank] | target="_blank" 라는 어트리뷰트와 밸류를 가진 모든 엘리먼트 선택 |
| [attribute~=value] | [target ~= flower] | target 어트리뷰트의 값으로 flower포함하는 모든 엘리먼트 선택 |
| [attribute|=value] | [lang |= en] | lang 어트리뷰트의 값이 en으로 시작하는 모든 엘리먼트 선택 |
| [attribute^=value] | a [href ^= "https"] | href 어트리뷰트의 값이 "https"로 시작하는 모든 <a> 엘리먼트 선택 |
| [attribute$=value] | a [href $= ".pdf"] | href 어트리뷰트의 값이 ".pdf"로 끝나는 모든 <a> 엘리먼트 선택 |
| [attribute*=value] | a [href *= "w3schools"] | href 어트리뷰트의 값이 "w3schools"를 포함하고 있는 모든 <a> 엘리먼트 선택 |
| :active | a:active | 활성화 된 <a> 엘리먼트를 선택(일반적으로 활성화란 사용자가 버튼을 누른 순간 부터 떼는 순간 까지이다) |
| ::after | p::after | 모든 <p> 엘리먼트 뒤에 content 프로퍼티의 밸류에 지정된 값을 추가한다. |
| ::before | p::before | 모든 <p> 엘리먼트 앞에 content 프로퍼티의 밸류에 지정된 값을 추가한다. |
| :checked | input:checked | 모든 체크 된 <input> 엘리먼트를 선택한다 |
| :default | input:default | 모든 기본 <input> 엘리먼트를 선택한다. |
| :disabled | input:disabled | 모든 비활성화 된 <input> 엘리먼트를 선택한다(여기서 비활성화란, 선택, 클릭, 입력 등등 포커스를 받을 수 없는 요소를 말한다). <p><input value="disable" disabled/></p> |
| :empty | p:empty | 모든 자식 엘리먼트를 가지지 않은 <p> 엘리먼트를 선택한다(텍스트 포함). |
| :enabled | input:enabled | 모든 활성화된 <input> 엘리먼트를 선택한다(여기서 활성화란, 선택, 클릭, 입력 등등 포커스를 받을 수 있는 요소를 말한다). |
| :first-child | p::first-child | 첫번째 자식인 모든 <p> 엘리먼트를 선택 |
| ::first-letter | p::first-letter | 모든 <p>엘리먼트의 첫번째 글자를 선택한다. |
| ::first-line | p::first-line | 모든 <p>엘리먼트이 첫번째 라인을 선택한다. |
| :first-of-type | p:first-of-type | 모든 <p>엘리먼트 중 가장 첫번째 <p> 엘리먼트를 선택한다. |
| :focus | input:focus | 현재 포커스를 가지고 있는 <input>엘리먼트를 선택한다 |
| :fullscreen | p:fullscreen | 화면이 풀스크린 모드일 때 모든 <p> 엘리먼트를 선택한다 |
| :hover | a:hover | 마우스 오버가 된 모든 <a> 엘리먼트를 선택한다. |
| :in-range | input:in-range | min, max 어트리뷰트에 지정된 사이의 value어트리뷰트 값을 가진 모든 input 엘리먼트를 선택한다. https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range |
| :indeterminate | input:indeterminate | indeterminate 상태에 있는 모든 <input> 엘리먼트를 선택한다.(보통 자바스크립트에 의해 indeterminate 상태가 true로 설정 된다) https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate |
| :invalid | input:invalid | 유효하지 않은 값을 가진 모든 <input> 엘리먼트를 선택한다.(required 어트리뷰트가 설정 되었으나 값이 없는 경우) https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid |
| :lang(language) | p:lang(it) | lang 어트리뷰트가 "it(이탈리아어)"로 설정되어 있는 모든 <p> 엘리먼트를 선택한다. |
| :last-child | p:last-child | 마지막 자식인 모든 <p> 엘리먼트를 선택 |
| :last-of-type | p:last-of-type | 모든 <p>엘리먼트 중 가장 마지막 <p> 엘리먼트를 선택한다. |
| :link | a:link | 방문하지 않은 모든 링크를 선택한다 |
| ::marker | ul li::marker | 모든 리스트 아이템의 마커를 선택한다. https://developer.mozilla.org/en-US/docs/Web/CSS/::marker |
| :not(selector) | :not(p) | <p>가 아닌 모든 엘리먼트를 선택한다 |
| :nth-child(n) | p:nth-child(2) | 부모의 두번째 자식인 모든 <p> 엘리먼트를 선택한다(odd 또는 even 으로 테이블 열마다 다른 배경을 가지게 할때 사용) |
| :nth-last-child(n) | p:nth-last-child(2) | 뒤에서 부터 부모의 두번째 자식인 모든 <p>엘리먼트를 선택한다. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 뒤에서 부터 부모의 두번째 자식인 모든 <p>엘리먼트를 선택한다. |
| :nth-of-type(n) | p:nth-of-type(2) | 부모의 두번째 자식인 모든 <p>엘리먼트를 선택한다. |
| :only-of-type | p:only-of-type | 형제 <p> 엘리먼트가 없는 모든 <p> 엘리먼트를 선택한다. |
| :only-child | p:only-child | 다른 형제 엘리먼트가 없는 모든 <p>엘리먼트를 선택한다. |
| :optional | input:optional | "required" 어트리뷰트가 없는 모든 <input>엘리먼트를 선택한다 |
| :out-of-range | input:out-of-range | min, max 어트리뷰트에 지정된 밖의 value어트리뷰트 값을 가진 모든 input 엘리먼트를 선택한다. https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range |
| ::placeholder | input::placeholder | "placeholder"어트리뷰트가 지정된 모든 <input>엘리먼트를 선택한다. |
| :read-only | input:read-only | "readonly" 어트리뷰트가 지정된 모든 <input> 엘리먼트를 선택한다. |
| :read-write | input:read-write | "readonly" 어트리뷰트가 지정되지 않은 모든 <input>엘리먼트를 선택한다. |
| :requried | input:required | "required" 어트리뷰트가 지정된 모든 <input>엘리먼트를 선택한다 |
| :root | :root | 도큐먼트의 루트 엘리먼트를 선택한다. |
| ::selection | ::selection | 유저에 의해 선택된 영역(드래그)을 선택한다. |
| :target | #news:target | <a href="index.html#news">와 같이 url 타겟과 같은 id를 가지는 유니크한 엘리먼트를 선택한다.(<p id="news">text</p>) |
| :valid | input:valid | 유효한 값을 가지는 <input>엘리먼트를 선택한다. https://developer.mozilla.org/en-US/docs/Web/CSS/:valid |
| :visited | a:visited | 방문한 모든 링크를 선택한다. |
부록 1. 참고
- Ajax in Action
- CSS Selector Reference
내용이 마음에 드셨다면 공감(❤)과 짧은 댓글 달아 주시면 더욱 좋은 내용의 글로 보답 하겠습니다. 감사합니다.
Next. [CSS] CSS를 로딩하는 세가지 방법
