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