JunO3O
선택자
선택자
2023. 3. 21. 03:02ㆍCSS
CSS 선택자
# 선택자
ㅁ 특정 HTML 태그를 선택할 때는 선택자를 사용합니다.
ㅁ 선택자를 사용해 특정 HTML 태그를 선택하면 선택한 태그에 원하는 스타일이나 스크립트를 적용할 수 있습니다.
ㅁ 아래와 같이 선택자, 스타일 속성, 스타일 값을 지정합니다.
h1 { /* h1 은 선택자입니다. */
color : green; /* color 은 속성입니다. */
} /* green 은 스타일 값 입니다. */
ㅁ style 태그 내부에 css 블록을 넣어 작성한 코드를 스타일시트라고 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color : green;
}
</style>
</head>
<body>
<h1> CSS 선택자를 공부합니다. </h1>
</body>
</html>
ㄴ> h1 태그의 color 스타일 속성에 스타일 값을 green으로 준다 ! 라는 뜻입니다.
# 선택자 종류
ㅁ CSS 선택자는 스타일시트뿐만 아니라 자바스크립트에서도 사용하는데 너무 많은 관계로 자주 사용하는 선택자 종류 외에는 https://www.w3.org/TR/css/ 를 참고하거나 구글링하는 것이 편합니다.
| 종류 | 형태 | 사용 예 |
| 전체 선택자 | * | * |
| 태그 선택자 | 태그 | h1 |
| 아이디 선택자 | #아이디 | #id |
| 클래스 선택자 | .클래스 | .header |
| 후손 선택자 | 선택자 선택자 | header h1 |
| 자손 선택자 | 선택자 > 선택자 | header > h1 |
'CSS' 카테고리의 다른 글
| 반응 / 상태 / 구조 선택자 (0) | 2023.03.21 |
|---|---|
| 후손 선택자 / 자손 선택자 (0) | 2023.03.21 |
| 속성 선택자 (0) | 2023.03.21 |
| 기본 선택자 (0) | 2023.03.21 |
| 플렉서블 박스 레이아웃 (0) | 2023.03.21 |