[기초]HTML 그룹화(div, span)와 속성(class, id)

<div> 태그

• 용도: <div> 태그는 블록(block) 레벨의 요소를 만들 때 사용됩니다. 주로 문서의 섹션을 그룹화하거나 레이아웃을 구성하는 데 사용됩니다.
• 특성:
  • 블록 레벨 요소: 한 줄 전체를 차지하며, 다음 요소는 새 줄에서 시작됩니다.
  • 주로 컨테이너로 사용되어 내부에 다른 HTML 요소들을 포함할 수 있습니다.

예시:

<div>
  <h1>제 블로그에 오신걸 환영합니다.</h1>
  <p>여기는 Naerrow의 블로그로 다양한 정보를 쌓아가는 곳입니다!</p>
</div>

 

---

<span> 태그

• 용도: <span> 태그는 인라인(inline) 레벨의 요소를 만들 때 사용됩니다. 주로 텍스트의 특정 부분을 스타일링하거나 특정한 행동을 부여하는 데 사용됩니다.
• 특성:
  • 인라인 요소: 콘텐츠의 일부분만 차지하며, 다른 요소와 같은 줄에 위치합니다.
  • 주로 텍스트나 다른 인라인 요소들을 포함할 수 있습니다.

예시:

<p>여기서 주의할 내용은 <span style="color: red;">빨간색으로</span>강조하고 있습니다.</p>

 

---

class 속성

• 용도: class 속성은 하나 이상의 요소에 공통된 스타일이나 동작을 적용하기 위해 사용됩니다. 같은 클래스 이름을 여러 요소에 적용할 수 있습니다.
• 특성:
  • 여러 요소에 동일한 클래스를 적용할 수 있습니다.
  • CSS와 JavaScript에서 클래스 선택자를 통해 스타일링 및 동작을 정의합니다.

예시:

• css

.text-bold {
  font-weight: bold;
}

• html(css적용)

<div class="container">
  <p class="text-bold">굵은 텍스트</p>
  <p class="text-bold">또 다른 굵은 텍스트</p>
</div>

 

---

id 속성

• 용도: id 속성은 문서 내에서 유일해야 하는 요소를 식별할 때 사용됩니다. 특정 요소에만 스타일이나 동작을 적용할 때 사용됩니다.
• 특성:
  • 문서 내에서 유일해야 합니다. 같은 ID를 여러 요소에 적용할 수 없습니다.
  • CSS와 JavaScript에서 ID 선택자를 통해 스타일링 및 동작을 정의합니다.

예시:

• css

#header {
  background-color: blue;
  color: white;
}

• html(css적용)

<div id="header">
  <h1>헤더 작성하는 곳</h1>
</div>

---

정리

• <div>와 <span> 차이점:
  • <div>: 블록 레벨 요소, 레이아웃 및 섹션을 그룹화한다.
  • <span>: 인라인 레벨 요소, 텍스트의 특정 부분을 스타일링한다.
• class와 id 차이점:
  • class: 여러 요소에 적용 가능, 공통 스타일 및 동작한다.
  • id: 문서 내에서 유일해야 함, 특정 요소 식별 및 스타일링한다.
  • css 적용 시 : class는 이름 앞에 .을 붙여서 사용하고 id는 이름 앞에 #을 붙여서 사용한다.(위 css 예시 참고)