span 및 div 요소
스타일 지정 지점으로 사용할 수 있는 일반 인라인 및 블록 컨테이너를 사용합니다.
span 및 div 요소은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
일반 컨테이너
HTML에는 의미론적으로 중립적인 일반 컨테이너 요소가 두 가지 있습니다:
<div>— 블록 수준 컨테이너<span>— 인라인 컨테이너
이 요소들은 그 자체로 의미를 갖지 않으며, 순전히 스타일 지정과 스크립트 작성을 위한 연결 지점으로 존재합니다.
div 요소
<div>는 블록 수준 컨테이너로, 앞뒤에 새 줄을 만듭니다:
<div class="card">
<h2>Card Title</h2>
<p>Card content here.</p>
</div>
<div class="sidebar">
<p>Sidebar content.</p>
</div>
<!-- div groups related elements for CSS layout or JavaScript selection -->span 요소
<span>은 인라인 컨테이너로, 텍스트 흐름 안에 배치됩니다:
<p>The price is <span class="price">$29.99</span> per month.</p>
<p>Error: <span class="error-text" role="alert">Invalid email address</span></p>
<!-- span targets a part of text for styling or scripting
without adding block-level line breaks -->div와 의미론적 요소 중 선택하기
<div>를 사용하기 전에 의미론적 요소를 사용할 수 있는지 확인하세요:
- 페이지 머리말 →
<header> - 탐색 →
<nav> - 기본 콘텐츠 →
<main> - 블로그 게시물 →
<article> - 사이드바 →
<aside> - 페이지 바닥글 →
<footer>
적합한 의미론적 요소가 없을 때만 <div>를 사용하세요.
div 과다 사용
div 과다 사용 — 모든 것에 <div>를 지나치게 사용하는 현상:
<!-- Divitis: meaningless nesting -->
<div class="header">
<div class="nav">
<div class="nav-item"><a href="/">Home</a></div>
</div>
</div>
<!-- Better: semantic HTML -->
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>class와 id를 사용한 CSS 연결 지점
<div>와 <span>은 모두 CSS의 대상 지정에 사용되는 class 또는 id 속성과 함께 사용합니다:
<div class="hero-section">
<h1>Welcome</h1>
<p>Text with a <span class="highlight">highlighted phrase</span> inside.</p>
</div>
<!-- CSS: -->
<!--
.hero-section { background: #f0f4f8; padding: 2rem; }
.highlight { background-color: yellow; font-weight: bold; }
-->JavaScript 대상 지정
<div>와 <span>은 JavaScript의 대상이 되기도 합니다:
<span id="counter">0</span>
<script>
const counter = document.getElementById('counter');
let count = 0;
setInterval(() => {
count++;
counter.textContent = count;
}, 1000);
</script>중첩 규칙
일반 컨테이너의 중첩 규칙:
<div>에는<div>와<span>을 포함할 수 있습니다<span>에는<span>과 인라인 콘텐츠만 포함할 수 있습니다<span>안에<div>를 넣지 마세요
<span>
Inline text
<span>Nested span OK</span>
<!-- <div> inside span: INVALID -->
</span>레이아웃에 div 사용하기
div를 사용하는 일반적인 레이아웃 패턴:
<div class="layout">
<div class="sidebar"><!-- sidebar --></div>
<div class="content"><!-- main content --></div>
</div>
<!-- CSS Grid layout: -->
<!--
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; }
-->인라인 스타일 지정에 span 사용하기
일반적인 인라인 스타일 지정 패턴:
<p>Status: <span class="badge badge-success">Active</span></p>
<p>Price: <span style="color: red; text-decoration: line-through;">$50</span>
<span style="color: green; font-weight: bold;">$30</span></p>div와 span은 보이지 않습니다
기본적으로 <div>와 <span>은 보이지 않는 래퍼입니다:
<div>는 블록 표시 방식 외에 시각적 스타일을 추가하지 않습니다<span>은 어떤 스타일도 추가하지 않습니다- 모든 모양은 적용한 CSS에서 결정됩니다
- 따라서 두 요소는 중립적인 컨테이너로 사용하기에 적합합니다
빠른 확인
문단 안의 단어 하나에 스타일을 지정하려면 어떤 요소를 사용해야 할까요?
복습: span과 div
일반 컨테이너의 핵심:
<div>— 블록 수준, 레이아웃을 위해 요소를 그룹화<span>— 인라인, 스타일 지정을 위해 텍스트 일부를 대상으로 지정- 두 요소 모두 의미론적으로 중립적이며 의미를 추가하지 않음
- 적합한 경우 의미론적 HTML5 요소를 우선 사용
class와id를 사용하여 CSS 및 JavaScript와 연결
자주 묻는 질문
“span 및 div 요소” 강의는 무료인가요?
네 — “span 및 div 요소” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“span 및 div 요소”에서 뭘 배우나요?
스타일 지정 지점으로 사용할 수 있는 일반 인라인 및 블록 컨테이너를 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“span 및 div 요소” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.