HTML - Class 와 Id(태그의 정체성을 부여해 주다)
컴퓨터/HTML&CSS
728x90
반응형
HTML에서 Class와 Id 속성
HTML 문서는 수많은 태그들로 이루어집니다. 예를 들어 div 태그가 10개가 있다고 가정한다면 그중 특정 div태그를 찾는 것은 쉽지 않습니다. 이때 class와 id 속성을 이용하면 손쉽게 태그를 정의하고 접근하여 사용할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div id="Mycity">
<h2>Seoul</h2>
<p>Seoul is the capital of Korea.</p>
</div>
</body>
</html>Class vs Id 속성의 차이점
두 가지 속성 모두 특정 태그들을 정의할 수 있다고 말씀드렸습니다. 이때 가장 큰 차이점이 있습니다.
class 속성은 중복해서 여러 태그를 묶어서 정의할 수 있습니다.
id 속성은 해당 HTML 문서에서 하나만 존재해야 됩니다.
또한 class와 id 속성을 함께 적용하는 것도 가능합니다.
어디에 사용되는가?
HTML에서 태그를 정의해주면 다양한 HTML 문서를 컨트롤하는 곳에서 사용됩니다.
대표적으로 CSS.JavaScript 등이 있습니다.
CSS에서 id와 class를 선택하는 방법
선택자 기호를 통해 id와 class를 선택하여 사용할 수 있습니다.
id의 겨우 #
class의 경우.
을 이용해 접근할 수 있습니다.
.city{
Backgroundclor:red;
}
#Mycity{
Backgroundclor:black;
}
728x90
반응형
'컴퓨터 > HTML&CSS' 카테고리의 다른 글
| HTML & CSS - [CSS] 선택자(Selectors), 원하는 요소를 선택하자 (0) | 2022.05.18 |
|---|---|
| HTML - iframes(문서안의 문서) (0) | 2022.02.19 |
| HTML - div 와 span (0) | 2021.10.05 |
| HTML-Block and Inline 1 (0) | 2021.02.17 |
| HTML-List(목록) (0) | 2021.02.03 |
Commnet