HTML
웹을 이루는 문서 그 자체.
HTML 은 프로그래밍이 아닙니다. 문서를 쓰면서 각 부분이 무엇인지 브라우저에게 알려 주는 방법입니다 — 이건 제목이고, 이건 문단이고, 이건 링크다. 태그 여덟 개만 익히면 진짜 페이지를 쓸 수 있고, 브라우저가 보여 주는 모든 화면은 결국 이런 파일 한 장입니다.
HTML 은 HyperText Markup Language 의 줄임말입니다. 평범한 문서를 놓고 각 부분에 이름표를 붙이면 — 이 줄은 제목, 이 덩어리는 문단, 이 낱말은 다른 곳으로 가는 문 — 그것이 HTML 입니다. 이 이름표를 태그라 부르고, 꺾쇠 괄호 사이에 씁니다.
브라우저는 알아서 짐작하지 않습니다. 제목 태그 안의 글자를 크고 굵게 그리는 이유는, 여러분이 그것이 제목이라고 말해 주었기 때문입니다. HTML 을 가장 먼저 배울 값어치가 여기 있습니다 — 웹에서 "어떻게 보이는가"가 아니라 "무엇인가"를 말하는 곳은 여기뿐입니다.
태그는 보통 짝으로 옵니다. 여는 태그와 빗금이 붙은 닫는 태그가 있고, 내용은 그 사이에 들어갑니다. 태그 안에 태그가 들어갈 수 있습니다. 페이지는 큰 상자 하나가 작은 상자들을 품은 모양이고, 그 안이 또 그렇습니다. 감쌀 내용이 없어 혼자 서는 태그도 몇 개 있습니다. 그림이나 줄바꿈이 그렇습니다. HTML 파일은 그냥 글자 파일입니다. 어떤 편집기로도 쓸 수 있고, 이름 끝을 .html 로 두면 됩니다 — 설치할 것이 하나도 없습니다.
이름표가 각 부분의 뜻을 말해 주기 때문에, 화면 낭독기가 눈이 보이지 않는 손님에게 제목을 읽어 줄 수 있고, 검색 엔진이 제목과 메뉴를 구별할 수 있고, 여러분의 스타일이 모든 제목을 한 번에 집어낼 수 있습니다. 이름표를 대충 붙여도 내 화면에서는 멀쩡해 보입니다 — 조용히 못 쓰게 되는 것은 나머지 사람들입니다.
이보다 더 줄인 정직한 예제는 없습니다. index.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="ko">문서를 열면서 이 문서의 언어를 밝힙니다. 화면 낭독기가 목소리를 고르는 기준이고, 브라우저가 번역을 권하는 기준입니다.<head> … </head>head 에는 페이지 자체가 아니라 페이지에 대한 정보가 들어갑니다. 여기 있는 것은 화면에 나타나지 않습니다.<meta charset="utf-8" />글자를 UTF-8 로 적었다고 알립니다. 이 줄이 없으면 한글이 물음표 줄로 변할 수 있습니다.<title> … </title>브라우저 탭과 즐겨찾기에 나오고, 검색 결과의 제목 줄이 되는 글입니다. 로봇이 아니라 사람이 읽을 문장으로 씁니다.<body> … </body>body 가 페이지 자체입니다. 손님이 실제로 보는 것은 전부 이 두 태그 사이에 들어갑니다.<h1> · <p>가장 큰 제목 하나와 문단 하나. 여기까지가 이미 완전하고 올바른 페이지입니다.
아무 글자 편집기나 열어 위 내용을 붙여 넣고, 바탕화면에 index.html 로 저장한 뒤 두 번 누르세요. 서버도, 빌드도, 설치도 필요 없습니다 — 브라우저가 파일을 곧바로 읽습니다. 한 낱말을 고치고 저장한 뒤 새로고침하면 바뀐 것이 보입니다.
HTML 에는 태그가 백 개 넘게 있지만, 아래 여덟 개로 거의 모든 것을 만들 수 있습니다. 이것만 제대로 익히고 나머지는 필요할 때 찾아보면 됩니다.
| 태그 | 쓰임 |
|---|---|
| <h1> ~ <h6> | 제목입니다. 가장 중요한 것부터 덜 중요한 것까지 여섯 단계입니다. 한 페이지에 가장 큰 제목은 하나만 두고 단계를 건너뛰지 마세요 — 이 순서는 글자 크기가 아니라 문서의 목차입니다. |
| <p> | 글 한 문단입니다. 위아래 여백은 브라우저가 알아서 주므로 빈 줄을 넣을 필요가 없습니다. |
| <a href="..."> | 링크입니다. 주소는 href 속성에 넣고, 태그 사이의 글이 손님이 누르는 부분이 됩니다. |
| <img src="..." alt="..."> | 그림입니다. src 는 파일이 있는 곳이고, alt 는 그림을 볼 수 없는 사람에게 무엇인지 설명합니다 — 검색 엔진도 그 사람 중 하나입니다. |
| <ul> · <ol> · <li> | 목록입니다. 점 목록, 번호 목록, 그리고 그 안의 항목. 메뉴도 절차도 결국 목록이니 목록으로 적으세요. |
| <table> · <tr> · <td> | 표입니다. 표 전체, 한 줄, 한 칸. 진짜 표 자료에만 쓰고, 화면 배치를 맞추는 데 쓰지 않습니다. |
| <form> · <input> · <button> | 입력 양식과 그 부품입니다. 페이지가 손님에게서 무언가를 받아 서버로 보내는 통로입니다. |
| <div> · <span> | 뜻이 없는 빈 상자 둘입니다. 하나는 한 줄을 통째로 차지하고, 하나는 줄 안에 끼어듭니다. 어울리는 뜻 있는 태그가 정말 없을 때만 씁니다. |
속성 — 태그에 덧붙이는 정보
속성은 여는 태그 안에 이름과 따옴표로 감싼 값으로 씁니다. 태그 이름만으로는 전할 수 없는 것을 브라우저에게 알려 줍니다.
href 와 src 는 주소를 담습니다. 링크가 열 페이지, 그림이 불러올 파일입니다. id 는 하나뿐인 요소에 이름을 붙이고, class 는 한 무리에 이름을 붙입니다. 스타일과 스크립트가 이 이름으로 대상을 찾습니다. alt · title 과 aria- 로 시작하는 속성들은 볼 수 없는 사람을 위해 요소를 설명합니다. 한 줄이면 되는데, 누가 이 페이지를 쓸 수 있는지가 달라집니다.
페이지는 하는 일이 다른 세 가지 언어로 이루어집니다. 이 셋을 섞지 않는 것이 나중에 고칠 수 있는 사이트를 만드는 비결입니다.
<!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 블록을 지워 보면 페이지는 그대로 동작하고 모양만 밋밋해집니다. 셋을 나누어 두는 이유가 그것입니다.
같은 파일 한 장이 네 가지로 쓰이고, 뒤로 갈수록 더 많은 사람에게 열립니다. 웹서버가 필요한 것은 두 번째 하나뿐이고, 그것이 바로 다음 주제입니다.
바탕화면의 파일은 나만 볼 수 있는 페이지입니다. 다른 사람이 열게 하려면 누군가 포트를 붙들고 앉아 요청을 기다렸다가 그 파일을 건네주어야 합니다. 그 누군가가 웹서버이고, 20줄이면 직접 만들 수 있습니다.
스스로 표시하는 칸이에요. 여기서 채점하지는 않아요.