앱 만들기/비쥬얼스튜디오 코드

비쥬얼스튜디오 코드 html 기본 태그 생성방법

나도 처음이야 2023. 1. 22.

 

 

HTML 문서의 기본 구조

HTML 문서는 기본적인 구조를 가지고 있습니다. 예제를 통해 알아보겠습니다. 안녕하세요. 웹 문서 입니다. HTML 은 크게 3가지 태그 로 구분됩니다. 태그 란 기호를 가진 html 의 최소 단위로 html 요

soo0100.tistory.com

지난 시간 html 문서의 기본 구조를 알아보았습니다.

기본 태그 구조를 하나하나 코딩 하기에는 번거롭기도 하고 다 외우기도 쉽지 않습니다.

비주얼스튜디오 코드를 사용하면 손쉽게 html 기본 구조를 잡아줄 수 있습니다.

기본 구조 위에 자신이 작성하고 싶은 내용만 추가하면 되겠습니다.

 

1. 비쥬얼 스튜디오 코드에서 새로운 파일을 하나 만듭니다.

  - test.html 로 만들어 봅니다.

비쥬얼 스튜디오 코드

위처럼 test.html 파일에는 아무런 태그 정보가 없습니다.

비주얼 스튜디오 코드의 도움을 받아 기본 태그정보를 입력해 보겠습니다.

2. 느낌표를 입력하면 자동완성 팝업이 나옵니다.

   - 첫 번째 커서가 위치했을 때 Enter 혹은 tab 키를 누릅니다.

3. 기본 정보 태그 들이 입력되었습니다.

이제 body 부분에 웹문서에서 보여줄 내용들을 입력하면 되겠습니다.

<html lang="ko"> 로 변경해주면 유저가 한글 웹문서 검색 시 해당 웹문서가 먼저 검색될 수 있습니다.

비주얼스튜디오 코드에서 웹 문서 기본태그들을 생성하는 방법을 알아보았습니다.

감사합니다.

반응형

댓글