HTML & CSS Handout · ⁨HTML & CSS 수업 자료⁩

EN 中文 Español 中文 Español Français Português 한국어 日本語 Tiếng Việt ไทย Bahasa Indonesia עברית العربية Русский

Download reference · ⁨참고 자료 다운로드⁩ 2-up · ⁨2페이지 한장⁩

1 HTML basics · ⁨HTML 기초⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
1.1
Your first page

English
HTML 超文本标记语言 describes a web page with tags 标签. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element 元素.

The browser draws whatever is between the tags.

A tag you forget to close, or spell wrong, may not show correctly.

한국어
HTML describes a web page with tags. A tag is a word in angle brackets, like <p>. Most come in pairs — an opening tag <p> and a closing tag </p> wrap some content. A tag plus its content is an element.

<p>Hello, world!</p> <p>This is my first web page.</p>

The browser draws whatever is between the tags.

A tag you forget to close, or spell wrong, may not show correctly.

One element = opening tag + content + closing tag
1.2
Headings & paragraphs

English
Headings 标题 run from <h1> (biggest) down to <h6> (smallest). A paragraph 段落 is <p>. Use exactly one <h1> for the page's main title.

한국어
Headings run from <h1> (biggest) down to <h6> (smallest). A paragraph is <p>. Use exactly one <h1> for the page's main title.

<h1>My Blog</h1> <h2>About me</h2> <p>I am learning to build web pages.</p>
1.3
Text formatting

English
Make text bold 加粗 with <strong> and italic 斜体 with <em>. A line break 换行 is <br> — it has no closing tag.

Common mistakes

Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.

The tag goes in angle brackets; the text you see goes between the opening and closing tags.

Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.

한국어
Make text bold with <strong> and italic with <em>. A line break is <br> — it has no closing tag.

<p><strong>Warning:</strong> read this carefully.</p> <p>First line<br>second line</p> <p>You can <em>emphasise</em> any word.</p>

Common mistakes

Most tags come in pairs — <p>...</p>. Forgetting the closing tag breaks the layout below it.

The tag goes in angle brackets; the text you see goes between the opening and closing tags.

Headings run <h1> (biggest) to <h6> — do not pick a heading just for its size.
2 Lists, links & images · ⁨목록, 링크 및 이미지⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
2.1
목록

English
An unordered list 无序列表 <ul> shows bullets; an ordered list 有序列表 <ol> shows numbers. Each list item 列表项 is an <li>.

한국어
An unordered list <ul> shows bullets; an ordered list <ol> shows numbers. Each list item is an <li>.

<ul> <li>Apples</li> <li>Oranges</li> </ul> <ol> <li>Wake up</li> <li>Go to school</li> </ol>

ul for bullets, ol for numbers; each item is li
2.2
링크

English
A link 链接 is an anchor <a>. Its href attribute 属性 holds the address it points to.

Add target="_blank" to open the link in a new tab.

한국어
A link is an anchor <a>. Its href attribute holds the address it points to.

<a href="https://example.com">Visit Example</a> <br> <a href="page2.html">Go to the next page</a>

Add target="_blank" to open the link in a new tab.
2.3
이미지

English
An image 图片 is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img> has no separate closing tag.

A broken src path shows nothing — check the file name and folder.

한국어
An image is <img> — it has no closing tag. src is the picture's address; alt is text shown if the image cannot load (and read aloud to blind users).

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Bitmap_VS_SVG.svg/120px-Bitmap_VS_SVG.svg.png" alt="bitmap versus vector" width="120"> <p>If the picture is missing, the alt text shows instead.</p>

Common mistakes

An image needs src (the file) and alt (a description); a link needs href.

<img>는 별도의 종료 태그가 없습니다.

A broken src path shows nothing — check the file name and folder.
3 Page structure · ⁨페이지 구조⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
3.1
A complete page

English
A real page has a fixed skeleton 骨架. <!DOCTYPE html> says it is HTML5. Everything sits inside <html>. The <head> holds information about the page; the <body> holds what you see.

The <title> shows in the browser tab.

<meta charset="utf-8"> lets the page show any language.

한국어
실제 페이지는 고정된 골격을 가집니다. <!DOCTYPE html>은 이것이 HTML5임을 나타냅니다. 모든 요소는 <html> 내부에 위치합니다. <head>은 페이지에 대한 정보를 포함하고, <body>은 사용자가 보는 내용을 담습니다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Page</title> </head> <body> <h1>Welcome</h1> <p>This is a complete page.</p> </body> </html>

