CSS 선택자
CSS 선택자(selector)는 HTML에 스타일을 적용할 때 HTML 요소를 지정하는 역할을 합니다. 예를 들어 p 태그에 스타일을 적용하고 싶을 때 p태그를 선택합니다. 이때 p가 선택자가 되는 것입니다.
p {
color: color;
}
사례
VSCode에서 코딩한 내용을 옮겨봅니다.
안녕하세요
소스 코드
index.html 소스 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>
</head>
<body>
<h1>안녕하세요</h1>
</body>
</html>style.css 내용은 아래와 같습니다.
h1{
color:red;
}
CSS 선택자의 종류
CSS 선택자의 종류에는 5가지 방법이 있습니다.
- 전체 선택자
- 유형 선택자
- 아이디 선택자
- 클래스 선택자
- 복합 선택자
1. 전체 선택자는 모든 HTML 문서에 스타일을 적용합니다. 특정 태그 대신 '*' 기호를 사용합니다.
2. 유형 선택자는 특정 태그를 지정해 작성해서 스타일을 적용합니다. '타입 셀렉터'라고도 합니다.
3. 아이디 선택자는 아이디로 요소를 식별하는 선택자입니다. 모든 태그 요소 중에서 특정 아이디 하나를 선택해서 스타일을 적용합니다. 태그 유형 대신 선언한 아이디로 요소를 선택할 수 있습니다. 아이디를 지정하는 방법은 다음과 같습니다. HTML에서 p 태그를 마감하기 전에 id="아이디" 형식으로 지정합니다. 여기서 "아이디"는 중복되지 않는 고유한 값입니다. 이때 작은따옴표와 큰따옴표 어느 것을 사용해도 관계 없습니다. 그리고 아이디 선택자의 중요한 특징은 CSS에서 아이디 선택자를 사용하여 스타일링할 때는 '#'을 아이디 앞에 붙여야 합니다.
<p id="아이디">텍스트</p>
<style>
#아이디 {
속성
}
</style>4. 클래스 선택자는 특정 클래스에 속하는 요소를 선택합니다. 여기서 클래스란 요소의 목록을 말합니다. 아이디와 비슷하지만 클래스는 여러 태그를 하나의 클래스로 묶을 수도 있고 태그 하나에 여러 클래스 이름을 붙여줄 수도 있습니다.
5. 복합 선택자는 부모와 자식 태그가 복합적으로 쓰입니다. 서로의 관계와 위치를 유용하게 결합하는 방식을 제공합니다. 서로의 관계에는 '자손 선택자', '자식 선택자', '인접 형제 선택자', '일반 형제 선택자'가 있습니다. 그중 가장 많이 사용하는 것은 '자손 선택자'입니다.
정리
CSS는 Cascading Style Sheets의 머리글자로 사용자에게 보여지는 페이지를 꾸미는 역할을 합니다. CSS 선택자는 5가지 유형이 있습니다.
'CSS' 카테고리의 다른 글
| CSS 사용하는 3가지 방법 (0) | 2023.01.08 |
|---|---|
| CSS가 왜 필요할까? (0) | 2023.01.06 |
