HTML 기본 개념 1부 – HTML의 기초부터 구조까지!
📝 HTML이란?
HTML(HyperText Markup Language)은 웹페이지의 기본 골격을 만드는 마크업 언어입니다. 우리가 보는 모든 웹사이트는 HTML로 구조가 형성되어 있으며, CSS와 JavaScript를 사용해 스타일과 기능을 추가합니다.
✅ HTML의 특징
- 정적 문서를 구성하는 기본 언어
- 태그(tag) 기반의 문서 구조
- CSS, JavaScript와 함께 사용됨
📌 HTML 구조
HTML 문서는 기본적으로 다음과 같은 구조를 가집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 기초</title>
</head>
<body>
<h1>안녕하세요! HTML을 배워봅시다.</h1>
</body>
</html>✅ HTML 세부 구조
- <!DOCTYPE html> → HTML5 문서임을 선언
- <html> → HTML 문서의 시작과 끝
- <head> → 메타 정보, 스타일, 스크립트 포함
- <body> → 사용자가 볼 수 있는 콘텐츠 영역
📌 <head> 태그란?
<head> 태그는 문서의 메타 정보를 포함하는 부분입니다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 문서</title>
</head>✅ <head> 내부 요소
- <title> → 웹페이지의 제목 (브라우저 탭에 표시됨)
- <meta charset="UTF-8"> → 한글 포함 모든 문자 인코딩 설정
- <meta name="viewport"> → 반응형 웹을 위한 설정
📌 <meta> 태그란?
<meta> 태그는 HTML 문서의 정보를 검색엔진과 브라우저에 전달하는 역할을 합니다.
<meta charset="UTF-8">
<meta name="description" content="이 웹페이지는 HTML을 학습하는 곳입니다.">
<meta name="keywords" content="HTML, 웹개발, 프론트엔드">
<meta name="author" content="홍길동">✅ 자주 사용되는 <meta> 태그
- charset="UTF-8" → 문자 인코딩
- name="description" → 페이지 설명
- name="keywords" → 검색 키워드
- name="author" → 작성자 정보
📌 HTML 기본 문법
1) 요소(Element)
HTML 문서는 <태그>내용</태그> 형식으로 구성됩니다.
<p>이것은 문단 태그입니다.</p>2) 중첩(Nested)
HTML 요소는 다른 요소 안에 포함될 수 있습니다.
<div>
<p>이 문장은 <strong>강조</strong>되었습니다.</p>
</div>3) 속성(Attribute)
HTML 태그는 속성을 가질 수 있으며, 속성은 추가적인 정보를 제공합니다.
<a href="https://www.naver.com" target="_blank">네이버 이동</a>✅ 주요 속성 예시
- href → 링크 연결
- target="_blank" → 새 창에서 열기
- src → 이미지, 동영상 파일 경로
- alt → 이미지 설명
4) 주석(Comments)
✅ 주석 설명
- 코드 내 설명을 추가할 때 주석을 사용합니다.
- 브라우저는 주석을 화면에 표시하지 않음
<!-- 이 부분은 주석입니다. -->
<p>이 문장은 출력됩니다.</p>
🎯 정리 – HTML의 기본을 다지자!
지금까지 HTML의 기본 개념, 문서 구조, <head> 태그, <meta> 태그, 기본 문법에 대해 알아봤습니다.
✔ HTML은 웹페이지의 뼈대 역할을 한다.
✔ 태그와 속성을 활용해 문서를 구조화할 수 있다.
✔ <meta> 태그를 활용하면 SEO(검색 최적화)에 도움을 준다.
📌 다음 HTML 2부에서는 본격적으로 다양한 HTML 태그 종류를 살펴보겠습니다! 🚀
'Delvelop > HTML' 카테고리의 다른 글
| [새싹x코딩온] HTML 기본 개념 5부 – 웹 표준을 위한 시맨틱 태그(Semantic Tags) 완벽 정리! (6) | 2025.03.06 |
|---|---|
| [새싹x코딩온] HTML 기본 개념 4부 – Table 태그를 활용한 표 만들기! (0) | 2025.03.06 |
| [새싹x코딩온] HTML 기본 개념 3부 – 사용자 입력을 위한 Form 태그 완벽 정리! (2) | 2025.03.05 |
| [새싹x코딩온] HTML 기본 개념 2부 – 다양한 HTML 태그 종류 총정리! (0) | 2025.03.05 |