[CSS 이해하기] 선택자
목차
1. 요소 선택자
1-1. 그룹화
2. class 선택자
2-1. 다중 class
3. id 선택자
4. 속성 선택자
4-1. 단순 속성으로 선택
4-2. 정확한 속성값으로 선택
4-3. 부분 속성값으로 선택
5. 문서 구조 관련 선택자
5-1. 문서 구조의 이해
5-2. 자손 선택자
5-3. 자식 선택자
5-4. 인접 형제 선택자
5-5. 틸트 선택자
요소 선택자
선택자 중에서 가장 기본이 되는 선택자이며, 태그 선택자라고도 한다.
h1 { color:red; }
h2 { color:red; }
h3 { color:red; }
h4 { color:red; }
h5 { color:red; }
h6 { color:red; }요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어간다.
문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.
그룹화
선택자는 쉼표를 이용해서 그룹화를 할 수 있다.
h1, h2, h3, h4, h5, h6 { color:red; }위 코드는 요소 선택자의 예제 코드와 동일한 코드이다.
전체 선택자라고 하는 간편한 선택자도 있다.
* { color:red; }* 기호로 문서 내 모든 요소를 선택할 수 있다.
이렇게 선언하면 한번의 선언으로 문서 내의 모든 요소에 스타일 규칙이 적용된다.
전체 선택자는 편리하지만 성능이 좋지 않아 잘 사용하지 않는 것이 좋다.
선택자 뿐만 아니라 선언들도 그룹화가 가능하다.
h1 { color:red; font-size:2em; background-color:gray; }
선택자와 선언 동시에 그룹화도 가능하다.
h1, h2, h3, h4, h5, h6 { color:red; font-size:2em; background-color:gray; }
class 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>class</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd><span>HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt>CSS</dt>
<dd><span>CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>
</body>
</html>만약 이런 코드가 있을 때 'HTML'이라는 문자는 보라색으로, 'CSS'라는 문자는 밑줄을 선언하고 싶으면 어떻게 해야할까?
이전에 배운 요소 선택자로는 이 문제를 해결할 수 없다.
class 선택자를 배우면서 이 문제를 해결해보자.
class 선택자는 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법이다.
class 선택자를 사용하기 위해서는 HTML을 수정해서 class 속성을 추가해야 한다.
/*css*/
.foo { font-size:30px; }<!--HTML-->
<p class="foo">...</p>위 코드처럼 class 속성 값으로 'foo'라는 값을 넣었다면, CSS에서 그 값을 선택자로 지정하면 된다.
클래스 선택자를 쓸 때는 맨 앞에 .(마침표)를 넣어주어야 한다.
이렇게 되면 어느 요소든지 class 속성이 'foo'로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 된다.
그렇다면 class 선택자로 앞에서 봤던 문제를 풀어보자.
<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>class</title>
<link href="css/class.css" rel="stylesheet">
</head>
<body>
<dl>
<dt class="HTML">HTML</dt>
<dd><span class="HTML">HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt class="CSS">CSS</dt>
<dd><span class="CSS">CSS</span>는 문서의 표현을 나타냅니다.</dd>
</dl>
</body>
</html>/*class.css 파일*/
.HTML { color:purple; }
.CSS { text-decoration:underline; }
원하던 대로 'HTML'이라는 문자만 보라색으로 표현하고, 'CSS'라는 문자만 밑줄이 그어진 것을 확인할 수 있다.
다중 class
class 속성은 꼭 하나의 값만 가질 수 있는 것은 아니다.
공백으로 구분하여 여러 개의 class 값을 넣을 수 있다.
/*css*/
.foo { font-size:30px; }
.bar { color:blue; }<!--HTML-->
<p class="foo bar">...</p>위 코드처럼 작성하면 p 태그의 내용에 foo와 bar 클래스 2개의 규칙이 모두 적용된다.
<dt>JS</dt>
<dd><span>JS</span>는 문서의 동작을 나타냅니다.</dd>위 코드에서 'JS'라는 문자를 다중 class를 활용하여 보라색으로 바꾸고, 밑줄을 그어보자.
<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>class</title>
<link href="css/class.css" rel="stylesheet">
</head>
<body>
<dl>
<dt class="HTML">HTML</dt>
<dd><span class="HTML">HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt class="CSS">CSS</dt>
<dd><span class="CSS">CSS</span>는 문서의 표현을 나타냅니다.</dd>
<dt class="HTML CSS">JS</dt>
<dd><span class="HTML CSS">JS</span>는 문서의 동작을 나타냅니다.</dd>
</dl>
</body>
</html>/*class.css파일*/
.HTML { color:purple; }
.CSS { text-decoration:underline; }
id 선택자
id 선택자는 class 선택자와 비슷하다.
선택자를 쓸 때는 .(마침표) 기호 대신 #(해시) 기호를 써주면 되고,
요소에는 class 속성 대신 id 속성만 써주면 된다.
/*css*/
#bar { background-color:yellow; }<p id="bar">...</p>
<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>class</title>
<link href="css/class.css" rel="stylesheet">
</head>
<body>
<dl>
<dt class="HTML">HTML</dt>
<dd><span class="HTML">HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt class="CSS">CSS</dt>
<dd><span class="CSS">CSS</span>는 문서의 표현을 나타냅니다.</dd>
<dt class="HTML CSS">JS</dt>
<dd><span class="HTML CSS">JS</span>는 문서의 동작을 나타냅니다.</dd>
</dl>
<p id="id-selector">id 선택자는 #기호를 사용합니다.</p>
</body>
</html>/*class.css파일*/
.HTML { color:purple; }
.CSS { text-decoration:underline; }
#id-selector { font-size:30px; }
id 선택자와 class 선택자의 차이점
1. .기호가 아닌 #기호 사용
2. 태그의 class 속성이 아닌 id 속성을 참조
3. 문서 내에 유일한 요소에 사용
4. 구체성
가장 큰 차이점은 class와 달리 id는 문서 내에서 유일해야 한다는 점이다.
클래스 선택자는 여러 요소에 같은 클래스를 넣고 같은 규칙을 적용할 수 있었다.
그리고 그것이 클래스 선택자의 장점이기도 하다.
하지만 id 속성값은 문서 내에서 유일하게 사용되어야 한다.
결국, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나뿐이다.
구체성의 값도 다른데, 이 내용은 후에 다루도록 한다.
속성 선택자
선택자는 종류에 상관없이 여러 가지 선택자들을 조합하여 사용할 수 있다.
선택자를 조합하는 방식에 대해 살펴보자.
/*요소와 class의 조합*/
p.bar {...}
/*다중 class*/
.foo.bar {...}
/*id와 class의 조합*/
#foo.bar {...}첫 번째는 요소와 class를 조합한 경우이다. 이 경우 p 태그이면서 class 속성에 bar가 있어야 적용된다.
두 번째는 다중 class의 경우이다. 이 경우 class 속성에 foo와 bar 모두 있어야 적용된다.
마지막은 id와 class를 조합한 경우이다. 이 경우에는 id가 foo이며 class가 bar인 요소에 적용된다.
<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>class</title>
<link href="css/class.css" rel="stylesheet">
</head>
<body>
<dl>
<dt class="HTML">HTML</dt>
<dd><span class="HTML">HTML</span>은 문서의 구조를 나타냅니다.</dd>
<dt class="CSS">CSS</dt>
<dd><span class="CSS">CSS</span>는 문서의 표현을 나타냅니다.</dd>
<dt class="HTML CSS">JS</dt>
<dd><span class="HTML CSS">JS</span>는 문서의 동작을 나타냅니다.</dd>
</dl>
<p id="id-selector">id 선택자는 #기호를 사용합니다.</p>
</body>
</html>/*class.css파일*/
.HTML { color:purple; }
.CSS { text-decoration:underline; }
.HTML.CSS { border:1px solid; }
#id-selector { font-size:30px; }다중 class 조합으로 HTML과 CSS 클래스를 모두 가진 요소에 스타일 규칙을 적용해본다.
단순 속성으로 선택
/*css*/
p[class] { color:silver; }
p[class][id] { text-decoration:underline; }<!--HTML-->
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성의 이름이 들어간다.
요소에 해당 이름의 속성이 있다면 해당 사항이 적용된다.
위 CSS 코드는 요소 선택자와의 조합으로 이루어진 코드이다.
첫 번째는 p 태그이면서 class 속성을 가지고 있는 요소라면 color:silver 규칙이 적용된다.
두 번재는 p 태그이면서 class 속성과 id 속성을 모두 가지고 있는 요소라면 text-decoration:underline 규칙이 적용된다.
직접 브라우저에서 실행해보면 아래 결과가 나오게 된다.
정확한 속성값으로 선택
정확한 속성값으로 선택은 제목 그대로 속성의 값으로 요소를 선택한다.
선택자는 대괄호 안에 속성 이름과 속성값을 모두 적으면 된다.
/*css*/
p[class="foo"] { color:silver; }
p[id="title"] { text-decoration:underline; }p[class="foo"]는 p 태그이면서 class 속성의 값이 foo이면 적용되고,
p[id="title"]은 p 태그이면서 id 속성의 값이 title이면 적용된다.
단순 속성으로 선택할 때의 예제와 같은 코드를 사용해서 결과를 확인해보자.
부분 속성값으로 선택
부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다르다.
- [class~="bar"] : class 속성의 값이 공백으로 구분한(공백을 포함으로 해석해도 될 것 같음) "bar" 단어가 포함되는 요소 선택
- [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
- [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
- [class*="bar"] : class 속성의 값에 "bar" 문자가 포함되는 요소 선택
다른 언어에서 정규표현식에 익숙한 사람이라면 이해하기 쉬울 것 같다.
예제를 통해 어떻게 동작하는지 알아본다.
<!--HTML 파일-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>class3</title>
<link href="css/class3.css" rel="stylesheet">
</head>
<body>
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>
</body>
</html>/*class3.css파일*/
p[class~="color"] { font-style:italic; }~=는 공백을 포함한 "color"를 속성값으로 가지는 클래스가 있는 요소를 선택한다.
"color hot"과 "cool color" 클래스를 가진 1, 2번째 요소에 스타일이 적용될 것이다.
/*class3.css파일*/
p[class^="color"] { font-style:italic; }^=는 "color"가 가장 앞에 위치한 속성값을 가진 클래스가 있는 요소를 선택한다.
"color hot"과 "colorful nature" 속성값을 가진 1, 3번째 요소에 스타일이 적용될 것이다.
/*class3.css파일*/
p[class$="color"] { font-style:italic; }$=는 "color"가 가장 마지막에 위치한 속성값을 가진 클래스가 있는 요소를 선택한다.
"cool color" 속성값을 가진 2번째 요소에 스타일이 적용될 것이다.
/*class3.css파일*/
p[class*="color"] { font-style:italic; }*=는 "color"가 있는 속성값을 가진 클래스가 있는 요소를 선택한다.
세 클래스의 속성값 모두 "color"를 포함하고 있으므로 모든 요소에 스타일이 적용될 것이다.
문서 구조 관련 선택자
선택자 중에는 문서의 구조를 이용하여 요소를 선택하는 선택자도 있다.
문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자"라고 한다.
이 조합자를 이용하면 문서 구조를 이용해 좀 더 유연하게 요소를 선택하고 스타일을 적용할 수 있다.
문서 구조의 이해
<html>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
<span>CSS는 문서를 꾸며줍니다.</span>
</div>
<span>Javascript는 문서를 동작으로 제어할 수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹사이트를 제작할 수 있습니다.</p>
</body>
</html>위 HTML 코드에서 각 요소들을 짚어가면서 부모와 자식, 조상과 자손, 형제의 관계를 살펴보자.
우선 위 코드에서 요소들을 트리 형태로 그려본다.
부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나 뿐이다.
현재 요소에서 위로 한칸 올라갔을 때 만나는 요소라고 이해하면 쉽다.
위 트리에서 div의 부모 요소는 body이다.
자식 요소는 부모 요소의 반대라고 생각하면 되고, 자식 요소는 여러 개일 수 있다.
현재 요소에서 아래로 한칸 내려갔을 때 만나는 요소들이라고 이해하면 쉽다.
위 트리에서 body의 자식 요소는 div, span, p이다.
조상과 자손은 부모와 자식의 관계와 비슷하다.
조상과 자손을 부모와 자식 관계의 확장이라고 생각하면 된다.
조상 요소는 그 요소를 포함하는 모든 요소로, 부모 요소를 포함하여 여러 개일 수 있다.
위 트리에서 h1의 조상 요소는 div, body, html이다.
자손 요소는 조상 요소와 반대로, 그 요소가 포함하고 있는 모든 요소가 자손 요소이다.
위 트리에서 body의 자손 요소는 div, span, p, h1이다.
같은 부모 요소를 가지는 요소들은 서로 형제 관계에 있다.
위 트리에서 div와 span은 서로 형제 관계이다.
형제 관계 중에는 인접한 관계도 있는데,
형제 관계에 있는 요소 중 바로 뒤에 이어 나오는 요소를 인접한 요소라고 한다.
위 트리에서 span과 p는 서로 인접 형제 관계이다.
자손 선택자
div span { color:red; }자손 선택자는 선택자 사이에 아무 기호 없이 공백으로 구분한다.
이 선택자는 div의 자손 요소인 span을 선택하는 선택자이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 구조 관련 선택자</title>
<link href="css/자손_선택자.css" rel="stylesheet">
</head>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
<span>CSS는 문서를 꾸며줍니다.</span>
</div>
<span>Javascript는 문서를 동작으로 제어할 수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹사이트를 제작할 수 있습니다.</p>
</body>
</html>/*자손_선택자.css파일*/
div span { color: red; }
자식 선택자
div > span { color:red; }자식 선택자는 선택자 사이에 꺽쇠 기호를 넣는다.
꺽쇠 기호와 선택자 사이에 공백은 없어도 된다.
이 선택자는 div의 자식 요소인 span을 선택하는 선택자이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 구조 관련 선택자</title>
<link href="css/자식_선택자.css" rel="stylesheet">
</head>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
<span>CSS는 문서를 꾸며줍니다.</span>
</div>
<span>Javascript는 문서를 동작으로 제어할 수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹사이트를 제작할 수 있습니다.</p>
</body>
</html>/*자식_선택자.css파일*/
div > span { color:red; }
인접 형제 선택자
div + span { color:red; }인접 형제 선택자는 선택자 사이에 + 기호를 넣는다.
자식 선택자와 마찬가지로 공백은 없어도 된다.
인접 형제 선택자는 형제 관계이면서 바로 뒤에 인접해있는 요소를 선택하는 선택자이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 구조 관련 선택자</title>
<link href="css/인접_형제_선택자.css" rel="stylesheet">
</head>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
<span>CSS는 문서를 꾸며줍니다.</span>
</div>
<span>Javascript는 문서를 동작으로 제어할 수 있습니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹사이트를 제작할 수 있습니다.</p>
</body>
</html>/*인접_형제_선택자.css파일*/
div + span { color:red; }
틸트 선택자
div ~ span { color:red; }틸트 선택자는 선택자 사이에 ~ 기호를 넣는다.
자식 선택자와 마찬가지로 공백은 없어도 된다.
틸트 선택자는 인접 형제가 아닌 모든 형제 요소를 선택하는 선택자이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>문서 구조 관련 선택자</title>
<link href="css/틸트_선택자.css" rel="stylesheet">
</head>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
<span>CSS는 문서를 꾸며줍니다.</span>
</div>
<span>Javascript는 문서를 동작으로 제어할 수 있습니다.</span>
<br>
<span>틸트 선택자는 형제 관계의 모든 요소에 스타일을 적용합니다.</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹사이트를 제작할 수 있습니다.</p>
</body>
</html>/*틸트_선택자.css*/
div ~ span { color:red; }
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [CSS 이해하기] 구체성 (0) | 2022.12.15 |
|---|---|
| [CSS 이해하기] 가상 선택자 (0) | 2022.12.15 |
| [CSS 이해하기] CSS 문법과 적용 (0) | 2022.12.13 |
| [CSS 이해하기] CSS 소개 (0) | 2022.12.13 |
| [콘텐츠 모델/시멘틱 마크업/블록&인라인] 블록&인라인 (0) | 2022.12.12 |
