ID 선택자.
HTML 전역속성인 id 에를 활용하여 해당 요소(element)에 만 스타일을 적용할 수 있는 방법으로 ID 선택자 가 사용됩니다. ID 선택자의 문법은 하기와 같습니다.
#id이름{
/* 스타일 지정 */
}
그럼 ID선택자 예제를 만들어 볼까요?
[index.html]
h2 와 p 태그의 전역속성으로 id를 설정하고 각각 이름을 지정합니다. CSS 에서 ID 선택자를 사용하기 위함 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML Page</title>
<link rel="stylesheet" href="/CSS/main.css">
</head>
<body>
<div>
<h2 id="myHeading">This is a myHeading.</h2>
<p id="myParagraph">This is a myParagraph.</p>
</div>
</body>
</html>CSS 파일에서는 ID선택자 문법규칙에 따라서 #ID이름 과 함께 스타일을 표기 합니다.
이렇게 설정하면 해당 ID에만 스타일 시트가 설정 됩니다.
[main.css]
/* CSS 코드 */
#myHeading {
color: blue;
}
#myParagraph {
font-size: 18px;
}HTML 과 CSS 의 ID 선택자를 사용한 결과 화면 입니다.
참고로, ID선택자 는 클래스 선택자와 달리 HTML 코드내에서 해당 ID 이름를 가진 하나의 요소에만 스타일 적용할 수 있습니다. 여러 요소에 적용을 위해서는 클래스 선택자를 특별히 한 요소들에만 적용을 하기위해서는 ID선택자를 잘 활용하는 것이 좋습니다.
오늘은 CSS ID선택자에 대해서 알아보았습니다. 감사합니다.
반응형
'앱 만들기 > CSS' 카테고리의 다른 글
| CSS Basic Combinator (일치선택자) (2) | 2023.06.07 |
|---|---|
| CSS 기본 선택자 네가지 (0) | 2023.06.06 |
| CSS 클래스 선택자 란? (5) | 2023.06.03 |
| CSS 타입 선택자(Type selector) 란? (2) | 2023.06.02 |
| CSS 전체선택자 란? (2) | 2023.06.01 |
댓글