Web/HTML

[HTML] HTML 기본 구조 및 기본 요소

HTML 기본 구조 및 기본 요소

HTML(Hyper Text Markup Language) 문서의 기본 구조는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
</head>
<body>
    <!-- 내용이 여기에 들어갑니다. -->
</body>
</html>

<!DOCTYPE html> - 문서의 형식을 정의하는 선언으로, HTML5를 사용한다는 것을 나타낸다.
<html> - HTML 문서의 최상위 요소로, 모든 HTML 내용을 감싸고 있다. lang 속성은 문서의 언어를 지정한다.
<head> - 문서의 메타데이터와 외부 리소스에 대한 정보를 포함하는 부분이다. <head> 요소 내에는 문서의 문자 인코딩, 뷰포트 설정, 스타일시트, 자바스크립트 링크, 제목 등이 위치한다.
<meta charset = "UTF-8"> - 문서의 문자 인코딩을 지정하는 메타 태그로, 대부분의 문서에서 UTF-8을 사용한다.
<meta name = "viewport" content = "width = devicde-width, initial-scale = 1.0"> - 뷰포트 설정을 지정하는 메타 태그로, 모바일 기기에서 화면의 너비와 초기 확대 수준을 조절한다.
<title> - 문서의 제목을 정의하는 태그이다. 브라우저의 제목 표시줄이나 북마크에서 사용된다.
<body> - 실제 문서의 내용이 들어가는 부분이다. 텍스트, 이미지, 링크, 테이블 등 다양한 HTML 요소들이 <body> 내부에 위치한다.

HTML 문서는 위와 같은 기본 구조를 가지며, 이를 통해 웹 브라우저는 문서를 올바르게 해석하고 랜더링 한다.

HTML 요소(Element)

HTML 요소는 시작 태그와 종료 태그로 이 루저여 있고, 시작 태그와 종료 태그 사이에 콘텐츠를 정의할 수 있다. 아래의 표를 한 번 살펴보자.

<태그이름> 콘텐츠를 정의하는 곳 </태그이름>

시작 태그	콘텐츠	종료 태그
<h1>	타이틀 입니다.	</h1>
<p>	문단입니다.	</p>
<br>	없음	없음

HTML은 요소(Element)의 집합이라고 할 수 있다. 그리고 이러한 요소 하나하나를 마크업이라고 한다. 또한, 각 요소는 태그라는 걸로 이루어져 있는데 위의 표와 같이 시작태그와 종료 태그로 이루어져 있다. <br>과 같은 일부 태그들은 제외한 모든 태그들은 반드시 시작 태그와 종료 태그로 이루어져야 한다.

<br>과 같이 시작 태그만 있고 종료 태그는 없는 요소들은 시작 태그 안에 제일 끝에 꺽쇠를 닫기 전에 슬래쉬로 끝나게 된다.

📢 HTML 요소 중에 시작 태그와 종료 태그가 존재하는 요소들과 시작 태그만 있는 요소들은 무슨 차이일까?

시작 태그와 종료 태그가 있는 요소들은 해당 요소 안에 또 다른 요소들이나 콘텐츠를 넣을 수 있다. 예를 들어, 앞선 예제 코드에서 <html> 태그를 한 번 살펴보자. <html> 태그 안에 <head>와 <body> 그리고 기타 다른 요소들이 들어가 있는 걸 확인할 수 있다. 하지만 종료 태그가 없는 <meta> 태그를 한 번 살펴보자. <meta> 태그는 속성만 정의되어 있을 뿐이지 요소 안에 또 다른 요소를 넣을 수는 없다. 아래의 코드에서 <h1> 태그와 <br> 태그 또한 살펴보자.

<!-- 생략 -->
<body>
    <h1>제목입니다.</h1> <!-- 요소 안에 컨텐츠를 넣을 수 있음 -->
    <br/> <!-- 종료 태그가 없기 때문에 요소나 컨텐츠를 넣을 수 없음 --> 
</body>
<!-- 생략 -->

그렇다면 이제 HTML의 주요 태그들은 어떤 게 있는지 한 번 살펴보자.

시작 태그와 종료 태그가 있는 태그

태그	목적
<div></div>	구획을 나누는데 사용되며, 스타일링이나 레이아웃 조작에 주로 활용된다.
<p></p>	단락을 나타내는 태그로, 텍스트를 그룹화환다.
<h1></h1> ... <h6></h6>	제목을 나타내는 태그로, 숫자가 작을수록 큰 제목을 나타낸다.
<a></a>	하이퍼링크를 생성하는 태그로, href 속성에 링크 주소를 지정한다.
<b></b> 또는 <strong></strong>	텍스트를 굵게 표시한다.
<i></i>	텍스트를 이탤릭체로 표시한다.
<ul> <li></li> ... <li></li> </ul>	비순서 목록을 생성하며, 각 항목은 <li>로 정의한다.
<ol> <li></li> ... <li></li> </ol>	순서 목록을 생성하며, 각 항목은 <li>로 정의한다.
<form></form>	사용자 입력 양식을 정의하며, 다양한 입력 요소들을 포함할 수 있다.
<table></table>	표를 생성하며 <tr></tr>, <th></th>, <td></td> 등과 함께 사용하여 표의 구조를 정의한다.

<a>, <form> 혹은 <table> 태그들은 다양한 속성들을 더 가지고 있고 그에 대한 사용법 또한 자세히 다뤄야 하지만 이번 시간에는 "HTML의 주요 태그들이 이런 게 있다" 정도로만 학습하는 게 목적이므로 자세한 사용법은 이번 시간에선 다루지 않겠다. 태그의 종류들이 이런 게 있구나 정도로만 살펴보자.

종료 태그가 없는 태그

태그	목적
<br>	줄 바꿈을 나타낸다.
<hr>	수평선을 생성한다.
<img>	이미지를 삽입한다. <img> 태그는 self-closing 태그로 사용된다.
<input>	다양한 형태의 입력 필드를 생성하며, 종류에 따라 속성이 달라진다.
<meta>	문서의 메타데이터를 정의하며, 주로 <head> 태그 안에서 사용된다.

종료 태그가 없는 태그들은 단독으로 사용되며, 내용을 포함하지 않는다. 마찬가지로 <img>나 <input> 태그 또한 속성들이 정말 다양하며, 이번 시간에는 태그의 종류들이 이런 게 있구나 정도가 학습의 목표이기 때문에 사용법에 대해선 이번 시간에 다루지 않겠다.

728x90

Contents

새소식

인기 검색어