frontend/HTML

<div class=>`와 `<div id=>`의 차이

Mr.코딩 2023. 7. 21. 05:10

chatGTP

`<div class=>`와 `<div id=>`의 차이를 쉽게 설명해 드릴게요!

 

우선, `<div>`는 웹페이지에서 여러 내용들을 묶어주는 역할을 해요. 예를 들면, 책에서 챕터들을 구분하기 위해 목차에 번호를 매기듯이, 웹페이지에서도 `<div>`는 다른 내용들을 그룹으로 묶어줍니다.

1. `<div class>`:
`<div class>`는 여러 개의 HTML 요소들을 묶을 때 사용합니다. 특정한 이름(class 이름)을 붙여서 여러 곳에서 같은 스타일이나 동작을 적용할 수 있어요. 클래스 이름은 여러 요소들이 함께 묶여 있는 그룹을 표시하는 데 사용됩니다. 하나의 요소가 여러 클래스를 가질 수도 있어요.

```html
<div class="container">
  <h2>제목</h2>
  <p>내용 내용 내용</p>
</div>
```

2. `<div id>`:
`<div id>`는 특정한 HTML 요소를 식별할 때 사용해요. 클래스와는 달리, 아이디(id)는 페이지 내에서 오직 하나의 요소에만 부여됩니다. 그래서 한 웹페이지에 같은 아이디를 가진 요소가 여러 개 있으면 안 돼요.

```html
<div id="header">
  <h1>웹사이트 제목</h1>
  <nav>
    <!-- 네비게이션 메뉴들 -->
  </nav>
</div>
```

요약하자면, `<div class>`는 여러 개의 요소들을 묶을 때 사용하며, 같은 클래스 이름을 가진 요소들끼리 묶어서 스타일이나 동작을 공유할 수 있어요. `<div id>`는 하나의 요소를 식별할 때 사용하며, 해당 아이디를 가진 요소는 페이지 내에서 유일해야 해요.