지정영역에 태그 및 속성 추가하기, atom-wrap-in-tag 설치하기 및 단축키 변경 방법

HTML 코딩을 하다 보면 영역 선택 후, 태그로 감싸야 할 경우가 종종 있다.

텍스트 본문의 일부 영역을 강조하기 위해 span으로 감싼다거나 em을 적용한다거나 할 때, 여는 위치 닫는 위치를 오가며 이중 작업하기는 편리하지 못하다.

emmet에서 ctrl-alt-w 를 클릭하여 태그로 감쌀 수는 있지만 태그 외의 속성이나 클래스 등이 입력되면 태그로 감싸기가 중지된다.

이러한 부분 때문에 Atom-wrap-in-tag 라는 패키지를 설치하고 단축키 변경하는 방법에 대해서 기록해둔다.

 

1. Atom-wrap-in-tag 검색 및 설치

 - ⌘, 클릭하여 Settings 접근 후 Install 클릭

    wrap in tag 또는 wrap-in-tag 와 같이 키워드를 검색하고, sanusart의 atom-wrap-in-tag를 install 한다.

- Packages 로 이동해서, 설치를 확인하고 패키지의 빈 공간을 클릭하여, 패키지 상세 내역을 확인한다.

- 설정하기 위해서는 emmet이나 open-in-browsers 와 같이 Settings 버튼이 있어야 하는데, 없다 그냥 패키지 판넬 빈 공간을 클릭하면 Package의 Settings 로 들어간다(Settings 아이콘이 있는 패키지도 빈공간을 클릭하면 동일하게 해당 패키지의 설정으로 들어간다.)

 

2. 단축키 변경하기

- 패키지 설정 내용보는 화면에서 Keybindings 부분을 보면 단축키를 확인할 수 있다.

-기본으로 alt-shift-w 로 되어있는데 변경하고 싶다면 화면 중앙의 View Code를 클릭한다.

- View Code 창에서 왼쪽 Project 부분을 펼쳐서 keymaps > wrap-in-tag.cson 을 클릭하면 단축키를 확인할 수 있다.

여기서 변경후 변경을 마쳤으면 atom을 재 시작한다.

 

3. 적용하기

- alt-shift-w 또는 변경한 단축키로 설정되었는지 확인한다.

이상. atom wrap in tag 설치 및 사용 방법에 대한 기록이다.