HTML 개요
📌 HTML이란?
HTML (HyperText Markup Language)
✅ 웹 페이지를 만들기 위한 표준 마크업 언어 (프로그래밍 언어 X)
✅ HyperText: 문서를 서로 연결하는 링크
✅ Markup: 태그를 삽입하여 문서의 형식, 구조, 스타일을 지정
📌 웹 문서 특징
| 문서 유형 | 특징 |
|---|---|
| 일반 문서 (엑셀, 워드) | 입력 프로그램 = 확인 프로그램 |
| 웹 문서 | 입력 프로그램 ≠ 확인 프로그램 |
| 웹 편집기 (Web Editor) | HTML을 마크업(Markup) |
| 웹 브라우저 (Web Browser) | HTML을 해석하여 표시 |
✅ HTML 문서 확장자: .html
📌 HTML 기본 구조
🔹 HTML 문서 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 문서 기본 구조</title>
</head>
<body>
<h1>HTML 문서의 제목 태그</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</body>
</html>📌 HTML 주요 태그
| 태그 | 설명 |
|---|---|
<!DOCTYPE html> |
문서 유형 선언 (HTML5 사용) |
<html> |
HTML 문서의 시작과 끝을 나타냄 |
<head> |
문서의 메타데이터 포함 (화면에 표시되지 않음) |
<meta> |
문자 인코딩 및 뷰포트 설정 |
<title> |
웹 페이지 제목 |
<body> |
화면에 표시되는 내용 |
📌 HTML 요소 (Element)란?
✅ HTML 문서를 구성하는 개별적인 요소
🔹 HTML 요소 구조
<p>HTML 요소</p>✅ 여는 태그: <p>
✅ 내용: HTML 요소
✅ 닫는 태그: </p>
🔹 예제
<h1>표제입니다.</h1>
<p>문단입니다.</p>| 시작 태그 | 요소 컨텐츠 |
|---|---|
<h1> |
표제입니다. |
<p> |
문단입니다. |
<br> |
(내용 없음) |
✅ <br> 같은 일부 요소는 닫는 태그 없음 → 빈 요소 (Void Element)
⚠️ 중요! 추후에 배울 React에선 <br /> 과 같은 형식으로 사용 (습관화)
📌 HTML 주석
<!-- HTML 주석 -->✅ 브라우저에 표시되지 않음
✅ 코드 설명에 유용
📌 HTML 요소의 중첩
<p>I want <strong>strawberry</strong> chocolate whipped cream cake</p>✅ 올바른 중첩 순서 유지 필수
✅ 종료 태그 필수 입력
❌ 종료 태그 미입력 시 예기치 않은 오류 발생
<h1>표제입니다.
<p>문단입니다.📌 HTML 요소의 종류
🔹 1. 블록 레벨 요소 (Block-level elements)
✅ 새로운 줄을 생성
✅ 부모 요소의 전체 너비 차지
✅ 블록 레벨 요소 안에 인라인 요소 포함 가능
<p>Hello World</p>
<div>Hello World</div>🔹 대표적인 블록 요소
<p> <div> <article> <section> <header> <footer> <table> <form> <h1>~<h6> <ul> <ol>🔹 2. 인라인 레벨 요소 (Inline-level elements)
✅ 새로운 줄을 생성하지 않음
✅ 필요한 만큼의 너비만 차지
✅ 블록 요소를 포함할 수 없음
<span>Hello World</span>
<strong>강조된 텍스트</strong>🔹 대표적인 인라인 요소
<a> <span> <b> <strong> <i> <em> <img> <input> <label> <button>📌 HTML 태그 (Tag) vs 요소 (Element)
| 개념 | 설명 |
|---|---|
| 태그(Tag) | <p> 같은 마크업 기호 |
| 요소(Element) | 태그를 적용한 내용 포함 전체 |
<p>텍스트 단락을 지정하는 p태그</p>✅ <p> 와 </p> → 태그
✅ <p>텍스트 단락을 지정하는 p태그</p> → 요소
📌 HTML의 대소문자 구별
✅ HTML 태그는 대소문자를 구별하지 않음
✅ <HEAD> = <Head> = <head>
✅ ❗ BUT, XHTML에서는 소문자 필수 사용
📌 빈 요소 (Void Element)
✅ 내용 없이 자체적으로 닫히는 태그
<br> <hr> <input> <img>📌 정리
| 개념 | 설명 |
|---|---|
| HTML | 웹 페이지를 만드는 마크업 언어 |
| 태그(Tag) | <p> 같은 마크업 기호 |
| 요소(Element) | 태그 + 내용 전체 |
| 블록 요소 | 줄 바꿈이 있는 요소 (<div>, <p>, <section> 등) |
| 인라인 요소 | 줄 바꿈이 없는 요소 (<span>, <strong>, <a> 등) |
| 주석 | <!-- 주석 --> (브라우저에서 보이지 않음) |
| 빈 요소 | <br>, <img> 같은 내용 없는 요소 |
✔ HTML은 문서의 구조를 담당하며, 올바른 태그 사용이 중요함! 🚀
'IT > HTML,CSS,JavaScript' 카테고리의 다른 글
| [CSS] CSS 기본 문법 (0) | 2025.03.13 |
|---|---|
| [HTML] HTML 정리 part3 (0) | 2025.03.12 |
| [HTML] HTML 정리 part2 (1) | 2025.03.11 |
| [프론트엔드] 웹 표준 & 브라우저 (0) | 2025.03.08 |
| [VSCode] MacOS - VisualStudio Code 환경설정 (0) | 2025.03.07 |