web sprit

vscode에서 Emmet은 기본 내장되어 있다. 간단하게 설명하자면 Emmet은 단축어를 사용하여 html 또는 css를 짧게 작성하고 tab키(단축키)를 누르면 긴 태그를 완성하는데 기존 html 문서에서 emmet을 사용할 수 있다. 그럼 왜 명령팔레트를 이용하여 Emmet을 사용해야 하는가? 이전 sublime text tool을 이용했던 나로선 이 기능이 작업 능률을 올리는데 꼭 필요하다고 느낀다. vscode로 변경하면서 sublime 에서 사용했던 이 기능(Ctrl + Shift + G)이 vscode에도 있다고 생각한다. 한번 찾아보았다. 역시 존재한다. 바로 설명 들어가보자. 1. 명령팔레트 실행 Ctrl + Shift + P 2. 'wrap' 이라고 치고 Emmet: Wrap indiv..

vscode 실행하여 Extensions에 들어간다. live sass를 검색 해보면 Extensions 목록에 Live Sass Compiler 가 있다. 그리고 Live Sass Compiler을 사용하기 위해선 컴파일하고 화면에서 확인하기 위해선 가상서버를 생성해주는 Live server 익스텐션도 필요하다. # 설치 (install) Live Sass Compiler Live server 설치를 했다면 따로 설정이 필요하다. 설정에 대한 내용은 아래 URL에 상세히 나와 있다. ritwickdey/vscode-live-sass-compiler Compile Sass or Scss file to CSS at realtime with live browser reload feature. - ritwic..

소스트리는 git을 활용하기 위한 GUI 툴로 기존 커맨드라인 명령어로 git을 관리하기보다는 보다 편하고 직관적인 화면을 제공합니다. 이러한 편이성을 제공해주는 소스트리 설치방법에 관해 정리해 봅니다. 우선 소스트리 사이트로 이동합니다. Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac. www.sourcetreeapp.com 사이트로 이동하면 다운받을 수 있는 버튼이 존재합니다. 저는 Window 환경에서 설치하도록 하겠습니다. 아래와 같이 윈도우용 버튼을 ..

VSCode의 장점이라고 하면 툴안에서 명령어를 실행할 수 있는 터미널이 존재 하고 있습니다. 터미널이라는 용어는 맥북에서 컴퓨터의 명령어를 사용할 수 있는 툴 명칭인데요, 윈도우는 cmd라는 것이 있죠. 기타 그 밖에 powershell, Cmder 등등 많은 프로그램이 존재하는데 여기서는 터미널이라고 통칭하겠습니다. 기존 VSCode 연결되어 있는 터미널은 powershell로 되어있는데, 이것을 Cmder 로 변경하려 합니다. 1. 설정이동. 단추키(ctrl + ,)를 이용하거나 VSCode 화면에서 하단 왼쪽의 톱니 바퀴모양을 클릭하고 Settings를 클릭합니다. 2. settings.json 파일 열고 내용 기입. Settings에 들어오면 settings.json으로 들어가서 소스를 추가 해..

영어로 툴을 사용하는 것을 지향하지만 영어는 늘 적응이 힘들다... VSCode의 언어를 한국어로 변경하고 다시 영어로 변경하는 방법에 대해 알아보겠습니다. 1. 영어를 한국어로 변경하기. 1-1. VSCode 실행. 1-2. Extensions 클릭. 검색창에 "korea" 입력. 1-3. Korean Language Pack for Visual Studio Code 패키지 검색 후 install 클릭하여 설치. 1-4. 우측하단에 Restart Now 클릭. 1-5. 다시 실행되면서 한국어로 바뀐화면을 확인할 수 있습니다. 2. 한국어를 영어로 변경하기. 2-1. VSCode를 실행하고 Command palette(명령팔레트)를 실행해 준다. (단축키 : ctrl + shift + p). 2-2. 검..

VSCode 설치방법에 대해 알아 보겠습니다. 다운받아 설치하는 것은 별 의미없다고 생각할 수 있겠지만 초보자 분들에게 안내한다는 심정으로 정리해 보겠습니다. VSCode는 줄임말로 풀네임은 Visual Studio Code 입니다. 마이크로 소프트에서 제공하는 무료 에디터 툴입니다. 원래는 Sublime Text를 사용했으나 이참에 정리하면서 VSCode로 갈아 타려한다. 그럼 VSCode 설치방법에 대해 알아 보겠습니다. 1. 설치파일 다운받기. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web a..

요즘 VS Code 가 작업툴로 많이 이용되고 있는거 같아 저도 사용해 보려 합니다.검색하다 찾아보니 단축키 PDF 파일을 찾았네여요~ ^^ 별거 아니지만 필요하신 분은 참고 바랍니다.

프로젝트를 진행하다보면 명령창을 이용하여 작업하는 경우가 빈번하게 생긴다. 그래서 Sublime Text로 명령창을 열어 사용하는 방법에 대하여 살펴보려 한다. 방범은 몇가지 있다.서브라임안에서 cmd 창을 열어서 사용하는 경우도 있고 단축키를 누르면 자동으로 프로젝트 경로에서 cmd 창을 열 수 있는 방법이 있다. 첫번째 방범은 서브라임안에서 명령어를 쓸 수 있다는 것에 매우 편리하고 좋지만,기존 윈도우 사용자라면 윈도우에서 지원하는 CMD를 제공하기 떄문에CLI 명령어 중 실행이 안되는 부분도 있기 때문에 비추.!!! 두번째 방법에 대하여 설명하려 한다. 1. 설치우선 서브라임을 실행하고,Ctrl + Shift + P 를 눌러서 명령창을 실행해 준다.검색창에 install만 치면 install pac..

서브라임을 사용하지만 기존의 엉망인 들여쓰기 코드를 정렬하기 위해 정렬해주는 사이트의 도움을 받아 정리하고 했습니다. 서브라임에도 정리해주는 기능이 있을꺼 같아 검색해보니 결과가 있군요!!! 다른분에게도 도움이 될까해 정리해 봅니다. 우선 sublime text를 실행해 주세요. 1. 상단메뉴에 [Preferences] > [Key Bindings] 클릭 2. 2개의 탭 화면 중 끝에 User 가 붙은 탭에 내용을 추가해 줍니다.추가할 내용은 아래와 같습니다. 123 { "keys": ["ctrl+shift+'"], "command": "reindent" , "args": { "single_line": false } } Colored by Color Scriptercs 위의 단축키["ctrl+shift+..

SCSS를 컴파일 하기위해Front 기술로 nodeJS 나 SASS 또는 Compass 로 컴파일하여 css 로 변환해 줍니다. 그 보다 좀더 간편한 작업에 있어서브라임텍스트를 이용한 SCSS 컴파일 방법에 대해 알아보려 합니다. 우선 Ruby 와 scss가 설치 되어 있어야 합니다.그에 관한 설명은 하단을 참고하시기 바랍니다.SASS 설치방법 서브라임에서 SASS관련 패키지가 존재합니다.ctrl + shift + P 를 누르시고 PCI 를 누르시어 package install을 선택!sass 와 sass Build 패키지를 설치해 줍니다. 우선 어느정도 준비는 끝났습니다.그럼 컴파일 하는 패키지를 직접 설치해 보죠~ https://github.com/alexlitel/Sass-Build-SublimeT..