티스토리 뷰

수업/└HTML&CSS

[HTML]vscode 기본 구조 및 태그 자동 입력

onlyun 2022. 1. 1. 11:04

HTML 기본 문법

 

(1) HTML 기본 구조

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

-vscode에서 자동 완성하는 법

새 파일을 만들어 .html 확장자로 저장 → 느낌표(!) 입력 후 엔터 대신 [tab] 누름

 

(1-1) <!DOCTYPE html>

HTML5 문서 선언.

 

(1-2) <html> ~ </html>

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

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

<html lang="en"> <!--주된 언어값을 영어로 설정-->

 

(1-3) <head> ~ </head>

웹 페이지에 표시되는 부분은 아님.

웹 페이지 정보 정의. <title> 태그, JacaScript, CSS 등

<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">

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

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

   컴퓨터 화면, 태블릿 화면, 핸드폰 화면 등 다양한 장치의 화면 크기가 다르기 때문

 

(1-4) <body> ~ </body>

웹 페이지에 보여지는 내용.

HTML 문서의 본문

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

태그 자동 입력

vscode 내장 기능으로

HTML 태그를 편하고 빠르게 입력할 수 있는 자동입력 기능

같은 태그를 여러번 반복해 입력해야 할 때,

 

그전에

작성 중인 문서를 확장자 html로 저장해야

자동입력 기능이 동작함.

 

1. 형제 태그 자동 입력

(1) 다른 태그를 동시 입력하는 법

<header>, <hr>, <section>을 동시에 입력할 때

원하는 위치에

header+hr+section

를 입력하고 엔터 대신 [ Tab ]키를 누르면 됨.

 

vscode 입력 시

 

→ 결과

같은 레벨에 태그가 자동입력된 것을 확인할 수 있음.

 

(2) 같은 태그를 동시 입력하는 법

<p> 태그를 4개 동시에 입력할 때

원하는 위치에

p*4

를 입력하고 엔터 대신 [ Tab ]키를 누르면 됨.

 

vscode 입력 시

 

→ 결과

같은 레벨에 4개의 <p>가 자동입력된 것을 확인할 수 있음.

 

 

2. 자식 태그 자동 입력

<table> 태그 안에 <tr>, 3개의 <td>를 한번에 입력할 때

table>tr>td*3

를 입력하고 엔터대신 [ Tab ]키를 누르면 됨.

 

vscode에서 입력 시

 

→ 결과

<table> 태그 안에 <tr>

<tr> 태그 안에 3개의 <td>가 자동입력되었음.

 

 

요약하면

서로 다른 태그를 형제 레벨로 만들고 싶을 때 + 이용,

같은 태그를 형제 레벨로 만들고 싶을 때 * 이용

 

태그를 자식 레벨로 만들고 싶을때 > 이용

 

 

(예제)

<body> 태그 안에 형제 레벨로 <h3>, <p>를 자동입력하고 싶을 때

body>(h3+p)

 

vscode 입력 시

 

→ 결과

<body> 태그 안에 같은 레벨로 <h3>, <p> 태그가 자동입력되었음.

저작자표시 (새창열림)

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

[HTML]링크 태그 <a>  (0) 2022.01.01
[HTML]text tag, 특수문자 입력  (0) 2022.01.01
[HTML]문서 작성할 때  (0) 2022.01.01
[vscode]HTML 기본 구조 자동완성하기  (0) 2022.01.01
[Web&HTML]기본 이론  (0) 2022.01.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
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
글 보관함