[HTML] 기본 구조

👩‍💻개발_TIL/TIL

[HTML] 기본 구조

Daisy.lee 2022. 1. 20. 16:36

1. HTML이란?

- 웹문서의 의미와 구조를 표현하는 마크업 언어

- HTML을 기술하기 위해 태그라는 것을 사용합니다.

2. 기본 구조

- HTML로 작성된 웹문서는 기본적으로 다음과 같은 태그로 이루어져 있습니다.

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="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>
</html>

2-1. <!DOCTYPE html>

- 해당 웹문서가 html5로 작성되었음을 표시합니다.

-웹문서의 최상단에 위치합니다.

2-2. <html>

- 웹문서의 시작과 끝을 표시합니다.

- 일반적으로 lang="ko"와 같이 특정 언어로 작성되었음을 표시하는 속성을 사용합니다.

- 사용하는 이유: 특정 언어로 제한해 검색할 때 검색 엔진이 특정 언어로 작성된 문서를 먼저 보여줍니다.

2-3. <head>

- 웹문서의 정보를 표시하며, 브라우저 화면에는 표시되지 않습니다.

- <head> 태그 안에는 <meta> 태그와 <title> 태그가 들어갑니다.

2-3-1. <meta>

- 메타 정보, 즉 웹문서와 관련된 정보를 표시합니다.

- 이러한 정보를 <meta>라는 태그에 속성값으로 작성합니다.

- 그 중에서 charset 속성은 화면에 글자를 표시할 때 어떤 인코딩을 사용할 것인지 정하며,

일반적으로는 UTF-8 방식을 사용합니다. (UTF-8 방식 아니면 한글이 깨질 수 있습니다.)

자동완성 기능으로도 채워지는 속성입니다.

- 더 많은 <meta> 태그의 속성은 MDN 문서에서 확인할 수 있습니다.

2-3-2. <title>

- 웹브라우저에 제목 표시줄에 표시되는 웹문서의 제목입니다.

- 검색 엔진이 이를 보고 웹문서의 내용을 추측하므로, 문서의 내용을 잘 설명하는 제목을 지어주면 좋을 것 같습니다.

<body>

- 실질적으로 사용자에게 보여지는 내용을 표시합니다.

웹문서는 이러한 기본 구조(템플릿)를 갖춘 다음 다양한 태그와 속성을 활용해 사용자에게 보여줍니다.

하지만 일일이 작성하는 것은 매우 불편하므로, Visual Studio Code와 같은 IDE에서는 자동완성 기능을 제공합니다.

해당 파일의 언어를 HTML로 설정하고,

!(느낌표)를 타이핑 한 다음 -> Tab 키를 눌러주면 자동 완성 됩니다.

❓혹시 위와 같은 방법으로 해도 자동 완성이 안 될 경우,

Visual Studio Code 내의 Marketplace에서 'HTML Snippets'라는

확장 프로그램을 다운로드하고 다시 실행하면 자동완성이 잘 됩니다. (출처)

<Do it! HTML+CSS+자바스크립트 웹 표준의 정석>을 읽고 정리한 내용입니다.

저작자표시 비영리 변경금지

'👩‍💻개발_TIL > TIL' 카테고리의 다른 글

[리액트] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다 (0)	2022.01.27
[HTML] 시맨틱 태그 (0)	2022.01.20
[타입스크립트] 연산자를 이용한 타입 정의 (0)	2022.01.15
[타입스크립트] 인터페이스 (0)	2022.01.14
[타입스크립트] 타입스크립트 프로젝트 시작하는 방법 (0)	2022.01.12

현재글[HTML] 기본 구조

다양한 형태의 기록을 좋아합니다. (더이상 블로그를 운영하지 않지만 약 4개월동안 IT 서비스 기획을 배운 내용을 아카이빙하기 위해 남겨두었습니다.😊)

Today :
Yesterday :

daisylee