* 작업환경 세팅 부분은 설정할 때마다 글 수정 😎
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
2. 크롬 확장 프로그램 : 웹 개발할때 유용한 프로그램 모음!!
① page ruler redux : 내부 요소들의 길이를 측정할 때 주로 사용하는 확장 프로그램이다.
② color zilla : 컬러코드를 쉽게 알아낼 수 있는 확장 프로그램이다.
'웹' 카테고리의 다른 글
[코딩 공부_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 |
댓글