div, 아무 데나 쓰는 거 아닙니다 – 바나나로 배우는 구조 설계법

div 구조를 바나나로 해석한 설계도 – CodeBanana 구조론

 

HTML을 처음 배우면 가장 먼저 만나는 태그가 <div>입니다.
그런데 이걸 아무 데나 막 쓰면? CSS가 더럽게 꼬입니다.
유지보수도 힘들고, 디자이너랑 협업도 안 됩니다.

🧱 div는 '구조'를 짜는 태그입니다

<div>는 'division(구역)'이라는 뜻.
즉, 콘텐츠를 기능/의미/디자인 기준으로 나눠주는 박스입니다.
그래서 '이게 하나의 덩어리인가?'를 기준으로
div를 감싸고, 분리하고, 정리하는 게 핵심입니다.

🍌 바나나로 이해하는 div 구조

웹사이트를 바나나에 비유해봅시다.

• layout = 바나나 숲 🌳 (전체 페이지 뼈대)
• wrap = 바나나 나무 🌲 (그 페이지의 주제 단위)
• section = 바나나 송이 🍇 (기능별 콘텐츠 묶음)
• div = 바나나 🍌 (하나의 콘텐츠)
• .card__peel = 바나나 껍질 (스타일 구조)
• .card__meat = 바나나 속살 (실제 내용)

🍇 바나나 나무에 송이가 들어가는 구조

<div class="layout">
  <div class="wrap">

    <section class="banana-bundle">
      <div class="card">
        <div class="card__peel">껍질</div>
        <div class="card__meat">속살</div>
      </div>
      <div class="card">
        <div class="card__peel">껍질</div>
        <div class="card__meat">속살</div>
      </div>
    </section>

    <section class="banana-bundle">
      <div class="card">
        <div class="card__peel">껍질</div>
        <div class="card__meat">속살</div>
      </div>
    </section>

  </div>
</div>

이렇게 구조를 짜는 게 실제 실무 마크업입니다.
wrap만 있다고 끝이 아니고, 그 위에 layout이 있고, 그 안에 section이 있고,
결국 div는 조상님 품 안에서 살고 있는 거예요. 🤣

❌ 이렇게 짜면 안 됩니다

<div class="box1">
  <div class="box2">
    <div class="text">내용입니다</div>
  </div>
</div>

이름도 의미 없고, 구조도 알 수 없으면
CSS 짤 때 “이게 뭐지...?” 하는 순간 옵니다.

✅ 이렇게 짜야 실무에서 살아납니다

<div class="card">
  <div class="card__image"></div>
  <div class="card__title">제목</div>
  <div class="card__desc">설명</div>
</div>

의미 있는 구조 + 이름만 봐도 어떤 역할인지 보이죠?
이런 걸 “BEM 방식”이라고 합니다.
다음 글에서 BEM 네이밍도 쉽게 설명해드릴게요.

🗓 복잡해 보여도 구조는 그림처럼 나와야 합니다

div = 구조 + 의미 + 유지보수가 같이 결합되어야 합니다.
보이는 것처럼 구조적으로 쓰여야, “어디에 들어가는 바나나지?”가 자연스럽게 떠오릅니다.

다음 글: “클래스 이름, 아무거나 짓지 마세요 – BEM 네이밍 입문 가이드” 🍌