본문으로 바로가기

HTML의 구조를 들여다보고 적용된 CSS를 찾아서 이동하는 것은 빈번한 일입니다. 이를 좀 더 빠르게 접근하기 위해 사용하는 플러그인을 소개합니다.

Goto CSS Declaration 소개

원하는 ID나 class명을 빠르게 찾아주는 기능을 하는 플러그인이다.

Goto CSS Declaration 설치

  1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
  2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.
  3. gotocss를 입력하여 Goto-CSS-Declaration 소개가 검색되면 선택한 후, 엔터를 눌러 설치한다.

Goto CSS Declaration 사용법

  1. 좌측에 HTML(js, 혹은 다른 포맷)의 파일을 열어두고 우측에 CSS(less, sass, 다른 포맷)파일을 열어둔다.
  2. 커서를 찾길 원하는 ID나 class명에 위치킨다
  3. Win+Alt+. 키를 누르면 커서가 그쪽으로 이동된다.

단축키가 홈페이지의 설명과는 다르다. Preferences > Package SettingSafari > Goto-CSS-Declaration > Key BindingSafari - Default에서 확인하자.