생활정보

Notepad++ 에서 EMMET 사용하기(플러그인 추가)

꿈과현실사이 2022. 7. 17. 14:48

 

안녕하세요.

작년에 정보처리기사를 취득하고, 올해는 웹디자인기능사와 컴퓨터그래픽운용기능사를 취득하려고 합니다.

 

이렇게 IT 자격증만 따느니 전공자가 되는 게 낫을 것 같아 올해 방송대 컴퓨터과학과에 편입을 했지만, 기존에 자격증 공부하며 얻은 지식으로 간신히 1학기를 마치고, 2학기에는 등록 여부를 고민 중에 있습니다. 

 

암튼, 지금 제 컴퓨터에는 Visual Studio, Visual studio code, Notepad++ 가 있어요. 

 

Visual Studio는 용량이 2기가가 넘어가는데, 방송대 출석수업 과제를 하려고 설치했는데, 사용법을 잘 몰라요. ^^;;

 

직장에서는 프로그램을 설치할 수 없어 Visual Studio Code(VSC)와 Notepad++는 휴대용(zip)으로 다운로드 하여 압축만 풀어 사용 중입니다. 

 

처음에 python을 배워보려고 책도 보고 유튜브 영상도 보았는데 에디터가 다 다르고, 환경설정을 못해서 못따라가 결국은 포기했었어요. 그때 여러 에디터들을 접해보고 가장 마음에 든 것이 Notepad++ 여서 지금도 편하게 코드 열어볼 때는 Notepad++를 쓰고 있어요.

 

웹디자인기능사 실기를 접수하여 한 달 후에 시험을 보는데, 시험장에 Notepad++와 VSC는 필수 설치라고 되어 있어서 2가지 에디터를 사용하여 준비하려고 합니다.

 

2022년 웹디자인기능사 프로그램 목록

 

일단 VSC는 emmet이라는 편리한 기능이 기본적으로 있는데, Notepad++ 에는 없어요.

Notepad++에도 있으면 좋을 것 같아 찾아보니 2017년에 32비트용 emmet 플러그인 설치에 대한 얘기가 있지만, 지금은 윈도우 10이고 64비트라 여기저기 검색해보니 글이 있지만, 저처럼 왕초보는 무슨 말인지 잘 모르겠더라고요. 어찌 되었던 플러그인 설치가 되고, emmet이 작동하는 것을 보니 기쁘고, 저처럼 왕 초보자를 위하여 공유합니다.


1. Notepan++ 를 설치형 또는 휴대용(.zip)을 다운로드하여 설치하거나 원하는 곳에 압축을 풀어줍니다.

2. 처음 실행하면 영어로 되어 있는데 Setting-Preference에서 Localization을 '한국어'로 변경해줍니다.

Notepad++ 언어 설정

 

3. emmet 64비트 플러그인을 다운로드합니다. emmet 홈페이지에 연결된 곳을 가면 10년 전 32비트라 플러그인으로  64비트에서는 사용이 안 되는 것 같아요. 그래서 찾아보니 아래 링크에서 64비트용을 찾았어요. 

https://github.com/emmetio/npp/issues/19#issuecomment-383800041

EmmetNPP_x64.zip 다운로드 하기

EmmetNPP_x64.zip을 다운로드하고 압축을 풀어줍니다.

EmmetNPP_x64.zip

 

4. Notepad++의 실행파일이 있는 폴더로 갑니다. 저는 휴대용이라서 npp.7.87.bin.x64폴더-plugins에 EmmetNPP를 넣어줍니다. 이 때 EmmetNPP.dll 파일은 EmmetNPP 폴더 안에 넣어줍니다.

Notepad++ 플러그인 파일에 EmmetNPP 넣기

 

5. 다시 Notepad++ 화면으로 돌아와서 메뉴의 플러그인-플러그인 관리를 클릭합니다. 'python script'를 찾은 후 체크를 해줍니다.

EmmetNPP 플러그인 사용을 위한 python script 체크

 

6. 플러그인 메뉴에 Emmet 이 추가되었지만, 단축키가 tab이 아니기에 단축키를 설정해줘야 합니다. 그래야 '느낌표 tab' 하면 HTML 기본구조가 만들어집니다.

 

플러그인에 Emmet 추가된 것 확인

 

7. 단축키를 설정하기 위해 메뉴의 설정-단축키 설정-플러그인 명령어를 클릭합니다.

플러그인이 EmmetNPP.dll 인 것을 확인하고, 우클릭-modify 선택하면 단축키 설정 화면이 뜨고 'Tab'을 선택합니다.

단축키 설정

이로써 모든 설정이 끝났습니다.

Notepad++ 화면에서 느낌표+tab을 하니 아래 화면과 같이 HTML 기본 구조가 잘 뜹니다. ^^

 

Notepad++에서 Emmet으로 HTML 기본 구조 열기

 


Notepad++보다 다른 더 편리한 에디터들이 많지만, 초보자가 보기에는 기능이 단순해서인지 Notepad++가 편하더라고요. 그래서 emmet 기능을 추가하는 모험(?)을 했는데, 몇 년 전 파이썬 해보겠다고 환경 설정할 때 며칠 걸린 것에 비해 이번에는 1-2시간 만에 성공해서 너무 기쁩니다.

 

이제, 연습할 일만 남았네요

여느 자격증 시험보다 실기 시험 시간이 4시간이라서 이 긴 시간동안 저의 부실한 체력이 버틸 수 있을지 모르겠어요. 그래도 한 달 동안 틈틈이 하고 시험을 보러 가는 것에 의미를 두려고 합니다.

 

그럼 Notepad++를 사용하여 웹디자인기능사를 준비하는 이들이 꼭 좋은 결과가 있기를 진심으로 기원합니다. 

 

반응형