타입 선택자

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 11번째.

타입 선택자(요소 선택자 또는 태그 선택자라고도 함)는 태그 이름을 기반으로 HTML 요소를 대상으로 합니다. 이는 CSS에서 가장 단순하고 기본적인 선택자 중 하나입니다.

타입 선택자를 사용하기 위한 기본 구문은 다음과 같습니다:

tagname {
    property: value;
}

tagname: 스타일을 지정하려는 HTML 태그의 이름입니다 (예: p, h1, div).
property: 설정하려는 CSS 속성입니다 (예: color, font-size).
value: 속성에 설정하려는 값입니다 (예: blue, 16px).

예를 들어:

p {
    color: blue;
    font-size: 16px;
}

이 예제에서 타입 선택자 p는 HTML 문서의 모든 <p> (단락) 요소를 대상으로 합니다. 선언부는 모든 단락의 텍스트 색상을 파란색으로, 글꼴 크기를 16픽셀로 설정합니다.

챌린지

쉬움

제목(<h1>, <h2>), 단락(<p>), 그리고 구역(<div>)을 포함한 다양한 요소가 포함된 HTML 문서가 주어집니다. 여러분의 작업은 타입 선택자(type selectors)를 사용하여 이러한 요소의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:

모든 <h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. <h1> 제목의 텍스트 색상을 "darkred"로 설정하세요.
모든 <h2> 요소를 대상으로 하는 CSS 규칙을 작성하세요. <h2> 제목의 텍스트 색상을 "green"으로 설정하세요.
모든 <p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 단락의 텍스트 색상을 "blue"로, 글꼴 크기를 "18px"로 설정하세요.
모든 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 구역의 배경색을 "lightblue"로 설정하세요.

직접 해보기

<html>
<head>
    <title>Type Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>