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를 최신 버전으로 업데이트해 주세요.
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.
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.
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.
한국어
주석 <!-- ... -->은 브라우저가 무시하는 메모입니다. 태그는 서로 중첩되며, 각 수준마다 인데팅을 하여 구조가 명확하게 유지되도록 합니다. 열기 순서와 반대로 닫기 태그를 사용합니다.
<!-- a simple navigation bar -->
<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.
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.
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>.
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.
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 }.
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).
한국어
모든 요소는 네 개의 층을 가진 상자로 표현됩니다. 안쪽부터 바깥쪽으로: 콘텐츠, 패딩(보더 내부의 공간), 보더, 마진(보더 외부의 공간).
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은 보더 바깥에 공간을 추가하여 다른 상자들을 멀리 밀어냅니다. 모든 변에 대한 값을 하나, 혹은 네 개(위·오른쪽·아래·왼쪽)를 입력할 수 있습니다.
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은 자식 요소를 한 줄로 나열합니다(다음 주제).
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은 너비를 공유하게 합니다.
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을 추가하여 점프하지 않게 하세요.
기타 유용한 가위 클래스: :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는 페이지를 스크롤하더라도 화면에 고정시킵니다.
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 { ... } }.
