• Q&A
  • 회원가입
  • 로그인

[web] Visual Studio Code (= VScode) 에디터 설치 + 한글팩 설치 + 코드 입력 결과 확인 + 추천 확장프로그램 + Emmet (=에밋 = 코드단축입력키) + 글자 크기 + 주석 색깔 변경

333  

Visual Studio Code 설치

 

1.

파란색 버튼 클릭해 파일 다운

https://code.visualstudio.com/

https://code.visualstudio.com/download

 

2.

설치 중 추가 정보 입력 화면 나오면,

이미 설치된 에디터 없을 시 모두 체크

 

 

 

한글팩 설치 + 코드 입력 결과 확인

 

1. 

Visual Studio Code 코드 실행.

 

2. 

좌측에서 田 (= 확장 프로그램) 아이콘 클릭.

 

3.

한글팩 설치. (= 한글 메뉴 인터페이스로 변경)

korean 검색 > 맨 위 검색결과 선택 > install 클릭해 설치.

 

4. 

live server 확장팩 설치. (= 코드 입력 결과 확인)

live server 검색・선택 후, install 클릭해 설치.

 

4-1. 

코드 입력 결과 확인하는  브라우저 창 여는 방법

방법1 : (Alt + L) 입력 후, 바로 (Alt + O) 입력. (즉, Alt 키 누른 채, L키와 O키 순서대로 누름.)

방법2 : 하단 하늘색 라인바에 있는 Go Live 버튼 클릭.
PS. 

1. 클릭하면 버튼이 포트 번호로 바뀌는데 다시 클릭하면 Go Live로 바뀜.

2. Live Sever 경우, <html> <head> <body> 등 태그 사용 때만 적용.

 

4-2. 

에디터창과 브라우저창을 나란히 50% 열어두고 작업하는 법

1. 에디터창 상단 타이틀 라인 빈곳을 클릭 후, (윈도우키 + 왼쪽방향키)

2. 브라우저창 상단 타이틀 라인 빈곳을 클릭 후, (윈도우키 + 오른쪽방향키)

 

 

PS. 설치 권장 확장 프로그램 10 + 2

 

Meterial Theme

배경색 테마 설정.

 

Meterial Icon Theme

배경색 테마 설정.

 

Prettier - Code formatter

코드 포맷.
※ 단축키 (Ctrl + ,) > save 검색 > Format On Save 사용 체크.

※ 단축키 (Ctrl _ ,) > Tab Width 검색 > Pritter: Tab Widh를 2로 설정. (cf. 그누보드 경우: 4)

※ 단축키 (Ctrl _ ,) > prettier quote 검색 > Prittier: Single Quote 사용 체크.

 

Bracket Pair Colorizer

괄호마다 다른 색깔 넣기.

 

Indent Rainbow

들여쓰기 된 부분에 색깔 넣기.

 

Auto Rename Tag

시작태그 종료태그 한번에 변경.

 

CSS Peek

정의된 CSS 빨리 찾기. ※ (Ctrl키 + 해당 선택자 클릭)하면 정의된 CSS 위치로 이동.

 

HTML CSS Suppport

선택자 자동 완성. (html 경우)

 

Live server

코드 입력 결과 바로 확인. (위에서 이미 설명.)

 

Markdown Preview

readme.md 마크다운 파일 작성 시 결과 확인 가능할 툴.

https://stackedit.io/ (스택에디터 - 마크다운 작성 툴. 사용법)

 


PS.

 

HTML to CSS autocompletion

선택자 자동 완성 (stylesheet 경우)

 

htmltagwrap

텍스트를 태그로 쉽게 감싸기. 

텍스트 드래그 선택 후, (Alt + W)

 

By. 엘리 님 (200220) 

https://youtu.be/bS9yTI2fC0w (추천 확장프로그램 10개)

https://youtu.be/m7wsrVQsVjI (Emmet 사용법 + HTML to CSS autocompletion)

 

Emmet (= 코드 입력 단축키)

공식 홈페이지: https://emmet.io/


