728x90
반응형
SMALL
셀렉터 (Selectors)
선택자란 말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다.
전체 셀렉터 (Universal Selector)
HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다 (head 요소도 포함).
<!DOCTYPE html>
<html>
<head>
<style>
/* 모든 요소를 선택 */
* { color: red; }
</style>
</head>
<body>
<h1>Heading</h1>
<div>
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
<p>paragraph 3</p>
</body>
</html>
태그 셀렉터 (Type Selector)
지정된 태그명을 가지는 요소를 선택한다.
<!DOCTYPE html>
<html>
<head>
<style>
/* 모든 p 태그 요소를 선택 */
p { color: red; }
</style>
</head>
<body>
<h1>Heading</h1>
<div>
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
<p>paragraph 3</p>
</body>
</html>
ID 셀렉터 (ID Selector)
ID 속성 값을 지정하여 일치하는 요소를 선택한다. ID 속성 값은 중복될 수 없는 유일한 값이다.
<!DOCTYPE html>
<html>
<head>
<style>
/* ID 속성 값이 p1인 요소를 선택 */
#p1 { color: red; }
</style>
</head>
<body>
<h1>Heading</h1>
<div class="container">
<p id="p1">paragraph 1</p>
<p id="p2">paragraph 2</p>
</div>
<p>paragraph 3</p>
</body>
</html>
클래스 셀렉터 (Class Selector)
class 속성 값을 지정하여 일치하는 요소를 선택한다. class 속성 값은 중복될 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
/* class 속성 값이 container인 모든 요소를 선택 */
/* color 속성은 자식 요소에 상속된다. */
.container { color: red; }
/* not supported in IE */
#p2 { color: initial; }
</style>
</head>
<body>
<h1>Heading</h1>
<div class="container">
<p id="p1">paragraph 1</p>
<p id="p2">paragraph 2</p>
</div>
<p>paragraph 3</p>
</body>
</html>
속성 셀렉터 (Attribute Selector)
지정된 속성을 갖는 모든 요소를 선택한다.
<!DOCTYPE html>
<html>
<head>
<style>
/* a 요소 중에 href 속성을 갖는 모든 요소 */
a[href] { color: red; }
</style>
</head>
<body>
<a href="http://www.google.com" target="_blank">google.com</a><br>
<a href="http://www.naver.com" target="_top">naver.com</a>
</body>
</html>
728x90
반응형
LIST
'Programming > Website' 카테고리의 다른 글
| [Website] 가상 클래스 (Pseudo Classes) (0) | 2023.05.26 |
|---|---|
| [Website] CSS 위치 지정 및 배경 (0) | 2023.05.26 |
| [Website] CSS (Cascading Style Sheets) (1) (0) | 2023.05.25 |
| [Website] HTML 태그 (3) (0) | 2023.05.25 |
| [Website] HTML 태그 (2) (0) | 2023.05.25 |
