이전 포스팅 에서는 HTML이 뭔지, 누가 쓰는지 알아봤습니다!
이번 포스팅에서는 HTML 문서의 기본 뼈대를 설명 해드리겠습니다.
앞으로 작성할 HTML은 모두 이 기본 구조 안에서 만들어집니다!
🧱 HTML 문서의 기본 구조란?
HTML 문서는 웹페이지의 기본 설계도예요.
아래는 가장 기본적인 HTML 문서 구조예요:
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 나의 첫 HTML 문서예요.</p>
</body>
</html>🔍 태그 하나하나 알아보기
✅ <!DOCTYPE html>
- 이 문서는 HTML5로 작성되었다는 걸 브라우저에게 알려주는 선언이에요.
- 한 번만 쓰면 되고, 항상 맨 위에 있어야 해요!
✅ <html> ~ </html>
- 전체 HTML 문서를 감싸는 가장 바깥 태그예요.
- 모든 내용은 이 안에 들어가야 해요.
✅ <head> ~ </head>
- 웹페이지에 직접 보이진 않지만 중요한 정보들을 담는 공간이에요.
- 예: 페이지 제목(title), 문자 인코딩 설정, 외부 파일 연결 등
✅ <title>
- 웹 브라우저의 탭 제목으로 표시되는 텍스트예요.
- <head> 안에 들어가요.
✅ <body> ~ </body>
- 우리가 웹페이지에서 눈으로 보는 모든 내용은 이 안에 들어가요.
- 글, 이미지, 버튼 등 모두 여기에 들어간답니다!
💬 한 마디 정리!
HTML 문서를 만들 때는 이 기본 구조를 항상 먼저 만들어야 해요.
건물에 기초가 튼튼해야 집도 잘 지어지듯, HTML의 기초 구조도 꼭 이해하고 넘어가야 해요 🏗
다음 포스팅에는 글자를 꾸미고, 링크를 넣고, 이미지를 보여주는 방법을 알려드리겠습니다 📸
'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS 기초] 반응형 웹이란? 미디어쿼리(Media Query)로 모바일에도 잘 보이게 만들기! (0) | 2025.05.07 |
|---|---|
| [정리정돈 시작!] HTML 웹페이지를 나누는 구조 태그 배우기 (0) | 2025.05.06 |
| [구조화 마스터] HTML 목록 만들기, 표 만들기, 입력 폼까지 완전정복! (0) | 2025.05.05 |
| HTML 텍스트, 제목, 링크, 이미지 넣기! (0) | 2025.05.04 |
| HTML이란 무엇일까? 누가 왜 쓰는 걸까? (0) | 2025.04.24 |