1. HTML 기초
1.1 HTML이란?
HTML의 정의와 특징
- HTML은 HyperText Markup Language의 약자입니다.
- 웹 페이지를 만드는 기본적인 마크업 언어입니다.
- 웹 브라우저가 이해할 수 있는 형식으로 문서를 작성합니다.
- 태그(tag)를 사용하여 문서의 구조를 정의합니다.
1.2 첫 번째 HTML 문서
기본적인 HTML 문서 구조
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 번째 웹 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 제가 만든 첫 번째 웹 페이지입니다.</p>
</body>
</html>실제 브라우저에서 보여지는 모습:
안녕하세요!
이것은 제가 만든 첫 번째 웹 페이지입니다.
1.3 HTML 문서 작성 방법
HTML 파일 만들기
- 메모장이나 코드 에디터를 엽니다.
- 새 파일을 만듭니다.
- 위의 코드를 복사하여 붙여넣습니다.
- 파일을 'index.html'로 저장합니다.
- 웹 브라우저에서 파일을 엽니다.
파일 저장 방법:
- 파일 → 다른 이름으로 저장
- 파일 형식을 '모든 파일'로 선택
- 파일 이름을 'index.html'로 입력
- 인코딩을 'UTF-8'로 선택
- 저장 버튼 클릭
1.4 기본 태그 알아보기
자주 사용하는 HTML 태그
<h1>가장 큰 제목</h1>
<h2>두 번째로 큰 제목</h2>
<h3>세 번째로 큰 제목</h3>
<p>문단을 나타내는 태그입니다.</p>
<br>줄바꿈을 합니다.
<hr>수평선을 그립니다.
<strong>굵은 글씨</strong>
<em>기울어진 글씨</em>
<a href="https://www.example.com">링크</a>
<img src="이미지.jpg" alt="이미지 설명">실제 브라우저에서 보여지는 모습:
1.5 HTML 문서 구조 설명
HTML 문서의 주요 부분
<!DOCTYPE html> <!-- HTML5 문서임을 선언 -->
<html> <!-- HTML 문서의 시작 -->
<head> <!-- 문서의 정보를 담는 부분 -->
<meta charset="UTF-8"> <!-- 문자 인코딩 설정 -->
<title>제목</title> <!-- 브라우저 탭에 표시될 제목 -->
</head>
<body> <!-- 실제로 보여질 내용 -->
<!-- 여기에 내용을 작성합니다 -->
</body>
</html> <!-- HTML 문서의 끝 -->각 부분의 역할:
- DOCTYPE: HTML 버전을 선언합니다.
- html: 전체 HTML 문서를 감싸는 태그입니다.
- head: 문서의 설정과 정보를 담는 부분입니다.
- body: 실제로 웹 페이지에 보여질 내용을 작성하는 부분입니다.
1.6 실습 과제
다음 요구사항을 만족하는 웹 페이지를 만들어보세요:
- 제목: "나의 첫 번째 웹 페이지"
- 본문에 자기소개 작성
- 제목 태그(h1, h2) 사용
- 문단 태그(p) 사용
- 굵은 글씨와 기울어진 글씨 사용
- 링크 추가
예시 결과:
1.7 퀴즈
다음 문제를 풀어보세요:
- HTML은 무엇의 약자인가요?
- HTML 문서의 시작을 나타내는 태그는 무엇인가요?
- 웹 페이지의 제목을 설정하는 태그는 무엇인가요?
- 문단을 만들 때 사용하는 태그는 무엇인가요?
- 링크를 만들 때 사용하는 태그는 무엇인가요?
정답:
- HyperText Markup Language
- <html> 태그
- <title> 태그
- <p> 태그
- <a> 태그