지금까지는 텍스트, 이미지, 링크, 표, 폼 등을 배워
“보이는 콘텐츠”를 구성했습니다.
하지만 이제는 페이지 전체를 깔끔하게 나누고 배치하는 레이아웃 설계를 배워야 합니다.
그 핵심이 바로 <div>와 <span>이에요.
[HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어
혹시 인터넷에서 보는 모든 웹사이트가 어떻게 만들어지는지 궁금했던 적 있나요?네이버, 구글, 유튜브, 그리고 여러분의 카페 페이지까지 —이 모든 사이트의 시작은 바로 HTML이라는 언어입니
ilsandaddy.tistory.com
[HTML 시리즈 2] VS Code 설치부터 첫 웹페이지 만들기
이전 시간에는 HTML이 무엇인지, 그리고 웹페이지가 어떻게 만들어지는지 배웠습니다.이번에는 실제로 코드를 작성할 수 있는 환경을 준비하고,나만의 첫 웹페이지를 완성해 보겠습니다.컴퓨터
ilsandaddy.tistory.com
[HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기
이전 시간에 우리는 VS Code로 첫 웹페이지를 만들어봤죠.이제 본격적으로 HTML의 핵심 개념인 “태그(Tag)”를 배워봅시다.태그는 HTML의 모든 것을 이루는 기본 단위이자,“웹페이지의 언어”라고
ilsandaddy.tistory.com
1. <div>와 <span>의 기본 개념
| <div> | 블록(block) 단위의 구역 나누기 | 한 줄 전체를 차지 |
| <span> | 인라인(inline) 단위의 구역 나누기 | 글 속의 일부분만 차지 |
즉,
- <div>는 큰 구역(박스)을 나눌 때,
- <span>은 문장 안의 작은 부분을 꾸밀 때 사용합니다.
2. 블록 요소(Block Element)란?
블록(block) 요소는 한 줄 전체를 차지합니다.
새로운 줄에서 시작하고, 그 다음 내용은 자동으로 줄바꿈됩니다.
대표적인 블록 요소는 다음과 같아요:
<div>, <p>, <h1>~<h6>, <table>, <form> 등
예시
브라우저에서 보면
각 <div>가 한 줄씩 따로 표시됩니다.
3. 인라인 요소(Inline Element)란?
인라인(inline) 요소는 문장 안에 자연스럽게 섞여 들어갑니다.
줄바꿈 없이 옆으로 이어집니다.
대표적인 인라인 요소는
<span>, <a>, <b>, <i>, <img> 등이 있어요.
예시 👇
결과:
오늘은 HTML 공부를 하는 날입니다.
여기서 <span>은 문장 전체가 아니라 “HTML 공부” 부분만 감쌉니다.
즉, 문단 안에서 특정 부분만 따로 스타일 적용할 수 있게 하는 거예요.
4. <div>와 <span>의 시각적 차이
아래 예시를 보면 두 태그의 차이가 확실히 느껴집니다.
결과
즉,
<div> = 큰 박스
<span> = 문장 안의 하이라이트
5. 왜 중요한가?
<div>와 <span>은 눈에 보이는 장식이 아니라,
페이지 구조를 논리적으로 구분하기 위한 태그입니다.
이 두 태그를 잘 써야 나중에 CSS로 “디자인”을 입히고,
JavaScript로 “동작”을 제어할 수 있습니다.
예를 들어, 쇼핑몰을 만든다고 하면 이렇게 구분하죠
CSS에서 .header, .main, .footer에 색상이나 배치를 지정하면
한 페이지가 깔끔한 구조로 나뉘게 됩니다.
6. 실습 — 프로필 카드 만들기
이제 <div>와 <span>을 활용해 간단한 “프로필 카드”를 만들어볼까요?
결과 설명
- 가장 바깥쪽 <div>는 전체 카드 박스
- 그 안의 <div>는 카드 내용 구역
- <span>은 문장 속에서 굵게 표시할 단어만 따로 꾸밈
즉, <div>는 구역을 나누고,
<span>은 구역 안의 텍스트 일부를 꾸며주는 역할이에요.
7. <div>와 <span>의 관계 정리
| 구분 단위 | 블록 요소 | 인라인 요소 |
| 한 줄 차지 여부 | 한 줄 전체 차지 | 문장 내 일부 차지 |
| 사용 목적 | 구역(Section) 나누기 | 텍스트 일부 꾸미기 |
| 줄바꿈 발생 | 있음 | 없음 |
| 주요 활용 예 | 레이아웃, 페이지 섹션 | 텍스트 강조, 색상 변경 |
정리하면 이렇게 기억하세요:
<div>는 “큰 구조를 나누는 벽”
<span>은 “글자에 색칠하는 형광펜”
8. 마무리 — 구조를 설계할 줄 아는 개발자 되기
지금까지 배운 <div>와 <span>은
웹페이지의 보이지 않는 설계도를 만드는 핵심입니다.
<div> — 큰 영역을 구분
<span> — 문장 안의 작은 부분 꾸미기
두 태그 모두 디자인이나 동작을 직접 담당하지 않지만,
→ CSS, JavaScript와 결합될 때 진짜 힘을 발휘합니다.
이제 여러분은 “콘텐츠를 보여주는 개발자”에서
“구조를 설계하는 개발자”로 한 단계 성장했어요. 👏
다음 시간에는
👉 [HTML 시리즈 10] HTML 문서 구조 분석 (<head>와 <body>의 차이)
를 통해 “HTML이 실제로 웹에서 어떻게 작동하는지” 배워볼 거예요.
이해하면 앞으로 배우는 CSS, JS의 기초가 훨씬 쉬워집니다!
'CODING' 카테고리의 다른 글
| [HTML 시리즈 11-1] CSS와 HTML의 만남 — 디자인 입히기 시작 (0) | 2025.10.31 |
|---|---|
| [HTML 시리즈 10] HTML 문서 구조 분석 (<head>와 <body>의 차이) (0) | 2025.10.23 |
| [HTML 시리즈 8] 입력창(<input>, <form>)으로 사용자 입력 받기 (1) | 2025.10.21 |
| [HTML 시리즈 7] 표(<table>) 만들기 완전정복 (0) | 2025.10.18 |
| [HTML 시리즈 6] 목록(<ul>, <ol>, <li>)으로 콘텐츠 정리하기 (0) | 2025.10.18 |
