728x90
HTML의 태그에 id와 class를 지정하면서 사용법과 차이점을 정리해보려고 한다.
먼저 id와 class의 사용법을 알아보자.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./TEST.css">
</head>
<body>
<div class="menu">
<p id="btn">ID를 지정함</p>
<p>ID를 지정하지 않음</p>
</div>
</body>
</html>
HTML에서 id와 class는 위와 같이 사용할 수 있다. 이제 위의 문서에 CSS를 입혀보자.
class에 css를 입힐 때는 ' . '을 사용하여 .(class이름)으로 css 속성을 추가한다.
id는 '#'을 사용하여 #(id이름)으로 css 속성을 추가한다.
.menu{
background-color:#006666;
}
#btn{
background-color:#ff9933;
color:#fff;
}
결과는 다음과 같다.
div에 menu라는 class를 지정 후 청록색으로 지정하였다.
그리고 div에 속해있는 id가 btn인 p태그는 주황색으로 지정하였다.
여기서 우선순위가 id>class>tag라는 것을 알 수 있다. 좀 더 자세한 것이 우선순위가 높다.
id와 class를 사용할 때 하나의 태그에 id는 한 번만 사용할 수 있고 class는 여러번 지정할 수 있다.
아직 id와 class에 대해 알아볼 것이 많지만 여기서 id와 class를 각각 언제 사용하는지 짐작할 수 있다.
id는 부모 태그와 관계없이 개별적으로 스타일을 적용하려고 할 때 사용하며 class는 여러 개의 태그에 동일한 속성을 지정할 때 각각의 태그에 동일한 이름의 class를 지정하여 사용한다.
※아직 HTML과 CSS로 많은 페이지를 만들어보지 않았고 경험이 쌓였을 때 더욱더 자세하게 쓸 예정이다.
'WEB' 카테고리의 다른 글
| [HTML] 시맨틱 태그에 대하여 (0) | 2021.01.10 |
|---|---|
| [CSS] Box Model 이해하기 (0) | 2021.01.10 |
| [CSS] position 이해하기 (0) | 2021.01.08 |
| [HTML] <meta> 태그에 대해서 (0) | 2021.01.04 |
| [HTML] <!DOCTYPE>을 선언하는 이유 (0) | 2020.12.31 |