선택자 소개
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 10번째.
CSS에서 선택자(selectors)는 스타일을 적용하고자 하는 HTML 요소를 선택하는 데 사용되는 패턴입니다. 선택자는 어떤 요소에 스타일이 적용될지를 결정하므로 CSS 규칙에서 매우 중요한 부분입니다.
다양한 유형의 선택자가 있으며, 각 선택자는 서로 다른 방식으로 요소를 타겟팅합니다. 선택자를 이해하는 것은 CSS를 마스터하고 잘 스타일링된 웹 페이지를 만드는 데 필수적입니다.
선택자가 있는 기본적인 CSS 규칙은 다음과 같습니다:
selector {
property: value;
}selector: 스타일을 적용할 HTML 요소를 대상으로 합니다.property: 변경하려는 스타일 속성입니다 (예: color, font-size).value: 속성에 설정하려는 값입니다 (예: blue, 16px).
예를 들어:
p {
color: blue;
font-size: 16px;
}이 예제에서 p는 선택자이며, 모든 단락 요소를 대상으로 합니다. 선언문은 모든 단락의 텍스트 색상을 파란색으로, 글꼴 크기를 16픽셀로 설정합니다.
챌린지
쉬움HTML 문서가 주어집니다. 다음 속성을 사용하여 문서를 스타일링하기 위해 내부 CSS를 사용하세요:
- 모든
h1제목의 배경색을green으로 설정하세요. - 모든
h1제목의 글자 색상을white로 설정하세요. - 모든 단락(
p)의 글꼴 크기를18px로 설정하세요.
이를 위한 시작 CSS 코드가 제공됩니다.
치트 시트
CSS 선택자는 스타일을 지정하려는 HTML 요소를 선택하는 데 사용되는 패턴입니다. 스타일이 어떤 요소에 적용될지를 결정합니다.
기본 CSS 규칙 구조:
selector {
property: value;
}selector: 스타일을 지정할 HTML 요소를 대상으로 합니다property: 변경하려는 스타일 속성입니다 (예: color, font-size)value: 속성에 설정하려는 값입니다 (예: blue, 16px)
모든 단락 요소를 대상으로 하는 예시:
p {
color: blue;
font-size: 16px;
}직접 해보기
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
h1 {
}
p {
}
</style>
</head>
<body>
<h1>John Doe</h1>
<p>Web Developer</p>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
