HTML
웹을 이루는 문서 그 자체.
doctype·· 로 된 가장 작은 페이지를 한 줄씩 뜯어봐요. 로 저장해 두 번 눌러 열어 보세요.
HTML 은 이름표를 붙인 문서입니다
HTML 은 HyperText Markup Language 의 줄임말입니다. 평범한 문서를 놓고 각 부분에 이름표를 붙이면 — 이 줄은 제목, 이 덩어리는 문단, 이 낱말은 다른 곳으로 가는 문 — 그것이 HTML 입니다. 이 이름표를 라 부르고, 사이에 씁니다.
브라우저는 알아서 짐작하지 않습니다. 제목 태그 안의 글자를 크고 굵게 그리는 이유는, 여러분이 그것이 제목이라고 말해 주었기 때문입니다. HTML 을 가장 먼저 배울 값어치가 여기 있습니다 — 웹에서 "어떻게 보이는가"가 아니라 "무엇인가"를 말하는 곳은 여기뿐입니다.
- 태그는 보통 짝으로 옵니다. 여는 태그와 빗금이 붙은 닫는 태그가 있고, 내용은 그 사이에 들어갑니다.
- 태그 안에 태그가 들어갈 수 있습니다. 페이지는 큰 상자 하나가 작은 상자들을 품은 모양이고, 그 안이 또 그렇습니다.
- 감쌀 내용이 없어 혼자 서는 태그도 몇 개 있습니다. 그림이나 이 그렇습니다.
- HTML 파일은 그냥 입니다. 어떤 로도 쓸 수 있고, 이름 끝을 .html 로 두면 됩니다 — 설치할 것이 하나도 없습니다.
이름표는 각 부분이 무엇인지 알려 줍니다. 그래서 는 눈이 보이지 않는 손님에게 제목을 읽어 줄 수 있습니다. 은 제목과 메뉴를 구별하고, 내 스타일은 모든 제목을 한 번에 꾸밀 수 있습니다. 이름표를 대충 붙여도 내 화면에서는 멀쩡해 보입니다. 하지만 다른 사람들에게는 조용히 제대로 동작하지 않습니다.
정말로 동작하는 가장 작은 페이지
이보다 더 줄인 정직한 예제는 없습니다. 로 저장하고 두 번 누르면 브라우저가 진짜 웹 페이지를 보여 줍니다. 여러분이 가 본 모든 큰 사이트도 정확히 이 뼈대에서 출발했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first page</title>
</head>
<body>
<h1>Hello</h1>
<p>This is the first web page I made.</p>
</body>
</html>한 줄씩 뜯어보기
<!DOCTYPE html>이 문서가 현대의 HTML 이라고 브라우저에게 알립니다. 빼면 브라우저가 옛날 로 물러나 다르게 동작합니다.<html lang="en">문서를 열면서 이 문서의 언어를 밝힙니다. 가 목소리를 고르는 기준이고, 브라우저가 번역을 권하는 기준입니다.<head> … </head>에는 페이지 자체가 아니라 페이지에 대한 정보가 들어갑니다. 여기 있는 것은 화면에 나타나지 않습니다.<meta charset="utf-8" />글자를 로 적었다고 알립니다. 이 줄이 없으면 한글이 알아볼 수 없는 글자로 깨질 수 있습니다.<title> … </title>브라우저 탭과 즐겨찾기에 나오고, 검색 결과의 제목 줄이 되는 글입니다. 로봇이 아니라 사람이 읽을 문장으로 씁니다.<body> … </body>가 페이지 자체입니다. 손님이 실제로 보는 것은 전부 이 두 사이에 들어갑니다.<h1> · <p>가장 큰 제목 하나와 문단 하나. 여기까지가 이미 완전하고 올바른 페이지입니다.
아무 나 열어 위 내용을 붙여 넣고, 바탕화면에 index.html 로 저장한 뒤 두 번 누르세요. 는 먼저 [포맷 → 로 만들기]를 누르고, 은 파일 형식을 '모든 파일'로 두고 저장합니다. 도, 도, 설치도 필요 없습니다 — 브라우저가 파일을 곧바로 읽습니다. 한 낱말을 고치고 저장한 뒤 새로고침하면 바뀐 것이 보입니다.
실제로 쓰게 되는 태그들
HTML 에는 가 백 개 넘게 있지만, 아래 여덟 무리로 거의 모든 것을 만들 수 있습니다. 이것만 제대로 익히고 나머지는 필요할 때 찾아보면 됩니다.
| 태그 | 쓰임 |
|---|---|
<h1> ~ <h6> | 제목입니다. 가장 중요한 것부터 덜 중요한 것까지 여섯 단계입니다. 한 페이지에 가장 큰 제목은 하나만 두고 단계를 건너뛰지 마세요 — 이 순서는 글자 크기가 아니라 문서의 목차입니다. |
<p> | 글 한 문단입니다. 위아래 여백은 브라우저가 알아서 주므로 을 넣을 필요가 없습니다. |
<a href="..."> | 링크입니다. 주소는 에 넣고, 태그 사이의 글이 손님이 누르는 부분이 됩니다. |
<img src="..." alt="..."> | 그림입니다. 는 파일이 있는 곳이고, 는 그림을 볼 수 없는 사람에게 무엇인지 설명합니다 — 도 그 사람 중 하나입니다. |
<ul> · <ol> · <li> | 목록입니다. 점 목록, 번호 목록, 그리고 그 안의 항목. 메뉴도 절차도 결국 목록이니 목록으로 적으세요. |
<table> · <tr> · <td> | 표입니다. 표 전체, 한 줄, 한 칸. 진짜 표 자료에만 쓰고, 를 맞추는 데 쓰지 않습니다. |
<form> · <input> · <button> | 과 그 부품입니다. 페이지가 손님에게서 무언가를 받아 로 보내는 통로입니다. |
<div> · <span> | 뜻이 없는 빈 상자 둘입니다. 는 한 줄을 통째로 차지하고, 은 글 줄 안에 끼어듭니다. 어울리는 뜻 있는 태그가 정말 없을 때만 씁니다. |
속성 — 태그에 덧붙이는 정보
속성은 여는 태그 안에 이름과 따옴표로 감싼 값으로 씁니다. 태그 이름만으로는 전할 수 없는 것을 브라우저에게 알려 줍니다.
- href 와 src 는 주소를 담습니다. 링크가 열 페이지, 그림이 불러올 파일입니다.
- 는 하나뿐인 에 이름을 붙이고, 는 한 무리에 이름을 붙입니다. 스타일과 스크립트가 이 이름으로 대상을 찾습니다.
- alt · title 과 로 시작하는 속성들은 볼 수 없는 사람을 위해 요소를 설명합니다. 한 줄이면 되는데, 누가 이 페이지를 쓸 수 있는지가 달라집니다.
처음 배울 때 자주 하는 실수
- 닫는 태그를 빼먹기. </p> 나 </a> 가 없으면 브라우저가 끝을 짐작하고, 그 뒤 페이지 전체가 긴 링크 하나가 되기도 합니다.
- 글자 크기로 제목을 고르기. 은 목차의 단계이지 글자 크기가 아닙니다. 글자를 작게 하고 싶으면 로 바꿉니다.
- img 에 alt 를 빼먹기. 그러면 와 검색 엔진은 그림에 대해 아무것도 모릅니다. 꾸밈용 그림이면 alt="" 로 비워 둡니다.
- href 나 src 의 경로가 틀리기. 같은 폴더의 파일은 그냥 name.html 이고, 앞에 빗금(/)이 붙으면 사이트 맨 위부터입니다. 파일을 두 번 눌러 열었을 때는 빗금이 맨 위를 가리켜 그림이 깨지니, 빗금 없이 적습니다. 그림이 안 보이면 경로부터 확인합니다.
HTML 은 뼈대일 뿐, 몸 전체가 아닙니다
페이지는 하는 일이 다른 세 가지 언어로 이루어집니다. 이 셋을 섞지 않는 것이 나중에 고칠 수 있는 사이트를 만드는 비결입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Button example</title>
<style>
body { font-family: sans-serif; padding: 2rem; }
button { padding: 0.6rem 1.2rem; border-radius: 999px; }
</style>
</head>
<body>
<h1 id="title">Clicked 0 times</h1>
<button onclick="count()">Click me</button>
<script>
let n = 0;
function count() {
n = n + 1;
document.getElementById('title').textContent = 'Clicked ' + n + ' times';
}
</script>
</body>
</html>이 파일 하나에 셋이 다 들어 있습니다. 저장해서 열고 버튼을 눌러 보세요 — 제목의 숫자가 올라갑니다. style 블록을 지워 보면 페이지는 그대로 동작하고 모양만 밋밋해집니다. 셋을 나누어 두는 이유가 그것입니다.
그래서 HTML 파일로 무엇을 하나
같은 파일 한 장이 네 가지로 쓰이고, 뒤로 갈수록 더 많은 사람에게 열립니다. 가 필요한 것은 두 번째 하나뿐이고, 그것이 바로 다음 주제입니다.
바탕화면의 파일은 나만 볼 수 있는 페이지입니다. 다른 사람이 열게 하려면 누군가 를 붙들고 앉아 을 기다렸다가 그 파일을 건네주어야 합니다. 그 누군가가 웹서버이고, 20줄이면 직접 만들 수 있습니다.
스스로 표시하는 칸이에요. 여기서 채점하지는 않아요.
이 단계를 이해한 것으로 표시할까요?
아직 취소할 수 없으니, 정말 이해했을 때만 표시해 주세요.
이해한 것으로 표시했어요
스스로 표시하는 칸이에요. 여기서 채점하지는 않아요.