웹디자인을 하다 보면
"코드는 못 하는데 HTML은 좀 알아야겠죠?" 라는 질문, 정말 많이 나옵니다.
그리고 제가 독학할 때 깨달은 게 하나 있어요.
div는 곧 '레이어'다.
🎨 디자이너가 익숙한 개념 = 레이어
우리가 Photoshop, Figma, XD 같은 디자인 툴을 쓸 때
가장 기본이 되는 게 뭐죠? 바로 레이어입니다.
레이어를 쌓고, 그룹핑하고, 위치를 조정하고, 순서를 바꾸죠.
그걸 HTML에서 담당하는 게 바로 <div>입니다.
div = 콘텐츠를 감싸는 박스 = 레이어 라고 보면 이해가 쉽습니다.
📚 코드와 레이어 개념 매칭하기
| 디자인 개념 | HTML/CSS 요소 | 설명 |
|---|---|---|
| 레이어 | <div> | 구성 요소 하나를 감싸는 박스 |
| 그룹 폴더 | div 안에 또 다른 div | 중첩 구조 = 구조화된 컴포넌트 |
| 순서 정하기 | z-index | 누가 위에 올라오느냐 |
| 위치 고정 | position: absolute / fixed | 절대좌표 기반 위치 지정 |
| 정렬 | display: flex / grid | 안에 있는 요소 정렬 방식 |
🤔 div는 무슨 뜻인가요?
div는 division의 줄임말로, 영역을 나누는 뜻입니다.
HTML에서는 콘텐츠 구역을 나누는 기본 박스죠.
참고로 href는 hypertext reference의 줄임말이고,
“허레프”도 “헐프”도 아닙니다 🤓
🧠 구조를 생각하며 짜면 진짜 실력이 된다
div를 의미 없이 box1, box2로 나누지 말고
버튼이면 button-wrap, 카드면 card-wrapper처럼 의미 있는 구조와 이름을 주면
CSS도 깔끔하게, 유지보수도 쉽게 짤 수 있습니다.
📦 다음 편 예고
다음 글에선 “div 구조 잘 짜는 법”에 대해 더 깊이 들어갑니다.
실제 마크업 예시와 함께, 실무에서 바로 써먹을 수 있게!
div는 콘텐츠를 감싸고 정리하는 가장 기본적인 구조 박스입니다.
레이어처럼 겹치고, 정렬되고, 순서가 생기죠.
div를 이해하는 순간, 웹이 구조로 보이기 시작합니다 🍌