web sprit

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 위 점선영역을 클릭!!! 그럼 다운로드 버튼이 있는데 눌러서 다운 받아 줍니다. 다운 받아서 압축을 풀면 위와 같이 폰트 파일을 구성고 있습니다.이것을 제어판 >>> 글꼴로 들어가 그대로 드래그하..

Package Control 명령어를 입력하기 위해서Sublime text 실행 후 ctrl + shift + P 를 눌러줍니다.그리고 명령어를 입력해 줍니다. 명령어는 아래와 같습니다.Install Package: 패키지를 설치한다. (단축 : pci) List Package: 설치된 패키지 목록을 확인한다. (단축 : plp, list) Remove Package: 설치된 패키지를 삭제한다. (단축 : prp) Update Package: 설치된 패키지에 업데이트사항이 있는지 확인하고, 업데이트 내역이 있을 경우 업데이트한다. (단축 : pup)

Side Bar ctrl + 0 사이드바로 포커스 이동. ESC Edit 창으로 포커스 이동. ## 기타 단축키 참고 사이트 http://junil-hwang.com/blog/sublimtext-%EB%8B%A8%EC%B6%95%ED%82%A4/

Sublime Text에서 Project 관리를 손쉽게 할 수 있는 방법을 알려 드리겠습니다. 우선 서브라임이 설치했다 가정해보죠. 설치가 안되셧다면 아래 링크를 참고 하세요. http://kcmschool.xyz/56 우선 서브라임을 실행합니다. 그럼 위처럼 빈털털이(?) 화면에서 project 메뉴를 클릭하면 하위메뉴로 여러가지 리스트들이 나오는데요. 이것에 대한 설명을 하겠습니다. 우선 프로젝트를 2개 만들어 보겠습니다.pro1 폴더안에 test1.htmlpro2 폴더안에 test2.html자 만들었다면 시작하죠. 이 폴더에 대한 프로젝트 파일을 만들어야 합니다. 아까 만든 폴더를 드래그해서 OPEN FILES(왼쪽 폴더 디렉토리 나오는 부분) 에 넣든 or 메뉴에서 Project > Add Fol..

제가 마크업을 작업할 떄 주로 사용하는 기술이 젠코딩 입니다. 젠코딩은 에디트플러스에서 최신버젼으로 설치하면 기본으로 제공 되어집니다.하지만 가끔 드림위버를 이용할 떄가 있는데요. 드림위버는 따로 플러그인을 설치해야 합니다.그럼 드림위버에 설치 및 설정을 알아보도록 하겠습니다. 1. 설치우선 드림위버에서 젠코딩을 사용하기 위해 플러그인 파일을 다운받도록 하겠습니다. https://code.google.com/archive/p/zen-coding/downloads 위와 같은 사이트가 나오는데 전 젠코딩 드림위버용 최신버전을 다운받았습니다. 압축을 풀면 위와같은 화면이 나오는데 확장자 mxp파일을 더블클릭하여 설치를 진행합니다. 자 설치는 마무리 되었고 위와같이 Dreamweaver에 Zen Coding 이..

현재 내가 사용하고 있는 버젼은 Sublime Text 3 이다. 원래 Sublime 사이트에서 Portable버전도 있어 설정을 해두면 이동성이 좋지만그래도 직접적인 설치가 더 안전하다 생각이 들어 본체에 심어(?) 놓았습니다. 회사 컴에 설정을 집컴에도 같은 설정을 하기 위해 다음과 같이 하였습니다.이것은 Sublime Text 2 나 Sublime Text 3 에 경우에도 같습니다. 아래의 경로로 이동C:\Users\[UserName]\AppData\Roaming\Sublime Text 3안으로 들어가면 BackupInstalled PackagesLocalPackagesSettings위와 같은 디렉토리가 존재 할것입니다. 나의 경우는 저렇고 아무튼 위 경로 안에 있는 것을 모조리 복사하여 이동하려는..

서브라임을 사용할 일반적으로 나눔고딕코딩 폰트를 많이 사용한다고 하네요~ㅎ나눔고딕코딩 폰트는 나눔고딕 폰트와 다르게 브라우저단 화면에 적용되지 않습니다.순수 코딩작업에 적용되는 폰트지요. 적용 방법은 무진장 쉬우니 그냥 보고 따라오시면 됩니다. 네이버에 나눔고딕코딩 이라고 검색하셔도 되고네이버 개발자센터에 가서 다운 받으셔도 됩니다.URL : http://dev.naver.com/projects/nanumfont 다운 받은 파일을 설치!!! 이렇게 존재 하네요 ㅎㅎ 그럼 Sublime Text 에 적용 해보겠습니다. Preferences > Settings-User 눌러 설정화면을 띄웁니다. 변경 전12345678 { "ignored_packages": [ "Vintage" ]} cs 변경 후123456..

이 글은 Sublime Text 3 Build 3114 기준으로 작성 하였습니다.서브라임 라이센스 틍록 방법에 대하여 글을 작성해 보도록 하겠습니다. 방법은 아주 간단합니다. 설치시에 등록하여도 되지만 설치 후에 등록하는 방법에 대하여 쓰려 합니다. 우선 Sublime Text 를 실행해 줍니다. 위 화면과 같이 Help >> Enter License 를 클릭합니다. 그럼 다음과 같은 화면이 나옵니다. 빨간 테두리에 라이센스 키를 입력한수 Use License 버튼을 누르면 끝!!!참 쉽습니다. ^^ 인증된 것을 확인하려면 다시Help >> About Sublime Text 를 눌러줍니다. 그러면 쨘~!!! 인증된 것을 확인하실 수 있습니다.

Sublime text를 욱더 막강한 코딩 툴로 만들기 위해 여러가지 유용한 패키지를 설치 해야 합니다. 패키지 설치 방법은 다음과 같습니다. Package 설치 방법1. Ctrl + Shift + P 를 누릅니다. (패키지 콘드롤을 이용하여 패키지 설치.)2. PCI 를 입력하면 Package Control: Install Package 부분에서 엔터!!!3. 기다리면 패키지 검색란에서 원하는 패키지 검색 후 설치. 유용한 Package1. Emmet (Zencoding)Emmet은 Zencoding 이라고도 불리며 코딩하는 사람들은 모두 알것입니다. 줄임말로 순식간에 원하는 코딩을 할 수 있습니다.단축키는 Tab 이나 Ctrl + E 로 제공됩니다.ex) HTML : ul>li*5 (ul안에 li 5..