선택자
CSS의 모든 시작은 선택자(Selector)이다
웹페이지는 HTML 요소로 구성되어져 있고, 이러한 HTML 요소(HTML Element)를 이쁘게 꾸미는 것이 CSS의 역할이다. CSS을 작성하는 과정을 보면 아래의 그림과 같은 형태를 가지게 된다. 먼저 원하는 (1) HTML 요소를 선택하고 (선택자), 바꾸고자 하는 (2) 프로퍼티를 언급한 뒤, (3) 값을 지정해준다. 이번 포스트에서 집중 할 내용은 바로 선택자이다.
1 | 선택자 { 프로퍼티: 값 ; } |
시작하기 전에 용어를 간단히 정리하자면, “요소”라고 하는 것은 HTML 요소(HTML Element)를 의미하고, 태그와 거의 같은 의미로 사용되어진다. 엄밀히 말하자면, 태그는 시작태그와 끝태그로 이뤄져 있고, 경우에 따라서는 시작과 끝태그 중간에 내용이 들어간다. 요소는 이러한 시작태그, 내용, 끝태그를 모두 포함하는 개념이다.
선택자 종류표
선택자의 종류와 사용방법은 정말 방대하기 때문에, 이번 포스트에서는 아래 표에서 정리된 기본 선택자들에 대해서 알아보겠다. 그 중에서도 유사 클래스(Pseudo-class)를 제외한 5가지에 대해서 다룬다. 유사 클래스는 내용이 방대하기 때문에 별도의 포스트에서 다루겠다.
기본 선택자 (Simple Selectors)
| 종류 | 선택자 |
| 1. 전체 선택자 (Universal Selector) | * |
| 2. 아이디 선택자 (ID Selector) | #아이디값 |
| 3. 클래스 선택자 (Class Selector) | .클래스값 |
| 4. 태그 선택자 (Type Selector) | 태그이름 |
| 5. 속성 선택자 (Attribute Selector) | 일치관련 [속성] [속성=”값”] 포함관련 [속성~=”값”] [속성*=”값”] 시작관련 [속성^=”값”] [속성|=”값”] 끝관련 [속성$=”값”] |
| 6. 유사 클래스 (Pseudo-class) | :조건 |
복합 선택자 (Compound Selector)
복합 선택자는 특별한 기호를 붙여서 만드는 새로운 선택자가 아니라, 위의 기본 선택자들을 섞어서 사용하는 방법을 말한다. 따라서 특별히 복합 선택자라는 이름을 만들 필요는 없을 것 같은데, CSS 선택자 level 4 명세서에 그렇게 되어 있으니 상식적으로 알아두자.
방법은 아래 표에서와 같이 2개 이상의 선택자들을 붙여서 적으면 된다. 어려운 내용이 아니므로, 이 포스트에서는 5. 속성선택자에서 태그 선택와 함께 사용되어지는 예제로 알아보겠다.
| 복합 선택자 | 몇 가지 예시: 태그이름.클래스값 태그이름[속성=”값”] .클래스값[속성=”값”] [속성1=”값1″][속성2=”값2″] |
4. 태그 선택자
<style> 태그이름 { 프로퍼티: 값; } </style>
- 태그 선택자는 HTML의 태그를 선택한다.
- 태그 선택자는 특별한 기호 없이 태그이름을 바로 적어주면 된다.
- 아래의 코드는 h1과 p 태그의 글자색깔을 바꾸는 예제이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>태그 선택자</title> <style media=“screen”> h1 { color: red; } p { color: blue; } </style> </head> <body> <h1>태그 선택자</h1> <p>태그 선택자는 HTML 태그를 선택합니다.</p> </body> </html> | cs |
태그 선택자
태그 선택자는 HTML 태그를 선택합니다.
5. 속성 선택자
일치 관련
[속성] - 바로이동하기↓ 입력한 속성을 가지는 태그들을 선택 [속성="값"] - 바로이동하기↓ 입력한 속성과 속성값이 "정확히" 일치하는 태그들을 선택. 정확히 일치한다는 뜻은 다른 단어들이 없이, 입력한 값만이 속성값으로 들어가 있다는 뜻.포함 관련
[속성~="값"] - 바로이동하기↓ 입력한 속성값이 태그 속성값의 "단어"들 중 하나로 들어가 있는 태그들을 선택. 여기서 단어는 띄어쓰기 기준으로 한 덩어리를 뜻한다. [속성*="값"] - 바로이동하기↓ 입력한 속성값이 태그 속성값의 "글자"들에 포함되어 있는 태그들을 선택. 글자들 중에 포함되어 있다는 뜻은 단어 안의 일부분만 일치해도 된다는 뜻이다.시작 관련
[속성^="값"] - 바로이동하기↓ 입력한 속성값으로 시작(단어 또는 단어일부)하는 태그들을 다 선택 [속성|="값"] - 바로이동하기↓ 입력한 속성값과 "정확히" 일치하거나 "시작 하이픈 단어"로 갖는 태그들을 선택. "정확히 일치"한다는 것은 위에서 두번째 예제의 경우와 같이 선택자[속성="값"]을 뜻한다. "하이픈 단어"는 en-uk처럼 하이픈으로 연결된 단어를 뜻한다. (예: 선택자[속성|="en"]이라고 설정했다면 en-uk도 선택됨)끝 관련
[속성$="값"] - 바로이동하기↓ 선택자가 선택한 태그들 중에서, 입력한 속성값으로 끝나는 태그들을 다 선택
- 속성 선택자는 특정한 HTML 속성을 가지는 태그들을 선택하는 것이다.
- HTML 속성값들은 정말 다양한 형태로 올 수 있기 때문에, 이러한 속성값들 세세히 선택하기 위해서 다양한 옵션이 존재한다.
- 설명으로만 보면 헷갈리기 때문에 아래 예제들을 보자.
[속성] 예: div[data-value] [ 선택자 종류 표로 이동↑ ] [ 5. 속성 선택자로 이동↑ ]
- [속성]은 CSS 명세서(https://www.w3.org/TR/selectors-4/#attribute-selectors)에 보면, 속성값에 상관없이 해당 속성을 가지는 요소들을 선택한다고 되어있다.
- 하지만 실제로 아래 코드처럼 작성해보면, 모든 요소들을 선택되어진다. 따라서 현재(2021-09-07)로는 기대되어지는 것처럼 작동을 하지 않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html data-value=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>속성 선택자</title> <style> [data-value] { color: orangered; } body { width: 90%; margin: 0 auto; } </style> </head> <body> <h1>[data-value] {color: orangered;}</h1> <div> <p>문단 1: (div 태그, 속성값 없음) 속성값이 없으므로 선택되면 안 된다.</p> </div> <div data-value=“foo”> <p>문단 2: (div 태그, data-value=”foo”) data-value 속성이 있으므로 선택된다.</p> </div> </body> </html> | cs |
[data-value] {color: orangered;}
문단 1: (div 태그, 속성값 없음) 속성값이 없으므로 선택되면 안 된다.
문단 2: (div 태그, data-value=”foo”) data-value 속성이 있으므로 선택된다.
- 참고로 선택자[속성] 형태는 잘 작동한다.
- 이 형태는 선택자가 선택한 요소들 중에서 해당 속성을 가지는 요소들을 선택한다.
- 이 경우에는 원하는 방향으로 잘 작동한다.
- 아래의 코드에서, 선택자 div[data-value] (Line 7)는 div 태그들 중에 data-value 속성을 가지는 태그들을 다 선택한다.
- data-value의 ‘값’에 상관없이, ‘div‘가 ‘data-value 속성’을 가지기만 하면 모두 선택한다.
- data-value 속성을 갖더라도 div가 아닌 태그는 선택하지 않는다. (Line 26) 따라서 첫 번째, 두 번째 문단만 글자색이 붉은색으로 바뀐다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html data-value=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>속성 선택자</title> <style> div[data-value] { color: red; } body { width: 90%; margin: 0 auto; } </style> </head> <body> <h1>div[data-value] {color: red;}</h1> <div data-value=“foo”> <p>문단 1: (div 태그, data-value 가짐) 선택자[속성]은 선택자가 선택한 태그들 중, 입력한 속성을 가지는 태그들을 모두 선택합니다.</p> </div> <div data-value=“bar”> <p>문단 2: (div 태그, data-value 가짐) 이 코드에서는 div[data-vlaue] 선택자를 테스트합니다.</p> </div> <div> <p data-value=“baz”>문단 3: (div 태그, data-value 없음) (p 태그, data-value 가짐) div 태그들 중에 data-value 속성이 있는 태그들을 모두 선택하여 글자색을 붉은색으로 바꿉니다.</p> </div> </body> </html> | cs |
div[data-value] {color: red;}
문단 1: (div 태그, data-value 가짐) 선택자[속성]은 선택자가 선택한 태그들 중, 입력한 속성을 가지는 태그들을 모두 선택합니다.
문단 2: (div 태그, data-value 가짐) 이 코드에서는 div[data-vlaue] 선택자를 테스트합니다.
문단 3: (div 태그, data-value 없음) (p 태그, data-value 가짐) div 태그들 중에 data-value 속성이 있는 태그들을 모두 선택하여 글자색을 붉은색으로 바꿉니다.
[ 선택자 종류 표로 이동↑ ]
[ 5. 속성 선택자로 이동 ↑ ]
선택자[속성="값"] 예: div[data-value="bar"] [ 선택자 종류 표로 이동↑ ] [ 5. 속성 선택자로 이동↑ ]
- 선택자가 선택한 태그들 중에서, 입력한 속성과 속성값이 “정확히” 일치하는 태그들을 선택한다.
- ‘값’이 한 단어일 경우에는 큰 따옴표를 사용하지 않아도 작동한다. 하지만 여러 단어일 경우에는 큰 따옴표로 묶어줘야 한다.
- 아래의 코드에서, 선택자 div[data-value=“bar”]를 이용하여, div 태그들 중에 data-value=“bar”속성값을 가지는 태그들을 다 선택하고, 글자 색깔을 파란색으로 바꾼다. (문단 2)
- 예를 들어 data-value=”bar foo”처럼 ‘bar’로 정확히 같지 않으면 선택하지 않는다. (문단 3, Line24 -26)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html data-value=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>속성 선택자</title> <style> div[data-value=“bar”] { color: blue; } body { width: 90%; margin: 0 auto; } </style> </head> <body> <h1>div[data-value=”bar”] {color: blue;}</h1> <div data-value=“foo”> <p>문단 1: (div 태그, data-value=”foo”) 속성값(“foo”)이 달라서 선택되지 않는다.</p> </div> <div data-value=“bar”> <p>문단 2: (div 태그, data-value=”bar”) 속성값이 정확히 bar라서 선택된다.</p> </div> <div data-value=“bar foo”> <p>문단 3: (div 태그, data-value=”bar foo”) 속성값에 bar가 있지만, 전체값이 “bar foo”로 정확히 같이 않아서 선택되지 않는다.</p> </div> </body> </html> | cs |
결과를 로딩 중입니다.
[ 선택자 종류 표로 이동↑ ]
[ 속성 선택자 처음으로 이동 ↑ ]
선택자[속성~="값"] 예: div[data-value~="bar"] [ 선택자 종류 표로 이동↑ ] [ 5. 속성 선택자로 이동↑ ]
- 선택자가 선택한 태그들 중에서, 입력한 속성값이 태그 속성값을 이루고 있는 “단어”들 중 하나면, 그 태그를 선택한다.
- 여기서 단어란 띄어쓰기 기준으로 한 덩어리를 말한다.
- 아래의 코드에서, 선택자 div[data-value~=“bar”]를 이용하여, div 태그들 중에 data-value 값의 단어들 중에 ‘bar’가 있는 태그들을 선택하여, 글자색을 주황색(orange)으로 바꾼다. (문단2)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html data-value=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>속성 선택자</title> <style> div[data-value~=“bar”] { color: orange; } body { width: 90%; margin: 0 auto; } </style> </head> <body> <h1>div[data-value~=”bar”] {color: orange;}</h1> <div data-value=“foo”> <p>문단 1: (div 태그, data-value=”foo”) 속성값에 ‘bar’가 없어서 선택되지 않는다.</p> </div> <div data-value=“foo bar”> <p>문단 2: (div 태그, data-value=”foo bar”) 속성값 ‘foo bar’의 단어 중에 ‘bar’가 있어서 선택된다.</p> </div> <div data-value=“foo bar-baz bari”> <p>문단 3: (div 태그, data-value=”foo bar-baz bari”) 속성값 ‘foo bar-baz bari’ 단어 중에 정확히 독립된 ‘bar’가 없어서 선택되지 않는다. 하이픈 단어(bar-baz)랑 일부 일치한 단어(bari)는 선택되지 않는다는 것에 주의!</p> </div> </body> </html> | cs |
결과를 로딩 중입니다.
[ 선택자 종류 표로 이동↑ ]
[ 5. 속성 선택자로 이동 ↑ ]
선택자[속성*="값"] 예: div[data-value*="bar"] [ 선택자 종류 표로 이동↑ ] [ 5. 속성 선택자로 이동↑ ]
- 선택자가 선택한 태그들 중에서, 입력한 속성값이 태그 속성값의 “글자”들에 포함되어 있는 태그들을 선택한다.
- [속성~=”값”]과 다른 점은, ~=는 단어를 의미하고, *=는 단어와는 상관없이 글자들 중에 포함되어 있기만 하면 된다.
- 아래 코드에서, 선택자 div[data-value*=“bar”]를 이용하여, div 태그들중에 data-value 속성값에 ‘bar’의 글자가 포함된 태그들을 선택하여, 글자색으로 초코렛(chocolate)으로 바꾼다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html data-value=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>속성 선택자</title> <style> div[data-value*=“bar”] { color: chocolate; } body { width: 90%; margin: 0 auto; } </style> </head> <body> <h1>div[data-value*=”bar”] {color: chocolate;}</h1> <div data-value=“foo bar”> <p>문단 1: (div 태그, data-value=”foo bar”) 속성값 일부분에 ‘bar’가 있으므로 선택된다.</p> </div> <div data-value=“foo baristar”> <p>문단 2: (div 태그, data-value=”foo baristart”) 속성값 일부분에 ‘bar’가 있으므로 선택된다.</p> </div> <div data-value=“bazbarfoo”> <p>문단 3: (div 태그, data-value=”bazbarfoo”) 속성값 일부분에 ‘bar’가 있으므로 선택된다.</p> </div> </body> </html> | cs |
결과를 로딩 중입니다.
[ 선택자 종류 표로 이동↑ ]
[ 5. 속성 선택자로 이동 ↑ ]
선택자[속성^="값"] 예: div[data-value^="bar"] [ 선택자 종류 표로 이동↑ ] [ 5. 속성 선택자로 이동↑ ]
- 선택자가 선택한 태그들 중에서, 입력한 속성값으로 시작(단어 또는 단어의 일부)하는 태그들을 선택한다.
- 아래 코드에서, 선택자 div[data-value^=“bar”]를 이용하여, div 태그들 중에 data-value 속성값이 ‘bar’로 시작하는 단어(예: var foo) 또는 단어일부(예: baristar)를 찾아, 글자색을 goldenrod로 바꾼다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html data-value=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>속성 선택자</title> <style> div[data-value^=“bar”] { color: goldenrod; } body { width: 90%; margin: 0 auto; } </style> </head> <body> <h1>div[data-value^=”bar”] {color: goldenrod;}</h1> <div data-value=“foo bar”> <p>문단 1: (div 태그, data-value=”foo bar”) 속성값에 ‘bar’가 있지만, ‘bar’로 시작하지 않기 때문에 선택되지 않는다.</p> </div> <div data-value=“bar baz”> <p>문단 2: (div 태그, data-value=”bar baz”) 속성값이 ‘bar’로 시작하기 때문에 선택된다..</p> </div> <div data-value=“bar-foo baz”> <p>문단 3: (div 태그, data-value=”bar-foo baz”) 속성값이 하이픈 문자일지라도’bar’로 시작하기 때문에 선택된다.</p> </div> <div data-value=“baristar foo”> <p>문단 4: (div 태그, data-value=”baristar foo”) 속성값이 ‘bar’의 독립된 단어가 아닐지라도, ‘bar’로 시작하기 때문에 선택된다.</p> </div> </body> </html> | cs |
결과를 로딩 중입니다.
[ 선택자 종류 표로 이동↑ ]
[ 5. 속성 선택자 처음으로 이동 ↑ ]
선택자[속성|="값"] 예: div[data-value|="bar"] [ 선택자 종류 표로 이동↑ ] [ 5. 속성 선택자로 이동↑ ]
- 선택자가 선택한 태그들 중에서, 입력한 속성값과 “정확히” 일치하는 단어 또는 “시작 하이픈 단어”를 갖는 태그들을 선택한다.
- 아래 코드에서, 선택자 div[data-value|=“bar”]를 이용하여, div 태그들 중에 data-value 속성값이 ‘bar’이거나 ‘시작 하이픈 문자’인 ‘bar-‘ 태그들을 찾아, 글자색을 darkcyan으로 바꾼다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html data-value=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>속성 선택자</title> <style> div[data-value|=“bar”] { color: darkcyan; } body { width: 90%; margin: 0 auto; } </style> </head> <body> <h1>div[data-value|=”bar”] {color: darkcyan;}</h1> <div data-value=“bar”> <p>문단 1: (div 태그, data-value=”bar”) 속성값이 ‘bar’로 정확히 일치하기 때문에 선택된다.</p> </div> <div data-value=“bar-foo baz”> <p>문단 2: (div 태그, data-value=”bar-foo baz”) 속성값이 하이픈 문자 ‘bar-foo’로 시작하기 때문에 선택된다.</p> </div> <div data-value=“bar foo”> <p>문단 3: (div 태그, data-value=”bar foo”) 속성값이 ‘bar’로 시작하기는 하지만, 다른 단어들도 있기 때문에 선택되지 않는다.</p> </div> <div data-value=“foo bar-baz”> <p>문단 4: (div 태그, data-value=”foo bar-baz”) 속성값 단어 중에 ‘bar-baz’가 있지만 시작문자가 아니기 때문에 선택되지 않는다.</p> </div> </body> </html> | cs |
결과를 로딩 중입니다.
[ 선택자 종류 표로 이동↑ ]
[ 5. 속성 선택자 처음으로 이동 ↑ ]
선택자[속성$="값"] 예: div[data-value$="star" [ 선택자 종류 표로 이동↑ ] [ 5. 속성 선택자로 이동↑ ]
- 선택자 선택한 태그들 중에, 입력한 값으로 끝나는 태그들을 선택한다.
- 아래 코드에서, 선택자 div[data-value$=“star”]를 이용하여, div 태그들 중에 data-value 속성값이 ‘star’로 끝나는 태그들을 찾아, 글자색을 lightseagreen으로 바꾼다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html data-value=“en” dir=“ltr”> <head> <meta charset=“utf-8”> <title>속성 선택자</title> <style> div[data-value$=“star”] { color: lightseagreen; } body { width: 90%; margin: 0 auto; } </style> </head> <body> <h1>div[data-value$=”star”] {color: lightseagreen;}</h1> <div data-value=“star”> <p>문단 1: (div 태그, data-value=”star”) 속성값이 ‘star’로 시작하지만, ‘star’로 끝나기도 하기 때문에 선택된다.</p> </div> <div data-value=“foo baristar”> <p>문단 2: (div 태그, data-value=”foo baristart”) 속성값이 ‘baristar’로 끝나지만 마지막에 ‘star’이기 때문에 선택된다.</p> </div> <div data-value=“foo star”> <p>문단 3: (div 태그, data-value=”foo star”) 속성값이 ‘star’로 끝나기 때문에 당연히 선택된다.</p> </div> <div data-value=“foo baz-star”> <p>문단 4: (div 태그, data-value=”foo baz-star”) 속성값의 마지막이 하이픈 문자라도 ‘star’로 끝나기 때문에 선택된다.</p> </div> </body> </html> | cs |
결과를 로딩 중입니다.
[ 선택자 종류 표로 이동↑ ]
[ 5. 속성 선택자 처음으로 이동 ↑ ]