페이지는 나뭇가지 구조입니다: head는 페이지를 설명하고, body는 사용자에게 보이는 내용을 담습니다

The <title> shows in the browser tab.

<meta charset="utf-8"> lets the page show any language.
3.2
Comments & nesting

English
A comment 注释  is a note the browser ignores. Tags nest 嵌套 inside one another; indent 缩进 each level so the structure stays clear. Close tags in the reverse order you opened them.

Common mistakes

Tags must nest, not overlap: <b><i>text</i></b>, never <b><i>text</b></i>.

A page needs <html>, a <head> (for the title and links) and a <body> (for what you see).

A comment is ; the browser ignores it.

한국어
주석 은 브라우저가 무시하는 메모입니다. 태그는 서로 중첩되며, 각 수준마다 인데팅을 하여 구조가 명확하게 유지되도록 합니다. 열기 순서와 반대로 닫기 태그를 사용합니다.

 <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> </nav>

Common mistakes

태그는 중첩되어야 하며 겹치지 않아야 합니다: <b><i>text</i></b>, 절대 <b><i>text</b></i>이 아닙니다.

페이지에는 <html>, 제목 및 링크를 위한 <head>, 그리고 사용자에게 보이는 내용을 위한 <body>이 필요합니다.

A comment is ; the browser ignores it.
4 Tables & forms · ⁨표 및 폼⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
4.1
표

English
A table 表格 <table> is built from rows <tr>. A header cell 单元格 is <th> (bold, centred); a normal data cell is <td>.

한국어
테이블 <table>은 행(<tr>)으로 구성됩니다. 헤더 셀은 <th>(굵게, 중앙 정렬)이며, 일반 데이터 셀은 <td>입니다.

<table border="1" cellpadding="6"> <tr><th>Name</th><th>Score</th></tr> <tr><td>Mei</td><td>88</td></tr> <tr><td>Sam</td><td>71</td></tr> </table>

table → tr rows → th/td cells
4.2
폼

English
A form 表单 <form> collects input from the user. An <input> is a box; a <label> names it; a <button> submits 提交 it.

Common <input> type values: text, number, email, password, checkbox.

Common mistakes

Table cells go inside rows: a <tr> holds the <td> cells.

Every form input should have a matching <label> so it is clear and accessible.

A button inside a form submits it by default — set type="button" if you do not want that.

한국어
폼 ⟨form⟩(<form>)은 사용자 입력을 수집합니다. 입력상자(<input>)는 상자이며, 레이블(<label>)은 이를 명명하고, 제출 버튼(<button>)은 데이터를 전송합니다.

<form> <label>Name: <input type="text"></label> <br><br> <label>Age: <input type="number"></label> <br><br> <button type="submit">Send</button> </form>

일반적인 <input> type 값: text, number, email, password, checkbox.

Common mistakes

테이블 셀은 행 안에 들어갑니다: ⟨td⟩(<tr>)은 데이터(<td>) 셀을 담습니다.

모든 폼 입력에는 명확하고 접근성 있게 하려면 매칭되는 <label>이 있어야 합니다.

폼 내부의 버튼은 기본적으로 폼을 제출합니다.这样做的意图是，如果您不想这样做，请设置 type="button"。
5 Boxes & sections · ⁨박스 및 섹션⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
5.1
div, span & semantic sections

English
A <div> is a generic block 块级 box that groups content on its own lines. A <span> is a generic inline 行内 box inside a line of text. You use them to group things so you can style or position them.

Semantic 语义 tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.

Common mistakes

<div> is a block (starts a new line); <span> is inline (stays in the text).

Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.

Do not use a tag just for its default look — style it with CSS instead.

한국어
A <div> is a generic block box that groups content on its own lines. A <span> is a generic inline box inside a line of text. You use them to group things so you can style or position them.

<div> <span>Price:</span> <span>$9.99</span> </div> <div> <span>Stock:</span> <span>in stock</span> </div>

Semantic tags describe their role, which helps screen readers and search engines. Prefer them over plain <div> where they fit: <header>, <nav>, <main>, <section>, <article>, <footer>.

