① .class에 대해서
HTML에서 class 속성은 HTML 요소가 포함되는 클래스를 명시하기 위해 사용됩니다. 클래스를 지정함으로써 같은 스타일을 여러 HTML 요소들에 쉽게 적용할 수 있습니다. CSS 속성을 정의할 때 특정 클래스를 선택하려면, 클래스 이름 앞에 점 (.) 하나를 붙이면 됩니다.
클래스 이름은 알파벳으로 시작해야 되며, 화이트스페이스는 이름에 포함될 수 없습니다.
HTML 요소는 두 개 이상의 클래스에 포함 될 수 있는데, 이 때는 클래스를 정의할 때 띄어쓰기로 구분하면 됩니다.
<div class="ex1 ex2 ex3">Multiple class</div>
② #id에 대해서
HTML에서 id 속성은 하나의 특정 HTML 요소를 지정할 때 사용합니다. CSS 속성을 정의할 때 특정 아이디를 선택하려면, 아이디 이름 앞에 샵 (#)을 붙이면 됩니다.
class와는 다르게, 같은 HTML 파일에서 특정 id를 중복해서 사용되는 것은 불가능합니다. JavaScript의 getElementById()와 같은 함수가 사용되면 충돌이 나는 것이 대표적인 예시입니다. 안전성과 호환성을 위해서라도 id는 고유한 속성으로 사용해야 합니다.
다른 클래스라면 같은 아이디를 사용해도 될 것 같지만 그렇지 않습니다. 그 이유는 클래스가 HTML 요소를 구분짓는 집합의 역할도 하지만, 스타일을 적용하기 위해서 만들어 진 개념이기 때문입니다. 즉, 아이디와는 달리 클래스는 식별자가 아니기 때문입니다.
③ CSS 선택자 우선순위
한 HTML 요소에 CSS를 적용할 때는 선택자라는 것을 사용합니다. 앞서 언급된 클래스의 온점이나 아이디의 샵이 그 예시입니다. CSS에는 아래와 같은 선택자들이 존재하며, 각각 가지고 있는 우선순위 순서로 적용됩니다. 만약 같은 우선순위를 가진 선택자끼리 충돌한다면 나중에 정의된 스타일이 적용됩니다.
| 우선순위 | 선택자 유형 |
| 0 | !important |
| 1 | inline 방식으로 작성 |
| 2 | id 선택자 |
| 3 | class 선택자 |
| 4 | 태그 선택자 |
| 5 | 전체 선택자 |
id와 class, 그리고 선택자들 사용 예시입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#id1 {
color: red !important;
}
.color_blue {
color: blue;
}
div {
background-color: grey;
}
* {
color: green;
}
</style>
</head>
<body>
<div class="color_blue" id="id1">Sentence 1</div>
<div class="color_blue" id="id2">Sentence 2</div>
<div class="color_blue" id="id3">Sentence 3</div>
<div>Sentence 4</div>
<p>Sentence 5</p>
</body>
</html>'Frontend > HTML, CSS' 카테고리의 다른 글
| [HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편 (0) | 2023.02.09 |
|---|---|
| [HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너 편 (0) | 2023.01.07 |
| [HTML, CSS] form 태그 (0) | 2022.10.08 |
| [HTML/CSS] 시맨틱 태그 (Semantic Tag) (0) | 2022.09.14 |
| [HTML/CSS] 기본 레이아웃 (0) | 2022.09.13 |
