HTML에서 <span> 태그는 <div>와 유사한 범용(generic) 요소입니다. 앞서 배운 것처럼 <div>는 웹 페이지 레이아웃을 구성하는 데 주로 사용되는 범용 컨테이너로, 블록(block) 요소이기 때문에 가질 수 있는 최대한의 공간을 차지합니다.
반면 <span>은 인라인(inline) 요소입니다. 필요한 만큼의 공간만 차지하며, 주로 텍스트의 특정 부분을 강조(emphasis)할 때 사용됩니다.
div와 span의 동작 방식 비교
두 요소가 어떻게 다르게 동작하는지 아래 코드 예제를 통해 확인해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs vs Spans</title>
<style>
* {
box-sizing: border-box;
font-size: 1.4rem;
font-family: monospace;
}
.div-style {
background: purple;
color: blanchedalmond;
height: auto;
padding: 20px;
margin: 10px;
}
.span-style {
background: orange;
color: black;
}
.highlight {
font-style: italic;
display: inline-block;
height: 100px;
width: 75%;
display: flex;
align-items: center;
background:mediumslateblue;
color: ivory;
}
h3 {
text-decoration: underline; }
</style>
</head>
<body>
<h3>Divs</h3>
<div class="div-style">I'm a div</div>
<div class="div-style">I take up as much space as I can</div>
<h3>Spans</h3>
<span class="span-style">I'm a span</span>
<span class="span-style">
I only take up exactly as much space as I need.
</span>
<span class="span-style">I emphasize text a lot.</span>
<div class="div-style">
<span class="span-style">Spans can go inside divs...</span>
<p>... have different styling than other text...</p>
<span class="span-style"
>...and are inline elements that can't have height or width
manipulated unless you set
<span class="highlight">display: inline-block</span></span
>
</div>
</body>
</html>코드 설명
위 코드에서는 클래스(class)를 사용해 span과 div를 각각 그룹화한 뒤, CSS에서 배경색과 글자색을 지정했습니다. 여기서 중요한 점 하나를 짚고 넘어가겠습니다.
span에는 기본적으로 높이(height)나 너비(width) 속성이 적용되지 않습니다. 이를 조절하려면 반드시 display: inline-block 속성을 추가해야 합니다. 위 예제의 .highlight 클래스에서도 이 속성을 활용해 높이와 너비를 지정한 것을 볼 수 있습니다.
div와 span을 함께 활용한 레이아웃 구성
실제 웹 페이지에서는 div와 span이 함께 사용됩니다. 아래 예제는 두 요소를 조합해 전체적인 페이지 구조를 만든 모습입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Divs/Spans</title>
<style>
* {
box-sizing: border-box;
font-size: 1.4rem;
font-family: monospace;
}
.div-style {
background: purple;
color: blanchedalmond;
height: auto;
padding: 20px;
margin: 10px;
}
.span-style {
background: orange;
color: ivory;
}
h3 {
text-decoration: underline;;
}
.nav {
background:goldenrod;
padding: 20px;
}
.headline {
font-weight: bold;
font-size: 1.6rem;
}
.flex-container {
display: flex;
}
.container {
display: flex;
flex-direction: column;"
}
.sidebar-main-container {
background:indianred;
padding: 20px;
}
.sidebar {
background: white;
color: black;
width: 40%;
padding: 20px;
}
.main-container {
width: 60%;
padding: 20px;
background:green;
font-size: 1.2rem;
}
.main-content {
width: 100%;
margin: 10px 0px;
display: flex;
}
.child-container {
width: 50%;
font-size: 1.0rem;
}
.pink {
background: pink;
color: black;
}
.red {
background: red;
}
p{
font-size: 1.2rem;
}
.footer {
text-align: center;
background: cornflowerblue;
}
.footer span {
font-size: .7rem;
}
</style>
</head>
<body>
<h3>Using Divs and Spans Together:</h3>
<div class="div-style container">
<div class="headline">Div 1: Main Overall Container</div>
<div class="nav">
<h2>Div 1a: Header</h2>
<p>Divs can create boxes for web layout</p>
</div>
<div class="sidebar-main-container">
<p>Div 1b: Sidebar-Main Content</p>
<div class="flex-container">
<div class="sidebar">
<span style="font-size: 1.2rem;">Div 1b.1</span>
<span style="font-size: 1.2rem; color: purple;">Sidebar Container</span>
</div>
<div class="main-container">
<span style="font-size: 1.2rem;">Div 1b.2</span>
<span style="font-size: 1.2rem; color: orange;">Main Container</span>
<div class="main-content">
<div class="child-container pink">Child 1 1b.2.1</div>
<div class="child-container red">Child 2 1b.2.2</div>
</div>
</div>
</div>
<div class="footer">
<span>Footer</span>
<span>Container</span>
<span>Goes Here</span>
</div>
</div>
</div>
</body>
</html>구조 분석
이 예제에서 div는 헤더(header), 사이드바(sidebar), 메인 콘텐츠(main), 푸터(footer)처럼 페이지의 큰 구조적 단위를 담당합니다. 반면 span은 컨테이너 내부의 라벨이나 텍스트 조각에 개별적인 스타일(글자 크기, 색상 등)을 적용하는 데 활용됩니다.
특히 푸터 영역에서는 .footer span 선택자를 사용해 푸터 안의 span에만 작은 글자 크기를 적용하는 등, 후손 선택자(descendant selector)를 통해 더 세밀한 스타일 제어도 가능합니다.
정리
span과 div는 다른 HTML 요소들과 결합하여 웹사이트의 기본 빌딩 블록(building blocks)을 형성합니다. 두 요소의 핵심 차이를 요약하면 다음과 같습니다.
- div: 블록 요소로, 레이아웃의 구조적 단위(컨테이너)를 만들 때 사용하며 한 줄 전체를 차지합니다.
- span: 인라인 요소로, 필요한 만큼의 공간만 차지하며 텍스트 강조나 부분 스타일링에 적합합니다.
span은 div와 독립적으로 스타일링할 수 있기 때문에, 전체 레이아웃은 div로 잡고 세부 텍스트 강조는 span으로 처리하는 방식으로 효율적으로 마크업을 작성할 수 있습니다.