<header><h1>My Site</h1></header> <main> <section> <h2>News</h2> <p>Today we launched the site.</p> </section> </main> <footer>© 2026 My Site</footer>

Common mistakes

<div> is a block (starts a new line); <span> is inline (stays in the text).

Use semantic tags like <header>, <nav> and <footer> where they fit, not <div> for everything.

Do not use a tag just for its default look — style it with CSS instead.

div is a block box; span wraps inline text

6 CSS basics · ⁨CSS 기초⁩

reference.pdf.ko 2-up · ⁨2페이지 한장⁩

6.1

Adding CSS

English

CSS 层叠样式表 styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule 规则 has a selector 选择器, then { property: value; } pairs called declarations 声明.

한국어

CSS styles HTML. The simplest way is a <style> block in the <head> (a bigger site uses a separate .css file with <link>). A CSS rule has a selector, then { property: value; } pairs called declarations.

<style>
  p  { color: blue; font-size: 18px; }
  h1 { color: darkred; }
</style>
<h1>Styled heading</h1>
<p>This paragraph is blue.</p>

Link a stylesheet so CSS rules style HTML elements

6.2

Selectors: class & id

English

A class 类 styles many elements: add class="..." in HTML and write .name in CSS. An id 标识符 styles ONE element: id="..." and #name.

The selectors you will meet most, in one place:

Selector	Chooses
`p`	every `<p>` element
`.note`	everything with `class="note"`
`#title`	the one element with `id="title"`
`h1, h2`	several selectors at once
`nav a`	every `<a>` inside a `<nav>`
`.btn:hover`	one state of an element (see topic 10)

Common mistakes

A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.

한국어

A class styles many elements: add class="..." in HTML and write .name in CSS. An id styles ONE element: id="..." and #name.

<style>
  .note  { color: green; }
  #title { font-size: 24px; }
</style>
<h1 id="title">Welcome</h1>
<p class="note">First note.</p>
<p class="note">Second note.</p>

The selectors you will meet most, in one place:

Selector	Chooses
`p`	every `<p>` element
`.note`	everything with `class="note"`
`#title`	the one element with `id="title"`
`h1, h2`	several selectors at once
`nav a`	every `<a>` inside a `<nav>`
`.btn:hover`	one state of an element (see topic 10)

Common mistakes

A class selector starts with . and an id selector with #.
Link the stylesheet in the <head>, or put rules inside a <style> block.
A class can be reused on many elements; an id should appear once per page.

7 Colours & text · ⁨색상 및 텍스트⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
7.1
Colours & backgrounds

