목차
- 선택자
1-1. 선택자 종류
1-2. 선택자 우선순위 - 모든 선택자(전체 선택자)
- 태그 선택자
- 아이디 선택자
- 클래스 선택자
- 속성 선택자
6-1. 속성값=특정값 일치
6-2. 속성값~=특정값 공백 전후 포함
6-3. 속성값|=특정값 - 이전 포함
6-4. 속성값^=특정값 시작
6-5. 속성값$=특정값 끝
6-6. 속성값*=특정값 어디든 포함 - 자손/후손 선택자
7-1. 자손 선택자
7-2. 후손 선택자 - 동위 선택자
8-1. 동위선택자A + 바로 뒤에 있는 선택자B 1개
8-2. 동위선택자A ~ 뒤따르는 선택자B 전부 - 반응 선택자
9-1. 선택자:active 클릭
9-2. 선택자:hover 마우스오버
9-3. cursor 속성 - 상태 선택자
10-1. input[속성:속성값]:checked
10-2. input[속성:속성값]:focus
10-3. input[속성:속성값]:enabled
10-4. input[속성:속성값]:disabled - 구조 선택자
11-1. 일반 구조 선택자 위치별 구분
11-2. 형태 구조 선택자 태그별 구분 - 문자 선택자
- 부정 선택자
1. 선택자
- 선택자(selector)란 특정 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택해 원하는 스타일 및 기능을 적용한다.
1-1. 선택자 종류
- 기본 선택자와 그밖에 다양한 선택자로 나눠볼 수 있다.
| 기본 선택자 | |
| 전체 선택자 | * |
| 태그 선택자 | 태그(p, h1, li 등) |
| 아이디 선택자 | #아이디명 |
| 클래스 선택자 | .클래스명 |
▲ 기본 선택자 ▲
| 속성 선택자 | 선택자[속성=값] / 선택자[속성~=값] |
| 선택자[속성|=값] / 선택자[속성^=값] | |
| 선택자[속성$=값] / 선택자[속성*=값] | |
| 자손 선택자 | 선택자 > 선택자 |
| 후손 선택자 | 선택자 선택자 |
| 동위 선택자 | 선택자 + 선택자 / 선택자 ~ 선택자 |
| 반응 선택자 | 선택자:active / 선택자:hover |
| 상태 선택자 | :checked / :focus |
| 일반 구조 선택자 | 선택자:first-child / 선택자:last-child |
| 선택자:nth-child(수열) / 선택자:nth-last-child(수열) | |
| 형태 구조 선택자 | 선택자:first-of-type / 선택자:last-of-type |
| 선택자:nth-of-type(수열) / 선택자:nth-last-of-type(수열) | |
| 문자 선택자 | ::first-letter / ::first-line |
| ::after / ::before / ::selection | |
| 부정 선택자 | 선택자:not(선택자) |
▲ 다양한 선택자 ▲
1-2. 선택자 우선순위
- 기본적으로 CSS 속성은 작성 순서대로 위에서부터 아래로 적용되지만, 같은 태그에 여러 개의 CSS 속성이 지정된 경우에는 선택자 우선순위를 따른다.
- 즉 코드 순서와 무관하게 우선되는 선택자별 스타일이 최종 적용되는 것이다.
❗ 태그 선택자 → 클래스 선택자 → 아이디 선택자 → 인라인 스타일시트 → !important
!important가 가장 우선된다.
- 예를 들어 p 태그는 .test 클래스보다 광범위한 범위에 해당한다: 태그 선택자 → 클래스 선택자
- 특히 #testA 아이디는 고유값으로서 특정 요소만 가리키고 있음을 알 수 있다: 클래스 선택자 → 아이디 선택자
태그, 클래스, 아이디 선택자를 모두 작성한다면 그 중 아이디 선택자가 가진 스타일이 적용된다는 뜻이다.
- 나아가 인라인 스타일시트는 <시작태그 style="">처럼 명시된 부분만을 다룬다. 인라인 스타일은 유지보수를 고려했을 때 사용을 지양해야 하나, 태그에 직접적으로 속성을 작성한 것이기에 아이디 선택자보다도 우선된다: 아이디 선택자 → 인라인 스타일시트
- 마지막으로 !important는 앞선 모든 선택자들보다 우선된다. 단 지나친 사용은 삼가야 한다.
2. 모든 선택자(전체 선택자)
<head>
<style>
* { color : red; }
</style>
</head>- HTML 문서 안의 모든 태그를 선택할 때 쓴다.
- 예시에서는 모든 텍스트에 대해 red; 색상이 적용된다.
3. 태그 선택자
<head>
<style>
p { color : lightgray; }
</style>
</head>- HTML 문서 전역에서 사용된 같은 태그들을 모두 선택한다.
4. 아이디 선택자
❗ 아이디 선택자는 고유한 의미로서 중복을 허용하지 않는다.
※ 코드상에 에러는 아니지만, JavaScript의 DOM으로부터 id값으로 페이지 요소를 가져오기 때문에 중복될 수 없다.
<head>
<style>
#id2, #id4 {
background : lightblue;
color : white;
}
</style>
</head>- 아이디는 고유한 식별자로서, HTML 문서 내에 해당 아이디 속성을 가진 하나의 태그만 대상으로 삼는다.
- #아이디명 { 설정내용; } 형식을 취한다.
- 예시에서 살펴볼 수 있듯 선택자도 속성도 쉼표(,)로 구분해가며 나열해 여러 개 작성이 가능하다.
5. 클래스 선택자
❗ 아이디 선택자는 고유한 의미로서 중복이 허용되지 않는 반면, 클래스 선택자는 중복이 허용된다. 따라서 영역을 보다 명확히 가리키기 위해 태그 선택자와 같이 쓰는 경우도 있다.
<head>
<style>
.class1 {
background: lightpink;
color: white;
}
</style>
</head>- 여러 태그에게 동일한 클래스명을 부여하고, 이들에게 일괄 속성 지정이 가능한 선택자이다.
- 즉 하나로 다루기 위한 태그들에게 같은 클래스명을 선언하고, 해당 클래스명을 활용해 속성값까지 지정하는 것이다.
- .클래스명 { 설정내용; } 형태를 따른다.
6. 속성 선택자
- 기본 선택자 뒤에 대괄호 []를 사용해 속성 및 속성값을 적용한다.
- 선택자[속성=속성값] { 설정내용; } 형태를 갖는다.
6-1. 속성값=특정값 일치
div[name=name2] { background: skyblue; }- name 속성이 name2와 완벽히 일치하는 영역에 대해 적용된다.
6-2. 속성값~=특정값 공백 전후 포함
div[name~=name1] { background: pink; }- 띄어쓰기를 기준으로 구분하며, name1이 포함된 태그를 선택한다.
- <div name="name3 name1">인 경우도 포함시킨다.
6-3. 속성값|=특정값 - 이전 포함
div[class|=class] { background: cyan; }- 대시(-)로 구분하며, - 앞에 쓰인 내용이 특정값과 동일해야 한다.
- 클래스명이 "class-div", "div-class"인 요소들이 있을 때 예시에서는 "class-div"만이 선택된다.
6-4. 속성값^=특정값 시작
div[name^=name] { background: gray; }- CSS 문법도 위에서 아래순으로 진행되며 덮어쓰기 된다. 때문에 name1, name2 등에 대해 별도로 background 속성값 지정이 선행되었다면 여기서 덮어쓰기가 발생한다.
6-5. 속성값$=특정값 끝
div[class$=class] { color : white; }- 클래스명이 지정된 값으로 끝나는 데 대해서만 적용된다: "div-class"
6-6. 속성값*=특정값 어디든 포함
div[class*=div] { background-color : salmon; }- 대시(-), 띄어쓰기 등등 구분자와 상관없이 특정값이 적어도 1개 이상 존재하면 일단 적용된다: "class-div", "div-class"
7. 자손/후손 선택자
❗ 자손 선택자는 바로 아래 요소, 후손 선택자는 하위 요소 전부를 가리킨다.
<body>
<div id="test1">
<h4>div의 자손입니다.</h4>
<h4>나도 div의 자손입니다.</h4>
<ul id="testul">
<li>나는 ul의 자손이면서 동시에 div의 후손입니다.</li>
<li>나도 ul의 자손이면서 동시에 div의 후손입니다.</li>
</ul>
</div>
</body>7-1. 자손 선택자
#test1 > h4 { background-color: pink; }div test1의 자손 h4를 가리킨다.
#test1 > ul > li { background : skyblue; }div test1의 자손 ul의 자손 li
- 자손의 자손을 위와 같이 가리킬 수도 있다: 선택자 > 자손 > 자손 > 자손 > 자손 > ...
- 선택자 > 자손선택자 { 설정내용; } 형식으로 작성한다.
7-2. 후손 선택자
#test1 ul { background: lightgray; }div test1의 자손이자 후손 ul
- 후손이란 개념은 선택자의 하위 요소 전부를 망라하므로, test1의 바로 아래 자손인 ul은 또한 후손이기도 하다.
#test1 li { color : white; }- 선택자 후손선택자 { 설정내용; }처럼 쓰인다.
8. 동위 선택자
<body>
<div>
<div id="div-test1">div test1</div>
<div id="div-test2">div test2</div>
<div id="div-test3">div test3</div>
<div id="div-test4">div test4</div>
<div id="div-test5">div test5</div>
</div>
</body>테스트 중 같은 문서 내 다른 태그들과 동위로 읽히지 않도록 div로 한 번 더 감싸서 작업한다.
8-1. 동위선택자A + 바로 뒤에 있는 선택자B 1개
#div-test1 + div { background: yellow; }
- 결과적으로 바로 뒤에 있는 div-test2만 선택된다.
- 선택자+선택자 { 설정내용; } 형식을 쓴다.
8-2. 동위선택자A ~ 뒤따르는 선택자B 전부
#div-test2 ~ div { background : orangered; }- 동위선택자를 뒤따르는 div-test3, div-test4, div-test5 전체에 대해 스타일이 적용된다.
- 선택자~선택자 { 설정내용; }으로 작성한다.
9. 반응 선택자
❗ 반응 선택자는 사용자의 움직임에 따라 달라지는 선택자이다.
<head>
<style>
#active-test,
#hover-test {
width : 300px;
height : 300px;
background-color : skyblue;
color : white;
}
</style>
</head>
<body>
<div id="active-test">active 테스트</div>
<br>
<div id="hover-test">hover 테스트</div>
</body>9-1. 선택자:active 클릭
#active-test:active { background : pink; }- 사용자가 클릭한 영역에 대해 적용한다.
- 기본 형식은 선택자:active { 설정내용; }이다.
9-2. 선택자:hover 마우스오버
#hover-test:hover {
background : cyan;
cursor : pointer;
}- 사용자의 마우스가 위치한 곳에 반영된다.
- 선택자:hover { 설정내용; }으로 작성한다.
9-3. cursor 속성
- 위 예시에서처럼 마우스 커서 모양을 상황에 따라 바뀌도록 설정할 수 있다.
- MDN Web Docs 참고: https://developer.mozilla.org/ko/docs/Web/CSS/cursor
10. 상태 선택자 <input>
| input[속성:속성값]:checked | 체크 상태인 <input> 태그 선택 |
| input[속성:속성값]:focus | 초점이 맞추어진 <input> 태그 선택 |
| input[속성:속성값]:enabled | 사용 가능한 <input> 태그 선택 |
| input[속성:속성값]:disabled | 사용 불가능한 <input> 태그 선택 |
10-1. input[속성:속성값]:checked
<body>
<input type="checkbox" id="apple" name="fruits" value="apple">
<label for="apple">사과</label>
<input type="checkbox" id="banana" name="fruits" value="banana">
<label for="banana">바나나</label>
<input type="checkbox" id="peach" name="fruits" value="peach">
<label for="peach">복숭아</label>
</body>input[type=checkbox]:checked {
width : 200px;
height : 200px;
}- 체크박스가 체크되거든 { 설정내용; }이 적용된다.
- 즉 입력 양식의 상태에 따라 선택 대상이 정해진다.
10-2. input[속성:속성값]:focus
<body>
<label>아이디 : </label>
<input type="text" id="userid" placeholder="아이디 입력" autofocus>
<br>
<label>패스워드 : </label>
<input type="password" id="password" placeholder="비밀번호 입력" disabled>
<br>
</body>- <input> 시작태그 내에서 autofocus 속성을 활용해 초기에 포커스할 영역을 설정할 수도 있다.
#userid:focus,
#password:focus {
background-color: lightgray;
}- 초점(focus)이 맞춰진 <input> 태그에 대해 { 설정내용; }이 반영된다.
10-3. input[속성:속성값]:enabled
<body>
<h3>당신의 연령대는?</h3>
<select>
<option disabled>10대</option>
<option>20대</option>
<option>30대</option>
<option>40대</option>
<option>50대</option>
<option disabled>60대</option>
</select>
</body><option> 시작태그에서 disabled 속성 작성해 해당 옵션을 비활성화 할 수 있다.
option:enabled { background : yellowgreen; }- 사용 가능한 옵션에 대해 { 설정내용; } 반영한다.
10-4. input[속성:속성값]:disabled
option:disabled { background : gray; }- 사용 불가한 옵션의 스타일을 { 설정내용; }에 맞춰 변경한다:
남은 수량 0개인 판매품목에 대해 적용해볼 수 있을 것 같다.
11. 구조 선택자
<body>
<div id="test1">
<p>테스트1</p>
<p>테스트2</p>
<p>테스트3</p>
<p>테스트4</p>
<p>테스트5</p>
<pre>테스트6</pre>
</div>
</body>동위 선상에 있는 동일 태그들을 형제관계라고 판단한다: 예시에서 <p>
11-1. 일반 구조 선택자 위치별 구분
:first-child
#test1 p:first-child { background : pink; color : white; }- 형제관계 중 첫 번째 태그를 선택한다.
:last-child
#test1 p:last-child { background : orange; color : white; }- 형제관계 중 마지막 태그를 고른다. 이때 마지막 태그는 <pre>이므로 해당사항이 없고, { 설정내용; }이 반영되는 영역 또한 전무하다.
- 위치로만 구분되기에 <p>태그는
last-child가 아니고, 때문에선택사항도 없는 것이다.
:nth-child(수열)
#test1 p:nth-child(2n) { background : yellowgreen; color : white; }- 형제관계 중 (앞에서 수열번째) 태그를 선택한다: <p>테스트2</p>, <p>테스트4</p>
- 2n은 2, 4, 6, 8, 10...을 말한다.
- 예시에서
테스트6은 <pre> 태그이므로 해당되지 않는다.
:nth-last-child(수열)
#test1 p:nth-last-child(4) { background : skyblue; color : white; }- 형제관계 중 (뒤에서 수열번째)인 태그에 대해 { 설정내용; } 스타일을 적용한다.
- 예시에서는 <p>테스트3</p>에 해당한다. 위치로 구분되는 선택자이므로 마지막 <pre> 태그부터 카운팅이 시작된 것이다.
11-2. 형태 구조 선택자 태그별 구분
:first-of-type
#test1 p:first-of-type { background : pink; color : white; }- 해당 타입의 형제관계 중 첫 번째 태그에 대해 반영한다: <p>테스트1</p>
:last-of-type
#test1 p:last-of-type { background : orange; color : white; }- 해당 타입의 형제관계 중 마지막 태그에게 적용된다. 태그별 구분이 치러지므로 여기서는 <p>테스트5</p>에 대해 정상 반영된다.
- 앞서 last-child는 <pre>이므로 출력되는 결과가 없었던 :last-child 선택자와 차이를 보인다.
:nth-of-type
#test1 p:nth-of-type(2n) { background : yellowgreen; color : white; }- 해당 타입의 형제관계 중 앞에서 수열번째 태그를 선택한다: <p>테스트2</p>, <p>테스트4</p>
:nth-last-of-type
#test1 p:nth-last-of-type(3) { background : skyblue; color : white; }- 해당 타입의 형제관계 중 뒤에서 수열번째 태그를 고른다.
- :nth-last-child(4)와 같은 결과를 보인다. :nth-last-child(4)는 총 여섯 태그 중 뒤에서 네 번째를 구했고, :nth-of-type은 <p> 타입 다섯 중 세 번째를 지칭한 것이다: <p>테스트3</p>
12. 문자 선택자
| 선택자::first-letter | 첫 번째 글자 선택 |
| 선택자::first-line | 첫 번째 줄 선택 |
| 선택자::after | 태그 뒤에 위치하는 공간 선택 |
| 선택자::before | 태그 앞에 위치하는 공간 선택 |
| 선택자::selection | 사용자가 드래그한 글자 선택 |
<body>
<div id="test3">
<p>.......................</p>
<p></p>
</div>
</body>- 태그 내부에서 특정 조건의 문자를 선택한다.
::first-letter
#test3 p::first-letter { font-size : 2em; }- 첫 글자에 대해 { 속성내용; } 적용한다.
- 예시에서는 font-size 속성을 두 배(2em)로 키운다.
::first-line
#test3 p::first-line { background : yellow; }- 첫 번째 줄을 선택한다.
- 웹 브라우저 창 크기를 늘이고 줄임에 따라 해당되는 길이도 달라진다.
::after
#test3 p::after { content : "@@@ 태그 뒤에 추가 @@@"; }- 태그 뒤에 위치하는 공간에 { content:값; }가 삽입된다.
- <body>에서 두 번째 <p> 태그를 비워뒀기에 ::first-line 적용돼 노란색 배경까지 적용된 모습을 보인다.
::before
#test3 p { counter-increment : num; }
#test3 p::before { content : counter(num) ". "; }
- counter-increment 속성에 대해 변수 지정하듯 num이라고 임의 저장한다.
- <p> 태그 이전에 { content : counter(num) ". "; }이 삽입돼 위처럼 출력된다.
::selection
#test3 p::selection { background: yellow; color : white; }- 사용자가 드래그하는 글자 영역에 대해 { 설정내용; }을 실시간 반영한다.
13. 부정 선택자
not(선택자)
#test4 p:nth-child(2n-1) { background : blueviolet; }
#test4 p:not(:nth-child(2n-1)) { background : orange; }- 선택자를 반대로 적용하여 기능한다.
- (선택자) 자리에는
다른 부정 선택자나가상 요소를 넣을 수 없다. - 예시 결과로서 홀수인 <p>테스트1</p>, <p>테스트3</p> 등에 대해서는 blueviolet; 색상의 배경이 생긴다: (2n-1)
- 반대로 짝수인 <p>테스트2</p>와 <p>테스트4</p>는 orange; 색상이 반영된다.
'Frontend > CSS' 카테고리의 다른 글
| [CSS3] 색상 및 배경 스타일 | 이미지 | background (0) | 2022.02.11 |
|---|---|
| [CSS3] 목록 스타일 | 불릿 기호 변경/삭제 | list-style (0) | 2022.02.11 |
| [CSS3] 텍스트 스타일 | 문단 스타일 | font | text (0) | 2022.02.11 |
| [CSS3] link | 외부 스타일시트 | 웹 폰트 | CSS 단위 (0) | 2022.02.10 |
| [CSS3] 스타일 | 스타일시트 | CSS 개요 (0) | 2022.02.10 |
