WEB LAB
    HTML/CSS 1.2 · 1부. HTML 기초

    첫 페이지 만들기

    문서의 뼈대를 갖추고, 파일을 만들어 브라우저로 엽니다.

    예상 학습 시간 14분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 입문
    개념 설명

    문서에는 정해진 뼈대가 있습니다

    1.1 에서는 제목과 문단만 적었습니다. 실제 파일은 그 앞뒤로 갖춰야 할 것이 있습니다. 브라우저에게 이것이 HTML 문서이고, 어떤 글자로 적혀 있으며, 이름이 무엇인지 알려 주는 부분입니다.

    최소 예제 · 편집 가능

    문서 한 장

    HTML 파일 하나가 갖추는 모습입니다. 이 다섯 줄이 모든 페이지에 똑같이 들어갑니다. 

    <!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>홍길동의 첫 페이지</title>
</head>
<body>
  <h1>안녕하세요</h1>
  <p>처음 만든 페이지입니다.</p>
</body>
</html>

    미리보기에는 body 안쪽만 나옵니다. title 은 브라우저 탭에 붙는 이름이라 이 자리에서는 볼 수 없습니다. 아래에서 파일로 만들어 열면 탭에 그 이름이 뜨는 것을 확인할 수 있습니다.

    상세 사용법

    각 줄이 하는 일

    줄하는 일
    <!doctype html>이 문서가 HTML 이라고 알립니다. 맨 앞 한 줄입니다.
    <html lang="ko">문서 전체를 감쌉니다. lang 은 이 문서가 한국어라고 알립니다.
    <head>화면에 보이지 않는 정보를 담습니다.
    <meta charset="utf-8">글자를 어떻게 읽을지 정합니다. 없으면 한글이 깨집니다.
    <title>브라우저 탭에 붙는 이름입니다. 검색 결과의 제목이기도 합니다.
    <body>화면에 보이는 것을 담습니다.

    head 와 body 를 가르는 기준은 하나입니다 — 화면에 보이는가. 보이는 것은 모두 body 안에 넣습니다.

    상세 사용법

    파일로 만들어 열기

    위 코드를 그대로 복사해 확인해 보십시오. 준비할 프로그램이 없습니다.

    1. 메모장이나 편집기를 엽니다.
    2. 위 코드를 붙여 넣습니다.
    3. index.html 이라는 이름으로 저장합니다. 저장할 때 인코딩을 UTF-8 로 선택합니다.
    4. 저장한 파일을 두 번 눌러 브라우저로 엽니다.

    주소창에 file:/// 로 시작하는 주소가 뜹니다. 서버 없이 파일을 직접 여는 것이고, 이 트랙의 내용은 모두 이렇게 확인할 수 있습니다.

    흔한 실수

    세 가지

    • 한글이 깨져 보입니다. <meta charset="utf-8"> 가 없거나, 파일을 UTF-8 이 아닌 인코딩으로 저장한 것입니다. 둘 다 UTF-8 이어야 합니다.
    • 확장자가 .txt 로 저장됩니다. 메모장은 기본이 텍스트 파일입니다. 저장할 때 파일 형식을 "모든 파일" 로 바꾸고 이름을 index.html 로 적어야 합니다.
    • 보이는 것을 head 안에 넣습니다. 화면에 나오지 않습니다. 보이는 것은 body 안입니다.
    실습 문제

    직접 해보기

    1. 내 페이지로 바꾸기 난이도 하

    위 예제에서 title 을 자기 이름으로 바꾸고, body 안에 문단을 하나 더 추가하십시오.

    문단은 <p> 와 </p> 사이에 글을 넣습니다. 있는 문단 아래에 한 줄을 더 적으면 됩니다.
    <head> <meta charset="utf-8"> <title>김철수의 첫 페이지</title> </head> <body> <h1>안녕하세요</h1> <p>처음 만든 페이지입니다.</p> <p>앞으로 여기에 소개를 적겠습니다.</p> </body>
    요약

    정리

    • HTML 문서는 doctype · html · head · body 로 이루어집니다.
    • head 는 보이지 않는 정보, body 는 보이는 것을 담습니다.
    • meta charset="utf-8" 이 없으면 한글이 깨집니다.
    • 파일을 .html 로 저장해 두 번 누르면 브라우저가 엽니다.