Category: HTML

여러 줄 입력창, 선택 목록, 버튼이 있는 양식 일러스트

HTML Tutorial / Use textarea, select, option, and button

Compare how textarea, select, option, and button hold values and behave. A complete form demonstrates required selection, submitted option values, and reset restoring initial values.

입력칸과 제출 버튼이 있는 웹 양식 일러스트

HTML Tutorial / Form Structure and GET vs. POST

Distinguish action, method, and name, then compare GET and POST requests. Inspect entries with FormData without sending them and compare disabled, readonly, and selectable controls.

레이블 카드와 입력 필드가 연결된 일러스트

HTML Tutorial / Connect Labels and Inputs Correctly

Connect labels to inputs with for and id, distinguish id from submitted name, and learn why placeholder text cannot replace a label.

제목 행과 데이터의 행·열 관계가 강조된 표 일러스트

HTML Tutorial / Accessible Tables: caption, scope, and Spanning Cells

Make table headings and data relationships clear with caption, th, and scope, and learn when colspan or rowspan makes a table harder to read.

제목 행이 강조된 기본 데이터 표 일러스트

HTML Tutorial / Table Basics: table, tr, th, and td

Build a basic HTML data table with rows and header or data cells, then organize its headings and body without using tables for page layout.

풍경 사진 아래 빈 캡션 영역이 있는 카드 일러스트

HTML Tutorial / Group Images and Captions with figure and figcaption

Use figure and figcaption to keep an image and its visible explanation together, and distinguish captions from image alt text.

머리글, 탐색, 본문, 보조 영역, 바닥글로 나뉜 웹페이지 일러스트

HTML Tutorial / Divide a Page with Semantic Elements

Learn when to use header, nav, main, article, section, aside, and footer, then build a complete page whose regions and in-page links work together.

큰 블록 안에 두 개의 작은 묶음이 놓인 일러스트

HTML Tutorial / When to Use div and span

Understand the structural difference between div and span, style only the content you need, and choose semantic elements when they better describe the content.

컴퓨터, 태블릿과 휴대전화에 맞게 표시되는 이미지를 나타낸 그림

HTML Tutorial / Responsive Images: srcset, sizes, and picture

Compare srcset and sizes for resolution switching with picture for art direction. Use real files to check mobile display width, media conditions, and the image selected by the browser.

이미지가 삽입된 웹페이지를 나타낸 그림

HTML Tutorial / Images: img, Alt Text, and Dimensions

Add an image with HTML img, write useful alternative text, and set width and height correctly. A downloadable example helps you test file paths and sizing.