아무개의 취미생활
반응형
HTML 소개와 기본 구조
안녕하세요! 오늘부터 새롭게 시작하는 HTML/CSS 학습 시리즈의 첫 번째 글입니다.
먼저 HTML 기초 1단계로 체계적이며 단계별 학습을 하기 위한 첫걸음으로, HTML의 기본 개념과 구조를 알아보겠습니다.
HTML이란 무엇인가?
HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. 웹 브라우저는 이 HTML 코드를 읽고 사용자에게 시각적인 웹 페이지로 표현해 줍니다.
주요 특징:
- 마크업 언어: 프로그래밍 언어가 아닌 문서의 구조를 정의하는 언어
- 태그 기반: 꺾쇠 괄호(<>)로 둘러싸인 요소들로 구성
- 계층적 구조: 요소들이 서로 중첩되어 부모-자식 관계를 형성
웹 페이지의 기본 구조
모든 HTML 문서는 다음과 같은 기본 구조를 가집니다:
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
<meta charset="UTF-8">
</head>
<body>
<!-- 웹 페이지 내용이 여기에 들어갑니다 -->
<h1>안녕하세요!</h1>
<p>이것은 제 첫 번째 웹 페이지입니다.</p>
</body>
</html>
각 부분을 자세히 살펴보겠습니다.
1. <!DOCTYPE html>
- 문서 유형 선언(Document Type Declaration)
- 브라우저에게 이 문서가 HTML5로 작성되었음을 알려줍니다.
- 모든 HTML 문서의 첫 줄에 위치해야 합니다.
2. <html> 요소
- HTML 문서의 루트(최상위) 요소
- 모든 다른 HTML 요소들은 이 요소 안에 포함됩니다.
- 언어 속성을 추가할 수 있습니다: <html lang="ko">
3. <head> 요소
- 메타데이터(웹 페이지에 대한 정보)를 포함
- 브라우저에 직접 표시되지 않는 정보들이 들어감
- 주요 요소:
- <title>: 브라우저 탭에 표시되는 페이지 제목
- <meta>: 문자 인코딩, 뷰포트 설정 등 다양한 메타 정보
- <link>: CSS 파일 연결
- <script>: JavaScript 연결
4. <body> 요소
- 실제로 사용자에게 보여지는 모든 콘텐츠가 들어감
- 텍스트, 이미지, 링크, 표, 목록 등 모든 시각적 요소를 포함
기본 HTML 태그 알아보기
HTML 문서를 만들 때 자주 사용되는 기본 태그들을 알아보겠습니다.
제목 태그 (h1 ~ h6)
<h1>가장 큰 제목</h1>
<h2>두 번째 크기 제목</h2>
<h3>세 번째 크기 제목</h3>
<!-- h4, h5, h6으로 계속 작아짐 -->
단락 태그 (p)
<p>이것은 하나의 단락입니다. 웹 페이지의 주요 텍스트 내용을 이 태그 안에 작성합니다.</p>
줄바꿈 태그 (br)
첫 번째 줄<br>두 번째 줄
수평선 태그 (hr)
<p>첫 번째 내용</p>
<hr>
<p>두 번째 내용</p>
주석
<!-- 이것은 주석입니다. 브라우저에 표시되지 않습니다. -->
첫 번째 HTML 문서 만들기
이제 간단한 HTML 문서를 만들어 보겠습니다. 메모장(Windows) 또는 TextEdit(Mac) 같은 텍스트 편집기를 열고 다음 코드를 입력하세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 첫 번째 웹 페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>HTML 학습을 시작합니다.</p>
<p>이 문서는 HTML의 기본 구조를 보여줍니다.</p>
<hr>
<h2>HTML이란?</h2>
<p>HTML은 웹 페이지를 만들기 위한 표준 마크업 언어입니다.</p>
</body>
</html>
이 파일을 index.html이라는 이름으로 저장하고, 웹 브라우저에서 열어보세요.
축하합니다! 첫 번째 HTML 문서를 성공적으로 만드셨습니다.
실습: 간단한 자기소개 페이지 만들기
지금까지 배운 내용을 활용하여 간단한 자기소개 페이지를 만들어보세요.
- 새 HTML 파일을 만듭니다.
- 기본 HTML 구조를 작성합니다.
- 제목에 자신의 이름을 넣습니다.
- 자기소개, 취미, 관심사 등을 단락으로 추가합니다.
- 수평선으로 섹션을 구분해 보세요.
마치며
오늘은 HTML의 기본 개념과 구조에 대해 알아보았습니다. 이제 웹 페이지의 뼈대를 만드는 방법을 알게 되었습니다.
다음 포스트에서는 더 다양한 HTML 요소들, 특히 텍스트 서식을 다루는 태그들에 대해 자세히 알아보겠습니다.
다음 포스트 예고: "HTML 텍스트 요소 다루기" - 다양한 텍스트 서식과 목록 태그를 알아봅니다.
반응형
'Web Programming > HTML & CSS' 카테고리의 다른 글
| [학습 2] HTML 텍스트 요소 다루기 (2) | 2025.04.11 |
|---|---|
| HTML 문서에 <img> 태그로 이미지 띄우기 (0) | 2021.11.25 |
| HTML 제목 및 문단 태그와 특수문자 입력에 대해 알아보기 (0) | 2021.11.24 |
| font - 구글 웹폰트 사이트에 올라온 폰트 사용하는 방법 (0) | 2021.04.14 |
| mediaquery (0) | 2021.04.13 |
