ID 선택자
Coddy의 CSS 선택자 코스 레슨 — 15개 중 5번째.
ID 선택자는 특정 ID 속성을 가진 요소를 선택하는 CSS 선택자의 한 종류입니다. ID 속성은 HTML 요소에 고유하게 식별하기 위해 추가할 수 있는 사용자 정의 속성입니다.
특정 ID를 가진 요소를 선택하려면 해시(#) 기호 뒤에 ID 값을 사용합니다. 예를 들어, #my-id 선택자는 ID가 my-id인 요소를 선택합니다.
다음은 웹 페이지의 스타일을 지정하기 위해 ID 선택자를 사용하는 예시입니다:
#my-id {
color: red;
font-size: 2em;
}요소에 id를 추가하려면 다음과 같이 작성합니다:
<div id="my-id"></div>클래스 선택자와 마찬가지로, 이 CSS 규칙은 ID가 my-id인 요소의 색상을 빨간색으로, 글꼴 크기를 2em으로 스타일링합니다.
챌린지
쉬움다음은 ID 선택자에 대한 이해도를 테스트하기 위한 연습 문제입니다:
- 두 개의
div요소를 포함하는 웹 페이지를 만드세요. - 첫 번째
div요소에 IDmy-id를 부여하세요. - ID 선택자를 사용하여 ID가
my-id인div요소의 색상을 검은색이 아닌 다른 색으로 지정하고 글꼴 크기를 30px로 설정하세요.
직접 해보기
<html>
<head>
<title>ID Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>