Boxes and sections
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · 이 페이지는 최신 브라우저(SharedArrayBuffer 지원)가 필요합니다. Chrome, Edge, Firefox 또는 Safari를 최신 버전으로 업데이트해 주세요.
English
Boxes and sections
- Bigger pages need structure — clear areas, not one long pile.
- A
<div>is a plain box. A<span>is a small inline box for a few words. - Boxes group things together, so you can arrange and style them later.
한국어
상자 및 섹션
- 큰 페이지들은 구조(structure) 가 필요합니다. 한 줄로 길게 나열된 것이 아니라 명확한 영역이 있어야 합니다.
<div>은 일반 상자입니다.<span>은 몇 개의 단어를 담기 위한 작은 인라인 상자입니다.- 상자들은 관련 항목들을 그룹화하여, 나중에 배치 및 스타일링을 쉽게 할 수 있게 해 줍니다.
English
Named sections
- HTML has special boxes with meaningful names:
<header>(top),<main>(the main content),<footer>(bottom),<nav>(menu links).- They work like
<div>, but the names tell people — and search engines — what each part is.
한국어
명명된 섹션
- HTML에는 의미 있는 명명이 적용된 특수 상자들이 있습니다:
<header>(상단),<main>(본문),<footer>(하단),<nav>(메뉴 링크).- 이들은
<div>과 유사하게 작동하지만, 이름은 사용자 및 검색 엔진에게 각 부분의 역할을 명확히 알려줍니다.
<header>
<h1>My site</h1>
</header>
<main>
<p>Welcome to my page.</p>
</main>
<footer>
<small>Made by me</small>
</footer>
English
Classes name your boxes
- A class is a label you add to a tag:
<div class="card">. - It does nothing on its own — but soon, CSS will use it to style that box.
- This is your bridge into the next half of the course.
한국어
클래스로 상자 명명하기
- class는 태그에 추가하는 레이블입니다:
<div class="card">. - 자체적으로는 아무런 기능을 하지 않지만, 곧 CSS가 이를 사용하여 해당 상자를 스타일링할 것입니다.
- 이는 다음 과정으로 넘어가는 다리가 됩니다.
English
Common mistakes
<div>is a block (new line);<span>is inline (stays in the text).- Use semantic tags like
<header>and<nav>where they fit.
한국어
흔한 실수
<div>는 블록 요소(새 줄 생성);<span>는 인라인 요소(텍스트 내에 유지됨)입니다.- 적절할 때 sematic 태그인
<header>와<nav>를 사용하십시오.
English
Now you try
- Add a
<header>and a<footer>, then give a box a class. - Next lesson, we start making things look good with CSS.
한국어
이제 직접 해보기
<header>와<footer>를 추가한 후, 상자에 class를 부여하십시오.- 다음 수업에서는 CSS를 사용하여 시각적으로好看的效果을 만들어 보겠습니다.
Explore · 탐색하기
A box wraps its content
A <div> is a box: content surrounded by padding, border, margin.
Give the page a top and a bottom. Wrap the title in a <header>, and the small note in a <footer>.
Give this box a name so we can style it later. Add class="card" to the <div>.