web sprit

css 네이밍 작업을 하다 보면 대부분 -(대시)로 이름을 짓는다. 기본적인 에디터에서 단어를 더블클릭하면 _(언더바)의 경우 언더바로 이어진 부분은 모두 선택이 가능하다. 그 반면 대시로 네이밍을 작성하여 마우스로 더블클릭을 하면 대시 전까지만 선택되게 된다. 이게 은근히 작업속도를 느리게 만드는 요인이기도 하다. VS Code 에서 대시를 사용하여도 더블클릭시 모두 선택할 수 있는 설정에 대해 알아 보도록 하자. VS Code를 실행하고 맨 하단 왼쪽에 톱니바퀴 모양 설정 버튼이 있다. 누르고 Settings로 들어간다. 그럼 검색창이 나오는데 wordSeparators 라고 적어주자. 그럼 다음과 같은 화면이 검색되어 나온다. 위의 빨간 박스 안을 주목하자. 안에 -(대시)가 존재하는데 대시만 지운..

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+..