티스토리 뷰

>>>블로그 이전했습니다<<<

코딩/HTML

HTML 시작하기

GalaKrond 2022. 8. 24. 08:17
728x90

 

안녕하세요, 마늘입니다.

오늘은 HTML의 기본적인 구조에 대해서 알아보도록 하겠습니다.

이 글은 < 한권으로 끝내는 웹 기본 교과서 HTML + CSS + JS 웹 표준의 정석 > 을 기반으로 적어둔 것이라는 점 참고해주세요.

1. HTML이란?

HTML이란 'Hypertext Markup Language' 으로,

우리가 웹 페이지에 무엇을 표시할 것일지를 적는 언어, 프로그래밍 언어가 아니라, 마크업 언어입니다.

여기서 마크업 언어란, 문서나 데이터 구조를 규칙에 따라 작성하는 언어입니다.

YAML(.yml), JSON(.json), 등등이 여기에 속하는데요,

자세한 내용은 해당 내용을 참고해봅시다.

https://blog.naver.com/dktmrorl/222167784197

 

2. HTML의 구조

HTML은 대략적으로 태그로 감싸진 구조로 이루어져 있는데요. 천천히 뜯어 보면...

 

<!DOCTYPE html>
<html lang="ko">
	<head>
    	<meta charset = "UTF-8">
        <title>HTML 기본 문서</title>
    </head>
    
    <body>
    	<h1>프론트엔드 웹 개발</h1>
        <hr>
        <p>HTML</p>
        <p>CSS</p>
        <p>JavaScript</p>
    </body>
</html>

이 코드가 실행되면, 다음과 같이 결과가 나오게 됩니다.

 

HTML 기본 문서

프론트엔드 웹 개발

HTML

CSS

JavaScript

 

항상 그래왔듯, 무엇을 의미하는 것인지 알아봐야겠죠?

<>으로 감싸져 있는 것을 우리는 태그(tag)라고 부릅니다.

<tag_name>으로 시작해서 </tag_name> 으로 끝나는게 보통 국룰같긴 한데,

당장 <!DOCTYPE html> 처럼 예외도 있으니 차차 공부해나가면서 같이 알아보도록 합시다 :)

존재하는 모든 태그들을 알아보려면 해당 링크를 방문해봅시다 :D

http://www.tcpschool.com/html-tags/intro

TCPSchool 그는 신이야!

 

그럼 지금부터 한줄 한줄 직접 알아보도록 합시다.

 

<!DOCTYPE html> : 이 문서가 HTML로 만들어졌다는 것을 의미합니다.

 

<html lang = ko> : 해당 웹이 사용하는 언어를 지정합니다. 단순히 웹상 언어를 지정하는 것 뿐만이 아닌, TTS 기능 등이 이 HTML 태그를 보고 해당 언어를 판별하기에 어디서든 필수적으로 사용하는 것이 권장되고 있습니다.

 

<meta charset = "UTF-8"> : 해당 웹을 무엇으로 인코딩할지를 지정합니다.

만약 한글을 지원하지 않는 인코딩을 사용한다면 글씨가 깨지겠죠?

 

<title> : 웹의 제목을 지정합니다.

 

<html> : HTML 파일의 시작과 끝을 의미합니다. <html>부터 내용을 읽고, </html> 이후로는 아무 내용도 없어야 합니다. 

웹 브라우저는 <html>을 만나고 나서부터 </html>이 나올 때까지 소스코드를 읽습니다.

 

<head> : <head>는 웹 문서를 해석하기 위해 필요한 정보를 적는 곳입니다. 웹의 이름, 인코딩 등등이 들어갑니다.

 

<body> : 실제로 우리가 볼 웹의 내용입니다. 대부분의 태그는 시각적 표시를 위해 해당 태그 안에 들어가게 됩니다. 

 

다음 시간에는 웹 문서의 뼈대라고 할 수 있는 header / footer에 대해 알아보도록 하겠습니다.

 

부족한 글이지만 항상 지나가면서 봐주시는 모든 분들께 감사합니다 :D

내용이 도움이 되었다면 제게 큰 힘이 되는 하트나 댓글 부탁드립니다 :)

 

 

 

 

 

728x90

'코딩 > HTML' 카테고리의 다른 글

HTML 시작하기 (2)  (0) 2022.10.23
댓글
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함