web sprit

기본 단축키 Alt + Z 코드를 한줄로 보거나 한 화면에 보거나 하는 토글 단축키 Ctrl + K S 열려있는 탭 모두 저장. 단축키 설정 - Wrap with Abbreviation(Ctrl + Shift + G) Emmet에 있는 기능 명령창(Ctrl + Shift + P)를 열어 wrap을 검색 하면 아래 내용이 나오는데 "Wrap with Abbreviation" 선택해서 태그를 입력(ex: li, li*)하면 선택영역을 태그로 감싸준다. Emmet: Wrap with Abbreviation ----- O Emmet: Wrap Individual Lines Abbreviation 명령창에서 검색해서 단축키 지정 가능하다. 검색하여 나오는 단어에 마우스를 데어보면 우측에 톱니바뀌가 나오는데 클릭하..

VSCode 익스텐션 설치 경로 : C:/Users/사용자이름/.vscode/extensions IntelliSense for CSS class names in HTML - Visual Studio Marketplace Extension for Visual Studio Code - CSS class name completion for the HTML class attribute based on the definitions found in your workspace. marketplace.visualstudio.com 작업영역안에서 정의된 클래스(class)명을 자동완성으로 보여줍니다. 좋은점은 비슷한 클래스명의 분류를 도와줄 뿐만 아니라 중복클래스를 피할 수 있기때문에 매우 유용하다 생각이 듭니다. vs..

코딩툴로 서브라임을 사용하면서 자주 사용하는 기능인데 어느날 부턴가 단축키가 먹질 않았습니다. 내용을 찾아보니 아래 참고 URL로 확인할 수 있었습니다. 아예 기능이 없어진것이 아니기 때문에 다시 키설정을 통하여 사용하는 방법에 대해 알아 보겠습니다. 이 기능은 일종의 Emmet을 이용한 기능으로 단축키를 확인하기 위해서는 package 의 Emmet을 User에 단축키를 설정해 줘야 합니다. Preferences >> Package Settings >> Emmet >> Key Bindings 열린 화면에서 왼쪽이 Emmet 기본 설정부분이고 오른쪽이 User 부분으로 사용하고 싶은 단축키 부분을 User에 옮겨서 사용할 수 있습니다. 왼쪽에 Emmet 기본설정을 보면 태그로 감싸는 단축키가 주석으로 되..

VSCode를 처음 설치하면 소스 코드가 길어도 자동줄바꿈 되지 않고 가로스크롤이 생겨 우측으로 움직여야 나머지 코드가 보일 것입니다. 난 화면안에 스크롤이 생기지 않고 모든 소스가 나오는것을 원하기 때문에 설정에서 고쳐 사용 하겠습니다. File >> Preferences >> Settings 에 들어가 줍니다. 검색영역이 확인 되는데 검색 부분에 다음과 같이 작성해 줍니다. "wordwrap" 위 검색어 입력시 하단에 셋팅에 바로 검색되어 나오는데 Editor: Word Wrap 이 부분을 수정하셔야 합니다. off >>>on 으로 수정하고 다시 소스 코드를 확인해 봅니다. 그럼 가로스크롤 없이 한 화면에 모든 소스코드가 줄바꿈 되어 나오는 모습을 보실 수 있습니다.

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