HTML
HTML로 첫 문서 만들기
HTML은 글과 버튼 같은 콘텐츠의 구조와 역할을 표시합니다.
이럴 때 필요해요
내용을 브라우저에 표시하는 가장 작은 문서부터 만들어 봅니다.
어떻게 동작하나요?
HTML은 콘텐츠에 역할을 붙이는 마크업 언어입니다. <h1>은 큰 제목, <p>는 문단처럼 내용의 의미를 표시합니다. 태그의 모양을 외우기보다 어떤 내용을 담는지 먼저 살펴보세요.
보통 여는 태그와 닫는 태그 사이에 내용을 씁니다. <p>안녕하세요</p>는 하나의 문단입니다. 요소를 다른 요소 안에 넣을 때는 안쪽 요소부터 닫습니다.
문서의 head에는 제목 같은 정보를, body에는 화면에 보일 내용을 둡니다. 아래 내용을 index.html로 저장해 브라우저로 열어 보세요. 글자 색과 위치를 다루는 CSS는 다음 단계에서 배웁니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>나의 첫 페이지</title></head>
<body><h1>공연 안내</h1><p>토요일에 만나요.</p></body>
</html>브라우저 탭에는 나의 첫 페이지, 문서에는 공연 안내와 토요일에 만나요.가 표시됩니다.
자주 헷갈리는 포인트
- 제목 글자의 크기만 보고 의미와 무관한 제목 태그를 선택하지 않습니다.
- head의 title과 body의 h1은 위치와 역할이 다릅니다.
내 말로 설명해 보기
탭 제목과 화면의 제목을 각각 바꾸려면 어디를 수정할까요?
생각할 단서 브라우저 탭의 제목과 문서 안에 표시할 내용을 나누어 보세요.
예시 답변 확인
설명에 들어갈 핵심
- HTML은 글과 버튼 같은 콘텐츠의 구조와 역할을 표시합니다.
- 브라우저 탭에는 나의 첫 페이지, 문서에는 공연 안내와 토요일에 만나요.가 표시됩니다.
예시 답변
title은 탭 제목을, h1은 문서에 표시할 제목을 바꿉니다. body 안의 문단은 p로 표시합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.