ID 선택자

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

ID 선택자는 id 속성 값을 기반으로 특정 HTML 요소를 대상으로 지정하는 데 사용됩니다. 여러 요소의 스타일을 지정하는 데 사용할 수 있는 클래스 선택자와 달리, ID 선택자는 고유하며 페이지 내의 단 하나의 요소에만 적용할 수 있습니다. 따라서 다른 요소에는 적용되지 않아야 하는 특정 스타일을 개별 요소에 적용할 때 유용합니다.

CSS에서 특정 ID를 가진 요소를 타겟팅하려면, 해시 기호(#) 뒤에 ID 값을 붙여서 사용합니다. ID 선택자를 사용하는 기본 구문은 다음과 같습니다:

#idname {
    property: value;
}

예를 들어:

#intro {
    color: blue;
    font-size: 20px;
}

이 예제에서 ID 선택자 #intro는 ID가 "intro"인 요소를 대상으로 합니다. 선언문은 이 요소의 텍스트 색상을 파란색으로, 글꼴 크기를 20픽셀로 설정합니다.

챌린지

쉬움

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

<div> 요소에 값이 "special"인 id 속성을 추가하세요.
ID가 "special"인 요소를 대상으로 하는 ID 선택자를 사용하여 CSS 규칙을 작성하세요. 이 요소의 배경색을 "yellow"로, 텍스트 색상을 "red"로 설정하세요.

치트 시트

ID 선택자는 id 속성을 사용하여 특정 HTML 요소를 대상으로 합니다. ID 선택자는 고유하며 페이지 내의 단일 요소에만 적용할 수 있습니다.

해시 기호(#) 뒤에 ID 값을 붙여 사용합니다:

#idname {
    property: value;
}

예시:

#intro {
    color: blue;
    font-size: 20px;
}

직접 해보기

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