안녕하세요. 오늘은 CSS의 선택자(Selectors)에 알아볼게요.
CSS Selectors
스타일 규칙은 태그뿐만 아니라 웹 문서의 어떤 요소에도 적용이 가능하기 때문에
선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 기능이에요.
선택자의 종류
전체 선택자 (universal selector)
전체 선택자는 스타일을 문서의 모든 요소에 적용할 때 사용해요.
주로 하위 요소에 스타일을 한꺼번에 적용할 때 사용하고, 별표(*)를 사용해요.
/*기본형*/
* { 속성: 값; ... }+) 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이 여백을 두는 속성은
마진(margin) / 패딩(padding) 이 있어요.
* {
margin: 0;
}
타입 선택자 (type seletor)
타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용함으로
타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용해요.
( = 태그 선택자(tag selector) = 요소 선택자(element selector))
/*기본형*/
태그명 { 스타일 규칙 }
// html
<!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>Selectors</title>
<link rel="stylesheet" href="./selector.css">
</head>
<body>
<h1>롯데 자이언츠 선발 라인업</h1>
<p>1번 타자 차은우</p>
<p>2번 타자 송강</p>
<p>3번 타자 박보검</p>
<p>4번 타자 서강준</p>
<p>5번 타자 공유</p>
<p>6번 타자 임시완</p>
<p>7번 타자 박서준</p>
<p>8번 타자 이수혁</p>
<p>9번 타자 이동욱</p>
</body>
</html>
// css
p {
font-style: italic;
}
클래스 선택자 (class selector)
클래스 선택자는 특정 부분에 스타일을 적용함으로서
클래스 이름을 사용하여 다른 선택자와 구별할 수 있어요.
클래스 이름 앞에 마침표(.)를 반드시 붙여주셔야 해요.
+) 클래스 스타일은 클래스 선택자를 사용해 만든 스타일이에요.
클래스 스타일을 적용할 수 있으려면
태그 안에 class="클래스명":class 속성을 사용하여 지정해요.
/*기본형*/
.클래스명 { 스타일 규칙 }
// html
<!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>Selectors</title>
<link rel="stylesheet" href="./selector.css">
</head>
<body>
<h1>롯데 자이언츠 선발 라인업</h1>
<p class="oddNumber">1번 타자 차은우</p>
<p>2번 타자 송강</p>
<p class="oddNumber">3번 타자 박보검</p>
<p>4번 타자 서강준</p>
<p class="oddNumber">5번 타자 공유</p>
<p>6번 타자 임시완</p>
<p class="oddNumber">7번 타자 박서준</p>
<p>8번 타자 이수혁</p>
<p class="oddNumber">9번 타자 이동욱</p>
</body>
</html>
// css
.oddNumber {
color: tomato;;
}
그룹 선택자 (Group Style)
그룹 선택자는 같은 스타일 규칙을 사용하는 요소를 묶어서 적용해요.
여러 선택자에서 같은 스타일 규칙을 사용하는 경우
쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의해요.
/*기본형*/
선택자1, 선택자2 { 스타일 규칙 }
// html
<!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>
<link rel="stylesheet" href="./css/selector_group.css">
</head>
<body>
<h2>04월 08일 롯데 자이언츠 선발 투수</h2>
<p>댄 스트레일리</p>
</body>
</html>
// css
h2, p {
color: tomato;;
}
p {
font-style: italic;
}
여기까지 CSS의 선택자에 알아봤는데요.
선택자는 이것 외에 더 많아서 다음 포스팅에 더 알아볼게요!
'Frontend > CSS' 카테고리의 다른 글
| CSS Text / List / Table Style (2) (0) | 2025.10.04 |
|---|---|
| CSS Text / List / Table Style (1) (0) | 2025.10.02 |
| CSS Selectors (3) (0) | 2025.09.30 |
| CSS Selectors (2) (0) | 2025.09.27 |
| CSS (0) | 2025.09.23 |