<div> – HTML 사전

의미 없는 만능 상자. 자체적으로는 아무 의미가 없지만, 다른 요소를 묶어 스타일을 적용하거나 자바스크립트로 제어하기 위한 컨테이너로 사용된다.

<!-- 콘텐츠 그룹화 -->
<div class="profile-card">
  <img src="/tags/cherry.png" alt="Profile Picture">
  <h2>홍길동</h2>
  <p>프론트엔드 개발자</p>
</div>

<!-- 레이아웃 구조화 (Flexbox 예시) -->
<style>
  .container { display: flex; gap: 10px; }
  .box { flex: 1; border: 1px solid #ccc; padding: 10px; }
</style>

<div class="container">
  <div class="box">열 1</div>
  <div class="box">열 2</div>
  <div class="box">열 3</div>
</div>

<!-- 그리드 레이아웃 -->
<style>
  .grid-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
  }
  .grid-item { 
    border: 1px solid #ddd; 
    padding: 15px; 
  }
</style>

<div class="grid-container">
  <div class="grid-item">그리드 아이템 1</div>
  <div class="grid-item">그리드 아이템 2</div>
  <div class="grid-item">그리드 아이템 3</div>
  <div class="grid-item">그리드 아이템 4</div>
</div>

<!-- JavaScript 제어용 컨테이너 -->
<div id="dynamic-content">
  <!-- 동적으로 내용이 변경될 영역 -->
</div>