※ vscode 실행 후, 직접 타이핑. (복사 붙여넣기 방식으로는 작동 X)

※ Tab키 대신 Enter키도 됨. 

 

!  입력 후 Tab키

html 템플릿

 

!! 입력 후, Tab키

<!DOCTYPE html>

 

#id_name  입력 후, Tab키

<div id="id_name"></div>

 

.class_name 입력 후, Tab키

<div class="class_name"></div>

 

div>ul>(li.hz$>a)*4 입력 후, Tab키

주의: 만약, () 기호 사용 안 하면 li 하나에 a가 4개 들어감.

 

div>(ul>li{$}*5)+(ol>li{$}*3) 입력 후, Tab키

직접 확인. (+ 기호 : 형제)

 

div>ul>li*4^ol>li*3 입력 후, Tab키

직접 확인. (^ 기호 : 부모의 형제)

 

p{homzzang} 입력 후, Tab키

<p>homzzang</p> ({} 기호 : 내용 입력)

 

p.class${item $}*5 입려 후, Tab키

<p class="class1">item 1</p>

.... 

<p class="class5">item 5</p>

 

lorem 입력 후, Tab키

Lorem ipsum...으로 시작하는 표준 채우기 텍스트

 

p>lorem4 입력 후, Tab키

<p>Lorem ipsum dolor sit</p>  (※ 4개 단어 표준 채우기 텍스트)

 

table>tr>td*5 입력 후, Tab키

1행 5열 테이블 생성

PS. (Shift + Alt) 누른 채 5개 셀을 드래그 선택 후, 입력하면 모든 셀에 같은 내용 입력 가능.

 

table>tr*2>td*5{홈짱닷컴} 입력 후, Tab키

2행 5열의 테이블 만든 후, 각 셀에 홈짱닷컴 입력

 

ol>li*5{목차 $} 또는 ol>li*5>{목차 $} 입력 후, Tab키.

순서 있는 리스트 5개 만든 후, 안에 목차 1~ 목차 5 생성.

 

tag_name 입력 후, Tab키.

tag_name의 시작태그와 종료태그 입력.

(예) div 입력 후 Tab키 치면, <div></div> 입력 됨.

 

h$*6 입력 후, Tab키
h1 ~ h6 태그 입력

 

div.box>div.slide>a*4>img[alt="slide$"] 입력 후, Tab 키

https://codepen.io/sinbi/pen/yLOObdB

 

 

PS. 유용한 단축키

 

복사

드래그 선택 후, (Shift + Alt + ▽).

PS. (Shift + Alt + △)키도 동일.

 

코드 정렬. (※ 파일 확장자가 html인 경우만 되는 듯함.)

(Ctrl + A) 후, (Ctrl + K + F)

 

 

 

vscode 글자 크기

방법1. 


vscode 실행

> 좌측 하단 톱니바퀴 > settings 클릭

(또는, Ctrl + , 클릭)

font size 키워드로 검색

Editor: Font Size 부분의 숫자 14를 수정. 

 


방법2. ★

 

vscode 실행

> 좌측 하단 톱니바퀴 > settings 클릭

(또는, Ctrl + , 클릭)

zoom 키워드로 검색

Editor: Mouse Wheel Zoom  부분의 체크박스 체크. 

> 에디터 화면에서 (Ctrl 키 + 마우스휠) 이용해 조절.

 

 

 

VScode 주석 색깔 변경

 

vscode 실행

> 좌측 하단 톱니바퀴 > settings 클릭

(또는, Ctrl + , 클릭)

> .json 키워드로 검색

> Edit in settings.json 링크 클릭. (※ 우측창 중상단에 위치.)

> 아래 구조가 되게 파란색코드 추가 후, Ctrl + S (저장).

 

  "liveServer.settings.donotVerifyTags": true,

  "liveServer.settings.donotShowInfoMsg": true,

  "editor.tokenColorCustomizations": {

    "comments": "#00b933"

  },

 



방문자 수

오늘 1,537
어제 1,394
최대 2,397
이달 39,528
전체 987,274
Since 2012