HTML, CSS
HTML 구조 및 요소(태그)
gamzaggang7
2025. 3. 22. 03:31
728x90
1. HTML이란?
HTML은 웹 문서를 만들기 위한 표준 마크업 언어이다. 태그로 요소를 감싸서 의미를 부여하며 모든 브라우저에서 동작한다.
문서의 특정 영역에 의미를 부여하고, 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성되어 있다.
HTML 문서는 아래와 같은 기본 구조를 가진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<h1>Hello World!</h1>
<p>이것은 HTML 기본 구조입니다.</p>
</body>
</html>
- <!DOCTYPE html> : HTML5 문서임을 선언
- <html> : HTML 문서의 루트(root) 요소
- <head> : 문서의 메타정보(문자 인코딩, 뷰포트 설정, 제목 등)를 포함
- <meta charset="UTF-8"> : 한글을 포함한 다양한 문자를 올바르게 표시하도록 설정
- <title> : 웹 페이지의 제목(브라우저 탭에 표시됨)
- <body> : 실제 화면에 표시되는 콘텐츠. 텍스트, 이미지, 링크 등을 포함
HTML 문서를 작성하면 브라우저는 이 문서를 렌더링하여 보여준다.

2. 요소(Element)
웹 문서는 요소로 구성되어 있다. <body>와 </body>를 묶어 <body> 요소라고 한다.
위 예시에서 <body> 요소 영역 안에 <h1> 요소와 <p> 요소가 있다. <body> 요소를 <h1> 요소와 <p> 요소의 부모 요소, <h1> 요소와 <p> 요소를 <body> 요소의 자식 요소라고 부를 수 있다.
요소는 여는 태그와 닫는 태그로 구성되어 있다. <h1> 요소에서 <h1>은 여는 태그, </h1>은 닫는 태그이다.
여는 태그와 닫는 태그 사이에 텍스트나 자식 요소를 넣을 수 있다.
<body>
<h1>여는 태그와 닫는 태그 사이에 텍스트를 넣을 수 있다.</h1>
<div>
<h3>여는 태그와 닫는 태그 사이에 다른 요소를 자식 요소로 넣을 수 있다.</h3>
</div>
</body>
3. 실습하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 이론학습</title>
</head>
<body>
<figure>
<img src="./image.jfif" alt="image">
<figcaption>👀👀👀</figcaption>
</figure>
<h1><a href="https://ozcodingschool.com/">오늘의 할 일</a></h1>
<p>HTML을 배우면서 해야 할 일들을 정리한 목록입니다.</p>
<hr>
<ul>
<li>HTML 예습하기</li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/HTML">MDN</a> 사이트 접속하기</li>
<li><a href="https://www.w3schools.com/html/default.asp">w3school</a> 사이트 접속하기</li>
<li>실습 도전하기</li>
</ul>
</body>
</html>

+ 목록을 체크 박스로 바꾸기
<ul>
<li style="list-style-type: none;">
<input type="checkbox" id="scales" name="scales" checked />
<label for="scales">HTML 예습하기</label>
</li>
<li style="list-style-type: none;">
<input type="checkbox" id="scales" name="scales" checked />
<label for="scales"><a href="https://developer.mozilla.org/ko/docs/Web/HTML">MDN</a> 사이트 접속하기</label>
</li>
<li style="list-style-type: none;">
<input type="checkbox" id="scales" name="scales" checked />
<label for="scales"><a href="https://www.w3schools.com/html/default.asp">w3school</a> 사이트 접속하기</label>
</li>
<li style="list-style-type: none;">
<input type="checkbox" id="scales" name="scales" checked />
<label for="scales">실습 도전하기</label>
</li>
</ul>

728x90