반응형
id : 요소에 고유한 이름을 부여하는 식별자 속성
class: 요소를 그룹별로 묶어서 정의하는 식별자 속성
id와 class로 요소를 지정해 놓으면 차후 css나 javascrip로 해당 요소에 기능을 추가할 때 유용하다.
id는 태그한 하나씩만 지정해야 하지만, class는 다중 지정 및 중복 가능함.
<!DOCTYPE html>
<html>
<head>
<meta chartset="UTF-8">
<title>컨테이너 태그</title>
</head>
<body>
<h1> 건강 수칙! <h1>
<hr>
<!-- 이 div 요소는 id를 exercise로 지정하여 식별할 수 있게 하였다.-->
<div id = "exercise">
<h2 class ="title">운동을 하자!</h2>
<p>주 150시간 이상의 운동을 합니다.</p>
</div>
<hr>
<!-- 이 div 요소는 id를 nurtiton으로 지정하여 식별할 수 있게 하였다.-->
<!-- 두 div 요소의 h2 태그는 해당 요소의 제목 역할을 하므로
둘다 class를 title로 지정하여 식별할 수 있게 하였다.-->
<div id = "nutriton">
<h2 class="title">식단 조절을 하자!</h2>
<p>탄수화물 섭취를 줄이고 과일 채소를 많이 먹습니다.</p>
</div>
</body>
</html>
개발자 도구를 통해 확인해 보면 두개의 div 요소가
각각 id가 exercise, nurtion 으로 지정되어 있어 서로 식별이 가능함을 확인할 수 있다.
두 div 요소의 h2 태그는 모두 title이라는 class로 지정되어 있음을 확인할 수 있다.
반응형
'html' 카테고리의 다른 글
| 목록 만들기 (0) | 2022.07.31 |
|---|---|
| 링크 만들기 (0) | 2022.07.27 |
| 컨테이너 태그 - div, span 태그 (0) | 2022.07.25 |
| 이미지 태그(img) (0) | 2022.07.23 |
| 블록 태그와 인라인 태그 (0) | 2022.07.18 |
