[vscode]HTML 기본 구조 자동완성하기

티스토리 뷰

수업/└HTML&CSS

[vscode]HTML 기본 구조 자동완성하기

onlyun 2022. 1. 1. 13:41

※ HTML 기본 구조

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title> Web page Tab </title>
</head>
<body>
    <h3></h3>
    <p></p>
</body>
</html>

vscode에서

HTML 기본 구조를 자동완성하는 법

1. 확장자 html로 저장

vscode 실행 후,

새 파일을 만든 다음 '파일명.html'로 저장해야 자동입력 기능이 활성화된다.

2. ! + [ Tab ]

! 입력 후 엔터 대신 [ Tab ]키를 누른다.

아래와 같이

HTML 기본 구조가 자동완성된다.

기본 구조외에도 자동입력된 내용들이 있는데

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> HTML 기본 구조 </title>
</head>
<body>
    
</body>
</html>

각 태그 설명 ↓

<!DOCTYPE html> <!-- HTML5 문서 선언 -->

<html lang="ko">
</html>

HTML 문서의 시작과 끝을 알림.

언어(lang) 속성은 주된 언어값을 설정하는 것.

<head>
    <meta charset=""UTF-8>
    <title> 웹 페이지 탭 </title>
</head>

웹 페이지에 표시되지 않는 웹 페이지 정보 정의.

(참고) UTF-8 : 세계의 모든 문자와 기호를 포함하는 문자 집합

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

웹 페이지가 출력되는 장치의 화면 크기에 맞춰 조절되는 것을 설정한 것.

컴퓨터 화면, 태블릿 화면, 핸드폰 화면 등 장치에 따라 화면 크기가 다 다르기 때문.

<body>
</body>

HTML 문서의 본문. 웹 페이지에 보여지는 내용.

시멘틱 구조 : <header>, <nav>, <section>, <aside>, <footer>

저작자표시 (새창열림)

'수업 > └HTML&CSS' 카테고리의 다른 글

[HTML]링크 태그 <a> (0)	2022.01.01
[HTML]text tag, 특수문자 입력 (0)	2022.01.01
[HTML]문서 작성할 때 (0)	2022.01.01
[HTML]vscode 기본 구조 및 태그 자동 입력 (0)	2022.01.01
[Web&HTML]기본 이론 (0)	2022.01.01

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/01 »
일	월	화	수	목	금	토
				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

글 보관함

LOG.info("yun's dev");

티스토리 뷰