본문 바로가기
HTML & CSS

[HTML 기초] HTML 구조

by PNcoding 피엔코딩 2023. 10. 31.

안녕하세요 PNcoding입니다 :)

이번 포스팅에선 HTML 기초에 대해 알아볼게요!

 

HTML은 HyperText Markup Language의 약자로 웹페이지의 구조를 정의하는 마크업 언어 입니다.

 

HTML을 사용하기 위해서는 태그(tag)를 알아야되는데 태그가 무엇일까요?

 


1. 태그

태그는 HTML을 사용하기 위해 사용하는 하나의 명령어 라고 보시면 됩니다.

보여줄 내용을 감싸서 사용하며, 태그의 특정한 방식으로 동작 하도록 구성 되어있습니다.

 

<태그>태그가 적용될 내용</태그>

 


 

2. 태그의 규칙

태그는 꺽쇠괄호 <>로 구성 되어 있으며 시작태그종료 태그, 한 쌍으로 구성되어 있습니다.

단, 종료태그는 슬러시( / ) 기호를 앞에 붙여 태그 종료를 선언 합니다.

 

<태그명></태그명>

 


 

3. HTML 구조

HTML을 사용하기 위한 기본 구조입니다.

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>타이틀 명</title>
    </head>
    
    <body>
    	내용
    </body>
</html>

 

구조를 천천히 살펴보면 시작태그와 종료 태그로 구성이 되어있으며 태그 안의 태그로 구성 되어있습니다.

각 태그의 특징에 대해 알아볼게요.

 

<!DOCTYPE html>

HTML 버전을 알려주며 현재 HTML5 버전 입니다.

 

<html></html>

HTML 문서의 시작을 알리는 태그 입니다.

 

 

<head></head>

문서의 제목, 페이지 설명, CSS 등 HTML 정보를 포함 합니다.

 

 

<meta charset="utf-8">

문서의 언어 설정(문자 인코딩)으로 한글 사용시 글자의 깨짐 없이 표현 합니다.

 

 

<title></title>

문서의  제목을 설정합니다.

 

 

 <body></body>

문서의  본문을 표현합니다.

 

 

 


 

이렇게 HTML구성과 기본 구조에 대해 알아봤는데요.

 

다음 포스팅에선 태그의 종류와 사용 방법에 대해 알아보도록 하겠습니다 :)

 

반응형