[HTML] div, span 태그 & 클래스와 아이디

오늘은 HTML의 기본이면서도 가장 많이 사용되는 div, span 태그와 class와 id속성에 대해 정리해볼 것임

---

1. `div`와 `span`의 차이

`div`와 `span`은 HTML에서 특별한 의미가 없는 '컨테이너'역할을 하는 태그임.

다른 태그들과 달리 정해진 역할이나 필수 속성이 없고, 태그를 적용해도 다른 요소들의 모양이나 배치가 변경되지 않음.

그래서 '비어있는 태그'라고도 부름

 

• `div` -> 블록 태그
  
  • 한 줄 전체를 차지함
  • 자동으로 줄바꿈이 일어남
  • 레이아웃 구조를 나눌 때 주로 사용함
• `span` -> 인라인 태그
  • 필요한 만큼만 영역을 차지함
  • 줄바꿈 없이 같은 줄에 이어서 표시됨
  • 글자 일부에 스타일을 줄 때 자주 사용함

정리하자면,

`div`는 영역(박스)를 만드는 용도

`span`은 글자 일부에 포인트를 줄 때 사용하는 경우가 많음

---

2. class와 id 속성의 역할

`div`와 `span`은 단독으로 쓰기보다는 `class`나 `id` 속성과 같이 사용됨

이 속성들은 특정 태그를 구분해서 선택하기 위한 이름표 같은 역할임

 

class 속성

• 여러 태그에 중복 사용 가능
• 같은 스타일을 여러 요소에 적용할 때 사용
• CSS에서 사용할 때는 `.`으로 불러옴

예시

.title {
  color: red;
}

<h2 class="title">Hello</h2>
<span class="title">text</span>

이렇게 하면 여러 요소에 같은 스타일 적용 가능!

---

id 속성

• 문서 전체에서 단 하나만 사용 가능
• 같은 이름을 중복해서 쓰면 안됨
• 특정 요소 하나만 정확하게 선택할 때 사용함
• CSS에서 사용할 때는 `#`으로 불러옴

예시

#block {
  background-color: skyblue;
}

<div id="block">내용</div>

---

class와 id를 동시에 사용하는 것도 가능

하나의 태그에 `id`와 `class`를 동시에 적용하는 것도 가능함

<div id="block" class="title">
  content
</div>

이 경우

• `id`는 해당 요소를 유일하게 구분
• `class`는 공통 스타일을 적용하는 용도로 사용

---

정리하자면,

• `div` -> 블록 태그, 레이아웃 구조용
• `span` -> 인라인 태그, 글자 일부 스타일링용
• `class` -> 여러 요소에 공통 스타일 적용
• `id` -> 문서 내 하나의 요소만 선택 가능