id & class 태그의 차이점

uiux4503 2024. 11. 18. 10:14

SMALL

1. id 태그

- 한 요소에만 사용이 가능

- #으로 선택
- 고유하게 전체 페이지에서 단 한가지에만 적용이 가능(고유 영역 식별자)
- label과 input 컨트롤 연결 식별자

- 표와 표 설명을 연결하기 위한 식별자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id,class,name 차이점</title>
</head>
<body>
   <section id="main"> <!-- 고유영역식별자 -->
      <h1>메인id</h1>
      <div class="form">
         <label for="text">텍스트</label>
         <input type="text" id="text"> <!-- label과 연결하기 위한 식별자 -->
      </div>
      <p hidden id="table-cnt">표 설명</p> <!-- 표와 표 설명을 위한 식별자 -->
      <table aria-describedby="table-cnt">
         <caption>표 제목</caption>
      </table>
   </section>
</body>
</html>

2. class 태그

- 여러 영역에서 중복 정의를 허용하여 재사용이 가능한 식별자

- 동일한 값을 갖는 요소가 많음
- .으로 선택

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id,class,name 차이점</title>
</head>
<body>
   <section id="main"> <!-- 고유영역식별자 -->
      <button type="button" class="btn">버튼</button> <!-- 요소와 관계없이 class의 이름이 같게 되면 같은 스타일을 같게됨 -->
      <input type="button" class="btn" value="읽기">
      <a href="#" class="btn">읽기</a>

      <div class="container"> <!-- 컨테이너 스타일을 반영하기 위한 식별자 -->
         ...
      </div>
      <div class="container cnt-sub"> <!-- 컨테이너+cnt-sub로 더 필요한 스타일을 반영하기 위해 여러개를 정의한 식별자 -->
         ...
      </div>
   </section>
</body>
</html>

id	class
#으로 선택	.으로 선택
고유하게 전체 페이지에서 단 한가지에만 적용이 가능	동일한 값을 갖는 요소가 많음
특정 요소에 이름을 붙일 때 사용	스타일의 분류에 사용