English
Set the text colour with color and the background 背景 with background-color. A colour can be a name (red), a hex 十六进制 code (#ff0000), or rgb(255, 0, 0).

한국어
Set the text colour with color and the background with background-color. A colour can be a name (red), a hex code (#ff0000), or rgb(255, 0, 0).

<style> body { background-color: #f0f4ff; } .card { background-color: white; color: #1e3a8a; padding: 12px; } </style> <div class="card">A card with its own colours.</div>

CSS colours: named, hex, and rgb()
7.2
Styling text

English
Common text properties: font-size, font-weight (e.g. bold), font-family 字体, text-align 对齐 (left / center / right), and line-height for spacing.

Common mistakes

color sets the text colour; background-color sets the background.

A colour can be a name, a #rrggbb hex code, or rgb(...).

End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.

한국어
Common text properties: font-size, font-weight (e.g. bold), font-family, text-align (left / center / right), and line-height for spacing.

<style> h1 { font-family: Arial, sans-serif; text-align: center; } p { font-size: 18px; line-height: 1.6; } </style> <h1>Centered title</h1> <p>Readable paragraph text with comfortable line spacing.</p>

Common mistakes

color은 텍스트 색상을 설정하고, background-color은 배경을 설정합니다.

A colour can be a name, a #rrggbb hex code, or rgb(...).

End each declaration inside the braces with a semicolon ; — it separates the property: value pairs (the one after the last declaration is optional). The rule itself ends with the closing brace }.
8 The box model · ⁨박스 모델⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
8.1
The box model

English
Every element is a box with four layers, from inside out: the content 内容, the padding 内边距 (space inside the border), the border 边框, and the margin 外边距 (space outside the border).

한국어
모든 요소는 네 개의 층을 가진 상자로 표현됩니다. 안쪽부터 바깥쪽으로: 콘텐츠, 패딩(보더 내부의 공간), 보더, 마진(보더 외부의 공간).

<style> .box { background: #dbeafe; border: 3px solid #2563eb; padding: 16px; margin: 20px; } </style> <div class="box">content + padding + border + margin</div>

상자 모델: 콘텐츠, 패딩, 보더, 마진 순서
8.2
Margin & padding

English
padding adds space inside the border, pushing the content inwards. margin adds space outside, pushing other boxes away. Give one value for all sides, or four (top right bottom left).

한국어
padding은 보더 안쪽에 공간을 추가하여 콘텐츠를 안쪽으로 밀어냅니다. margin은 보더 바깥에 공간을 추가하여 다른 상자들을 멀리 밀어냅니다. 모든 변에 대한 값을 하나, 혹은 네 개(위·오른쪽·아래·왼쪽)를 입력할 수 있습니다.

<style> .a { background: #fde68a; padding: 4px; } .b { background: #bbf7d0; padding: 20px; margin-top: 16px; } </style> <div class="a">tight padding</div> <div class="b">roomy padding</div>
8.3
Display

English
The display property sets how a box flows. block 块级 takes a whole line; inline 行内 sits within a line of text; none removes the box completely; flex lays the children in a row (next topic).

Common mistakes

Padding is inside the border; margin is the space outside it.

box-sizing: border-box makes the set width include padding and border — often what you want.

display: none hides an element completely; visibility: hidden leaves its space.

한국어
display 속성은 상자의 흐름 방식을 지정합니다. block은 전체 줄을 차지하며, inline은 텍스트 행 내부에 위치하고, none은 상자를 완전히 제거하며, flex은 자식 요소를 한 줄로 나열합니다(다음 주제).

<style> .hidden { display: none; } .chip { display: inline; background: #e0e7ff; padding: 2px 8px; border-radius: 6px; } </style> <p>Visible text. <span class="hidden">(secret)</span> <span class="chip">a chip</span></p>

Common mistakes

패딩은 보더 내부에, 마진은 외부의 공간입니다.

box-sizing: border-box은 설정된 너비에 패딩과 보더가 포함되게 하여, 일반적으로 원하는 결과를 얻을 수 있습니다.

display: none hides an element completely; visibility: hidden leaves its space.
9 Layout · ⁨레이아웃⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
9.1
Width & centering

English
Set a box's width. To centre 居中 a block, give it a width and margin: 0 auto — auto shares the leftover space equally on the left and right.

한국어
상자의 width을 설정하세요. 블록을 중앙에 배치하려면 너비와 margin: 0 auto을 지정하고, auto은 남은 공간을 왼쪽과 오른쪽에 균등하게 배분합니다.

<style> .page { width: 300px; margin: 0 auto; background: #e0e7ff; padding: 16px; text-align: center; } </style> <div class="page">A centered, fixed-width page.</div>
9.2
Flexbox

English
Flexbox 弹性布局 lays children out in a row (or a column). Set display: flex on the parent — the container 容器. gap adds space between children; flex: 1 makes them share the width.

한국어
플렉스 박스는 자식 요소를 한 줄(또는 열)로 배치합니다. 부모(컨테이너)에 display: flex을 설정하세요. gap은 자식 요소 사이의 간격을 추가하고, flex: 1은 너비를 공유하게 합니다.

<style> .row { display: flex; gap: 10px; } .row div { background: #93c5fd; padding: 12px; flex: 1; text-align: center; } </style> <div class="row"> <div>One</div> <div>Two</div> <div>Three</div> </div>

플렉스 컨테이너는 주축을 따라 아이템을 배치하며; gap은 요소 사이에 간격을 더함
9.3
Mini-project: a profile card

English
Combine boxes, colours, text and spacing into one small component 组件.

Common mistakes

Centre a block with a set width using margin: 0 auto.

Flexbox needs display: flex on the CONTAINER, not on the items.

A width in % is relative to the parent, so check the parent's width too.

한국어
상자, 색상, 텍스트, 간격을 결합하여 작은 컴포넌트를 만드세요.

<style> .card { width: 240px; margin: 0 auto; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; font-family: sans-serif; } .card h2 { margin: 0; color: #1e3a8a; } .card .role { color: #64748b; margin: 4px 0 8px; } </style> <div class="card"> <h2>Mei Chen</h2> <p class="role">Student · Grade 11</p> <p>Loves maths and building web pages.</p> </div>

Common mistakes

고정된 너비를 가진 블록을 margin: 0 auto으로 중앙에 배치하세요.

Flexbox needs display: flex on the CONTAINER, not on the items.

% 내의 너비는 부모에 대해 상대적이므로, 부모의 너비도 확인해야 합니다.
10 Going further · ⁨심화 학습⁩
reference.pdf.ko 2-up · ⁨2페이지 한장⁩
10.1
Hover & pseudo-classes

English
A pseudo-class 伪类 styles an element in one particular state. :hover applies while the mouse is over the element. Add transition 过渡 so the change happens smoothly instead of jumping.

Other useful pseudo-classes: :focus (an input the user clicked into) and :first-child.

한국어
퍼시클래스는 특정 상태일 때 요소를 스타일링합니다. :hover은 마우스가 요소 위에 있을 때 적용됩니다. 변화를 부드럽게 하기 위해 transition을 추가하여 점프하지 않게 하세요.

<style> .btn { background: #2563eb; color: white; padding: 10px 18px; border: none; border-radius: 8px; font-size: 16px; transition: background 0.3s; } .btn:hover { background: #16a34a; } </style> <button class="btn">Hover me</button>

기타 유용한 가위 클래스: :focus(사용자가 클릭하여 초점을 맞춘 입력 요소) 및 :first-child.

:hover는 포인터가 위에 있을 때 요소를 스타일링
10.2
Positioning

English
Positioning 定位 moves a box away from its normal place. relative nudges the box (and makes it the anchor 锚点 for its children); absolute places a box exactly, measured from the nearest positioned parent; fixed pins it to the screen even when the page scrolls.

top, right, bottom, left say how far to move — they only work on positioned boxes.

한국어
배치(Positioning)은 상자를 정상 위치에서 이동시킵니다. relative는 상자를 미세하게 이동시키고(자식 요소의 기준점이 됩니다); absolute는 상자를 가장 가까운 배치된 부모로부터 측정하여 정확히 배치합니다; fixed는 페이지를 스크롤하더라도 화면에 고정시킵니다.

<style> .card { position: relative; width: 260px; height: 90px; background: #dbeafe; border-radius: 10px; padding: 12px; } .badge { position: absolute; top: -10px; right: -10px; background: #dc2626; color: white; padding: 4px 10px; border-radius: 999px; font-size: 13px; } </style> <div class="card"> A product card <span class="badge">NEW</span> </div>

top, right, bottom, left는 이동 거리를 지정하며, 배치된 상자에서만 작동합니다.
10.3
Media queries & responsive design

English
A responsive 响应式 page adapts to the screen size. A media query 媒体查询 applies its rules only while a condition about the screen holds, such as max-width.

Design mobile-first 移动优先: write the phone styles first, then add @media (min-width: ...) rules for bigger screens.

Percent widths and max-width let boxes shrink with the screen.

Common mistakes

:hover sticks to its selector with no space: .btn:hover, not .btn :hover.

position: absolute is measured from the nearest positioned parent — give that parent position: relative.

A media query wraps whole rules: @media (max-width: 600px) { .a { ... } }.

한국어
반응형 페이지는 화면 크기에 맞춰 조정됩니다. 미디어 쿼리는 화면에 대한 특정 조건(예: max-width)이 성립할 때만 규칙을 적용합니다.

<style> .banner { background: #2563eb; color: white; padding: 16px; } @media (max-width: 600px) { .banner { background: #16a34a; } /* narrow screens turn green */ } </style> <div class="banner">Resize the window: blue when wide, green when narrow.</div>

모바일 퍼스트로 디자인하세요: 먼저 휴대폰용 스타일을 작성한 후, 더 큰 화면을 위한 @media (min-width: ...) 규칙을 추가합니다.

백분율 너비와 max-width는 상자가 화면에 따라 축소되도록 합니다.

Common mistakes

:hover는 선택자와 공백 없이 결합됩니다: .btn:hover, .btn :hover가 아닙니다.

position: absolute는 가장 가까운 배치된 부모로부터 측정됩니다. 해당 부모에 position: relative를 부여하십시오.

미디어 쿼리는 전체 규칙을 감쌉니다: @media (max-width: 600px) { .a { ... } }.