실행 가능한 HTML 문서: div 태그

Q: div class는 무슨 뜻인가요?

는 class 속성이 있는 div예요. 클래스는 CSS가 스타일을 입힐 때(.card { ... }), JavaScript가 요소를 찾을 때 쓰는 이름이에요. 여러 div가 같은 클래스를 쓸 수 있고, div 하나가 class="card featured"처럼 여러 클래스를 가질 수도 있어요.

Q: div 두 개를 나란히 놓으려면 어떻게 하나요?

부모 div로 감싸고 부모에 display: flex를 주세요. 그러면 자식들이 한 줄로 놓여요. 사이 간격은 gap으로, 너비를 똑같이 나누려면 자식에 flex: 1을 주세요.

Q: div와 section 중 무엇을 써야 하나요?

콘텐츠에 그런 역할이 있으면 , , , , , 를 쓰세요. 스크린 리더와 검색 엔진이 이해하기 때문이에요. 스타일이나 레이아웃을 위한 상자만 필요하면 를 쓰세요.

Q: p 태그 안에 div를 넣어도 되나요?

안 돼요. 문단은 인라인 콘텐츠만 담을 수 있어요. 브라우저는 를 보는 순간 를 닫아 버리고, 그러면 스타일이 깨져요. div를 바깥 요소로 쓰거나, 문단 안에서는 을 쓰세요.

div 태그가 하는 일

<div>(division의 줄임말)는 범용 컨테이너예요. 요소를 묶어서 하나의 단위로 스타일을 입히거나, 배치하거나, 스크립트로 다룰 수 있게 해요. 그 자체로는 아무 모양도 없어요. 여백도, 테두리도, 특별한 글꼴도 없어요. 블록 요소라서 새 줄에서 시작하고 사용 가능한 너비만큼 늘어나요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

스타일에서 border 줄을 지우면 div가 보이지 않게 돼요. 그게 div의 기본 모습이에요. 눈에 보이는 모든 것은 CSS에서 와요.

div class와 id

div에는 보통 class를 붙여요. CSS가 대상으로 삼는 이름이에요. 같은 클래스를 가진 div는 같은 스타일을 공유해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card는 두 상자 모두에 스타일을 입히고, .card.highlight는 두 클래스를 모두 가진 div에 파란 테두리를 더해요. 특정 div 하나를 가리켜야 할 때는 id를 쓰세요. 예를 들어 링크 대상(href="#pro")이 그래요. 속성 페이지에서 class와 id를 자세히 비교해요.

div 나란히 놓기

div는 블록이라서 세로로 쌓여요. 한 줄로 놓으려면 부모를 flex 컨테이너로 만드세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

.row의 display: flex가 자식들을 한 줄로 세우고, gap이 간격을 주고, flex 값이 너비를 나눠요(여기서는 1 : 2 : 1). 이 부모와 자식 패턴이 실제 사이트에서 div를 가장 많이 쓰는 방식이에요. div를 가운데 정렬하는 방법은 div 가운데 정렬을 보세요.

div 중첩

div 안에 div를 얼마든지 깊게 넣을 수 있어요. 각 단계는 상자 안의 상자예요. 모든 div에 테두리와 패딩을 주면 확인할 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

중첩은 레이아웃이 허락하는 만큼만 얕게 유지하세요. 감싸는 요소가 하나 늘 때마다 margin이나 width가 예상대로 동작하지 않을 때 따져 봐야 할 상자도 하나 늘어나요.

div일까, 시맨틱 태그일까?

div는 내용에 대해 아무것도 말해 주지 않아요. HTML에는 똑같이 묶는 역할을 하면서 그 묶음이 무엇인지도 말해 주는 태그가 있어요.

이것 대신	이것을	용도
`<div class="header">`	`<header>`	페이지나 섹션의 도입부 또는 상단 바
`<div class="nav">`	`<nav>`	내비게이션 링크 묶음
`<div class="main">`	`<main>`	페이지당 하나인 주요 콘텐츠
`<div class="post">`	`<article>`	독립적인 항목: 글, 댓글, 상품 카드
`<div class="footer">`	`<footer>`	페이지나 섹션의 푸터

이 태그들은 스타일을 입히기 전에는 div와 똑같이 보이지만, 스크린 리더가 읽어 주고 사용자가 그 사이를 건너뛸 수 있게 해 주며, 검색 엔진은 구조를 읽어요. div는 위의 .row 래퍼처럼 레이아웃이나 스타일만을 위한 상자에 쓰세요. 전체 목록은 시맨틱 HTML 페이지에서 다뤄요.

div는 버튼이 아니에요

클릭 핸들러가 달린 div는 마우스 사용자에게는 클릭할 수 있어 보이지만, 키보드 사용자는 Tab으로 거기까지 갈 수도, Enter로 누를 수도 없고, 스크린 리더도 버튼이라고 알려 주지 않아요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

동작에는 <button>을, 이동에는 <a href>를 쓰세요. 둘 다 따로 작업하지 않아도 포커스를 받고 키보드로 동작해요.

자주 하는 실수

<p> 안에 div를 넣음. div 앞에서 문단이 닫혀요. div를 바깥 요소로 만들거나 문단 안에서는 <span>을 쓰세요.
div 범벅. div로만 만든 페이지는 스크린 리더에게 구조가 없어요. 맞는 곳에는 div를 <header>, <nav>, <main>, <footer>로 바꾸세요.
클릭할 수 있는 div. 대신 <button>이나 링크를 쓰세요.
div가 텍스트만큼만 넓을 거라고 기대함. div는 전체 너비를 차지해요. 줄어들게 하려면 display: inline-block, width: fit-content, 또는 <span>을 쓰세요.
여러 div에 같은 id를 씀. 반복되는 것에는 클래스를 쓰세요.

자주 묻는 질문

HTML에서 div란 무엇인가요?

<div>는 범용 컨테이너예요. 다른 요소를 묶어서 함께 스타일을 입히거나 배치할 수 있게 해 주고, 그 자체로는 아무 의미가 없어요. 브라우저는 새 줄에서 시작해 사용 가능한 너비를 모두 차지하는 블록으로 표시해요.

div class는 무슨 뜻인가요?

<div class="card">는 class 속성이 있는 div예요. 클래스는 CSS가 스타일을 입힐 때(.card { ... }), JavaScript가 요소를 찾을 때 쓰는 이름이에요. 여러 div가 같은 클래스를 쓸 수 있고, div 하나가 class="card featured"처럼 여러 클래스를 가질 수도 있어요.

div 두 개를 나란히 놓으려면 어떻게 하나요?

부모 div로 감싸고 부모에 display: flex를 주세요. 그러면 자식들이 한 줄로 놓여요. 사이 간격은 gap으로, 너비를 똑같이 나누려면 자식에 flex: 1을 주세요.

div와 section 중 무엇을 써야 하나요?

콘텐츠에 그런 역할이 있으면 <section>, <header>, <nav>, <main>, <article>, <footer>를 쓰세요. 스크린 리더와 검색 엔진이 이해하기 때문이에요. 스타일이나 레이아웃을 위한 상자만 필요하면 <div>를 쓰세요.

p 태그 안에 div를 넣어도 되나요?

안 돼요. 문단은 인라인 콘텐츠만 담을 수 있어요. 브라우저는 <div>를 보는 순간 <p>를 닫아 버리고, 그러면 스타일이 깨져요. div를 바깥 요소로 쓰거나, 문단 안에서는 <span>을 쓰세요.