web sprit

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

서브라임 텍스트 사용자 입니다.원래 코딩 글꼴로 나눔고딕 코딩 글꼴을 사용하였는데요~ 어느순산 서브라임이 업데이트 하고 나서 글꼴 자간 간격이나 모양이 좀 이상하게 나와서 찾아본 결과 D2 Coding 글꼴이 2017.11.29 에 업댓하여 적용해 봤는데나름 괜찮더군요 ㅎㅎ 그래서 서브라임에 D2 Coding 글꼴을 적용하는 방법에 대해 설명 드리겠습니다. 우선 글꼴을 다운받으러 가야겠죠~아래의 URL로 접속해 봅니다.D2 Coding 글꼴 : https://github.com/naver/d2codingfont 위 점선영역을 클릭!!! 그럼 다운로드 버튼이 있는데 눌러서 다운 받아 줍니다. 다운 받아서 압축을 풀면 위와 같이 폰트 파일을 구성고 있습니다.이것을 제어판 >>> 글꼴로 들어가 그대로 드래그하..