* 작업환경 세팅 부분은 설정할 때마다 글 수정 😎
1. VSC (https://code.visualstudio.com/download) : 웹 개발을 위한 소스 코드 편집기 프로그램으로, 마이크로 소프트 사에서 제작한 프로그램이다. 작업에 편리한 기능을 제공하기 때문에 많은 개발자가 사용하는 프로그램이다.
① html에서 기본 필요 코드 자동 완성하는 방법 : ! + TAB
→ 이렇게 사용하게 되면 lang="en" 즉 영어로 되어 있기 때문에 lang="ko"로 변경해야하는 번거로움이 있다.
그 번거로움을 해결하려면 아래의 방법을 이용해보자!!
② html 기본 필요 코드 + lang="ko"로 자동 완성하는 방법
- VSC > 왼쪽 아래 톱니바퀴 > 사용자 코드 조각 설정 > html.json 작성
> 선택 후, 아래 내용을 복사 붙여넣기 하기 > 저장하고 html 파일에서 korea 입력 후 enter하면 자동 완성이 된다.
{
"korea html form" : {
"prefix": "korea-html-form",
"body": [
"<!DOCTYPE html>",
"<html lang=\"ko\">",
"<head>",
"<meta charset=\"UTF-8\">",
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"<title>$1</title>",
"</head>",
"<body>",
"$2",
"</body>",
"</html>"
],
"description": "html 자동완성 추가"
}
}
③ VSC 단축키 설정 : VSC > 왼쪽 아래 톱니바퀴 모양 > 바로가기 키 >
a) 위로 복사 : ctrl + alt + ↑
b) 아래로 복사 : ctrl + alt + ↓
④ Open with Live Server : 코드를 저장하면 바로 결과화면을 보여주는 VSC 기능
- 설치방법 : 확장(ctrl+shtift+x 또는 왼쪽 테트리스 같이 생긴 버튼) > "Open with Live Server" 검색 > 설치
- 장점 : 코드를 저장하고 브라우저를 새로고침해야하는 번거로움을 해결해주는 기능이다.
- live server를 바로 열 수 있는 단축키는 alt+L 후 바로 alt+O이다.
⑤ korean language pack for visual studio code : 영어로 되어있는 VSC를 한국어로 변경해주는 기능
- 설치방법 : 확장(ctrl+shtift+x 또는 왼쪽 테트리스 같이 생긴 버튼) > "korean language pack for visual studio code" 검색 > 설치 > VSC 다시 시작
- 한국어로 사용하면 편하지만 영어로 사용하는 것을 권장한다!
⑥ indent-rainbow : 코드 내 빈칸을 색깔별로 구분지어주는 확장프로그램으로, 코드를 정리할 때 편리한 기능이다.
- 설치방법 : 확장(ctrl+shtift+x 또는 왼쪽 테트리스 같이 생긴 버튼) > "indent-rainbow" 검색 > 설치
⑦ vscode-icons : 확장자별로 명확한 아이콘이 나타나서 더 보기 쉬워진다.
- 설치방법 : 확장(ctrl+shtift+x 또는 왼쪽 테트리스 같이 생긴 버튼) > "vscode-icons" 검색 > 설치
** 세팅 관련 추가 : https://teserre.tistory.com/9
Visual Studio Code 추천 확장(extension) 플러그인
🔔 이 게시글은 HTML, JavaScript, PHP, React 관련 플러그인에 관해서만 정리되어 있습니다. Visual Studio Code(vs code)는 마이크로 소프트에서 개발한 문서 편집기로 웹 개발에 주로 사용된다. 초기에는 Atom
teserre.tistory.com
2. 크롬 확장 프로그램 : 웹 개발할때 유용한 프로그램 모음!!
① page ruler redux : 내부 요소들의 길이를 측정할 때 주로 사용하는 확장 프로그램이다.
Page Ruler Redux
A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page. 💻
chrome.google.com
② color zilla : 컬러코드를 쉽게 알아낼 수 있는 확장 프로그램이다.
ColorZilla Installed
Features Eyedropper - get the color of any pixel or area on the page An advanced Color Picker similar to ones that can be found in Photoshop and Paint Shop Pro Webpage Color Analyzer - analyze DOM element colors on any Web page, locate corresponding elemen
www.colorzilla.com
'웹' 카테고리의 다른 글
| [코딩 공부_110] 코딩할 때, 이렇게 하자는 나의 다짐! (0) | 2021.12.04 |
|---|---|
| [코딩 공부_109] css / js 파일 압축 풀기 (0) | 2021.10.20 |
| [코딩 공부_102] 동영상으로 웹 디자인 공부해보자! (0) | 2021.07.01 |
| [코딩 공부_100] (**중요) 웹 호환성과 웹 접근성 (0) | 2021.06.27 |
| [코딩 공부_80] github를 활용해보자 (0) | 2021.05.23 |
댓글