0034 CSS 요소 선택자(element selector)
선택자는 CSS의 규칙(Rule)에서 어떤 HTML 요소(element)에 규칙을 적용할지 지정하는 역할을 하는 것으로 CSS 뿐만 아니라 jQuery에서도 사용하고 있어 알아두면 매우 유용하다.
선택자는 요소의 이름, 아이디(id), 클래스(class), 속성(attribute) 등 그 외에 수많은 방식으로 HTML 요소(element)를 선택하지만 이번에는 가장 기본적인 요소 선택자(element selector)를 살펴보자.
요소 선택자(element selector)는 요소의 이름으로 해당 요소를 선택한다. 가령, <p> 요소는 p로 <body> 요소는 body로 <h1> 요소는 h1으로 선택한다.
규칙의 선택자를 요소로 하면 해당 웹페이지의 모든 요소들은 일괄적으로 CSS 규칙이 적용을 받는다. 동일한 요소에서 스타일을 다르게 하는 방법은 나중에 논하도록 하자.
우선, 다음과 같이 
0034_1.html을 작성해보자.
<!DOCTYPE html>
<html>
<head>
<title>요소 선택자</title>
<style></style> ← 내부가 비어 있음
</head>
<body>
<h1>h1 블록</h1>
<h2>첫 번째 h2 블록</h2>
<p>p블록 시작 <br /><br />p블록 끝</p>
<h2>두 번째 h2 블록</h2>
<p>2번 p블록 시작 <br /><br />2번 p블록 끝</p>
</body>
</html>
<head> 섹션 내의 <style> 요소에는 어떤 CSS 규칙도 없는 상황이다. 실행해보면 다음과 같다.
CSS 규칙이 전혀 없어도 브라우저가 자체적인 기준으로 HTML 문서를 최소한으로 스타일링하고 있다. 즉, 글꼴(font)과 글자 크기 등이 설정되어 있다.
이번에는 요소를 선택하여 CSS 규칙을 적용해보자.
HTML 문서에서 눈에 보이는 부분을 담당하는 영역인 <body>도 HTML의 요소이므로 이에 적용하는 CSS 규칙을 만들어 볼 수 있을 것이다. 그렇다면 요소 선택자는 body가 될 것이다. <style></style> 사이에 다음과 같이 넣고 이름을 바꿔 0034_2.html로 작성하여 실행해보자.
body {
background-color: black;
color: white;
font-family: Arial;
}
위의 구문을 말로 옮기면 이렇다. <body> 요소에 배경색(background-color)은 검게(black), 글자색(color)은 하얗게(white), 글꼴(font-family)은 Arial로 적용한다.
0034_2.html 파일을 실행한 결과를 처음의 0034_1.html과 같이 놓고 비교해보았다.
<body> 요소가 보이는 영역 전체이므로 웹페이지의 모든 배경색이 전부 검게 칠해진다. <h1>, <h2>, <p> 요소 모두 배경색(background-color)이 검게(black) 칠해지고 글자색(color)은 하얗게(white) 글꼴(font-family)은 Arial로 변경되었다.
이는 <body> 요소에 적용된 규칙이 <body> 요소 내에 중첩(nesting)된 <h1>, <h2>, <p> 요소들에게 상속되기 때문이다. 자세하게 살피면 상속되는 속성이 있고 상속되지 않는 속성이 있지만 일단, 위의 예문에서 <body> 요소에 적용된 규칙은 모두 상속되고 있다.
만일, 상속된 속성을 사용하지 않고 각각의 <h1>, <h2>, <p> 요소들을 <body> 요소와 다르게 스타일링을 하고 싶다면 해당 요소를 선택자로 가진 규칙을 작성하여 상속을 재정의 하면 된다.
이번에는 <h1>, <h2>, <p> 요소에 CSS 규칙을 작성하여 <style></style> 사이에 다음과 같이 넣고 0034_3.html로 작성하여 실행해보자.
body {
background-color: black;
color: white;
font-family: Arial;
}
h1 {
background-color: white;
color: black;
}
h2 {
background-color: white;
color: black;
}
p {
background-color: yellow;
color: blue;
font-family: serif;
}
실행 결과는 다음과 같다.
<h1>과 <h2> 요소는 배경색(background-color)이 검은색에서 하얀색(white)으로 바뀌었고 글자색(color)은 흰색에서 검은색(black)으로 변했다. 글꼴(font)은 별도로 지정한 바가 없으므로 <body> 요소의 Arial을 그대로 유지하고 있다.
<p> 요소는 배경색(background-color)이 노랗게(yellow) 바뀌었고 글자색(color)은 파랗게(blue) 변했으며 글꼴(font)은 serif로 변경되었다.
즉, <body> 요소에 적용된 규칙이 <body> 요소 내부의 <h1>, <h2>, <p>에 적용된 규칙과 같은 속성(property)에서 서로 다른 속성값을 갖는 경우 각각의 요소에 적용된 규칙의 속성이 우선적으로 적용되는데 이것을 이용하여 상속을 재정의 한다.
위에서 <h1>과 <h2> 요소의 CSS 규칙이 동일하다. 이런 경우에는 다음과 같이 요소들끼리 쉼표로 구분하여 규칙을 한꺼번에 작성할 수 있다.
h1, h2 {
background-color: white;
color: black;
}
CSS에서 border 속성(property)은 블록 주위에 경계선을 넣는 속성으로 다음과 같이 쓴다.
h1, h2 {
background-color: white;
color: black;
}
h2 { border: 5px solid red; }
작성한 0034_4.html파일을 실행하면 다음과 같다.
Anki 파일
아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다.
Ankilog 파일: 
0034 CSS 요소 선택자(element selector).apkg
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0036 External 방식의 CSS 적용 (0) | 2018.12.11 |
|---|---|
| 0035 External CSS 적용을 위한 link 요소 (0) | 2018.12.10 |
| 0033 HTML에 CSS 적용하고 기본 문법 알아보기 (0) | 2018.12.06 |
| 0032 CSS 소개 (0) | 2018.12.04 |
| 0031 약어(character entity)로 특수문자 표시하기 (0) | 2018.12.03 |