[HTML 기초 문법] HTML 태그와 구조

[HTML 기초 문법] HTML 태그와 구조Style Sheet/CSS2021. 4. 8. 22:18@__Evening

Table of Contents

안녕하세요!

현재 멋쟁이 사자처럼 동아리에서 웹 기초부터 수업을 듣고 있는데 커리큘럼에

HTML, CSS, JavaScript, Python, Django를 배우는데

그중 HTML의 수업 내용을 블로그에 포스팅할까 합니다.

HTML이란? HyperText Markup Language의 약자

HTML 문서라고도 하며, 템플릿(Template)이라고도 합니다. HTML 태그들로 구성되는 언어입니다.

HTML 태그(TAG)

HTML 태그는 내용을 나누고 어떤 역할을 하는지 HTML 안에서 알려주는 역할을 합니다.

태그(TAG) 이름을 괄호(< >)로 감싸 표현합니다.

HTML의 가장 기본적인 구조로 설명드리겠습니다.

지난 시간에 소스 편집기 VSCode를 설치했기 때문에 저는 VSCode로 실습을 진행하겠습니다.

따로 소스 편집기가 없으신 분께서는 윈도우 메모장을 사용하셔도 괜찮습니다.

<!DOCTYPE html> <!-- 문서 타입을 정의 문서 타입은 HTML입니다! 안써주셔도 상관없습니다. -->
<html lang="ko"> <!-- html의 언어(language)를 정해주는 태그입니다. en: 영어, ko: 한글 -->
<head>
    <meta charset="UTF-8"> <!-- UTF-8은 유니코드입니다 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 안써주셔도 상관없습니다. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 안써주셔도 상관없습니다. -->
    <title>Document</title> <!-- 문서의 제목을 정해주는 태그입니다. -->
</head>
<body>
    <!-- body 태그는 사용자에게 보여질 내용들입니다. -->
</body>
</html>

태그 설명
<!DOCTYPE html>	문서의 형식(타입)을 보여주는 태그
<html lang="ko">	html 문서의 언어를 정해주는 태그
<meta charset="UTF-8">	문자열셋 관련 유니코드를 정해주는 태그
<title> ~ </title>	HTML 문서의 제목을 정해주는 태그
<html> ~ </html>	HTML 문서의 루트 요소를 정의하는 태그
<head> ~ </head>	HTML 문서의 메타데이터(Meta data)를 정해주는 태그
<body> ~ </body>	웹 브라우저를 통해 사용자에게 보여지는 내용(Content) 을 보여주는 태그

위의 코드는 HTML의 기본 구조입니다.

HTML은 위에서 보시다시피 <>태그로 시작해서 그대로 끝나는 태그가 있고,

<>태그로 시작해서 </>태그로 끝나는 태그가 있습니다.

"기본 구조인데 코드가 많아서 작성하기 힘들어요! 쉽게 작성할 수 없을까요?"

"VSCode에서 기본 구조를 제공합니다"
!, html:5

앞으로 HTML의 태그를 사용하시면 알겠지만 대부분의 태그는 <> ~ </>로 시작과 끝을 정의하며,

소수의 태그는 <>로 시작하여 끝 태그가 존재하지 않습니다.

<!DOCTYPE html> <!-- 문서 타입을 정의 문서 타입은 HTML입니다! 안써주셔도 상관없습니다. -->
<html lang="ko"> <!-- html의 언어(language)를 정해주는 태그입니다. en: 영어, ko: 한글 -->
<head>
    <meta charset="UTF-8"> <!-- UTF-8은 유니코드입니다 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>저녁의 개발노트</title> <!-- 문서의 제목을 정해주는 태그입니다. -->
</head>
<body>

    멋쟁이 사자처럼 태그와 구조
    <!-- body 태그는 사용자에게 보여질 내용들입니다. -->
</body>
</html>

다음과 같이 코드를 작성한 후에 Live Server를 눌러서 미리보기로 확인해보겠습니다!

위의 표에서 보신 것처럼 <title>~</title>은 문서의 제목 "저녁의 개발노트"라는 문자열이 들어갔고,

<body>~</body>안에는 "멋쟁이 사자처럼 태그와 구조"라는

문자열이 들어가 사용자가 볼 수 있는 Content가 되었습니다.

오늘은 HTML의 태그와 기본적인 구조를 알아봤습니다.

고생하셨습니다!

저작자표시 비영리

'Style Sheet > CSS' 카테고리의 다른 글

[HTML 기초 문법] 텍스트 관련 태그(더미 텍스트로 실습하기) (2)	2021.04.11
[HTML 기초 문법] VSCode 설치 및 기초 설정(소스 코드 편집기), live server (0)	2021.04.08

@__Evening :: Good Evening

클라우드, 개발, 자격증, 취업 정보 등 IT 정보 공간

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

'Style Sheet > CSS' 카테고리의 다른 글

티스토리툴바