본문 바로가기

TOOLS/Eclipse

[이클립스] Zen Coding 젠코딩 이클립스 플러그인 연계

Zen Coding 이란걸 알게 되었어요.

Zen-Coding 이 뭘까?

" HTML 과 CSS 코드를 빠르게 작성할 수 있도록 도와주는 오픈소스 도구 입니다. "

라고 정의되어 있네요.

말그대로 뭐.. 툴이라면 툴이라 할수 있숨다.

 

자, 그럼 이제 Eclipse 에 Zen-Coding Plugin 을 설치해 봅시다.

 

1. 이클립스를 열어 Help - Install New Softupdate 를 선택 합니다.

 

 

2. 주소란에 http://zen-coding.ru/eclipse/updates 를 입력 하고 Enter 를 쳐서 Update 받을 Zen Coding for Elicpse Plugin 을 확인 한 후 체크 합니다.

그리곤 NEXT 를 선택 합니다.

 

 

3. Install 할 파일을 Detail 하게 확인 한 후 Next 를 누릅니다.

 

 

4. 라이센스를 확인 하는 단계네요.

I accept the terms of the license agreements 항목을 선택 한 후 Next 를 누릅니다.

 

 

5.  UPDATE 가 완료되고 재부팅 메시지가 뜨기 바로 직전에

뭐 보안에 대한 Warning 메시지가 뜨네요.. 무시하고 알겠다고 OK 누르고 쿨 하게 넘어 갑니다.

 

 

6.이클립스 재 시작해야 적용되는데, 지금 바로 재시작 할꺼냐고 묻습니다. OK. Yes 를 선택합니다.

 

 

7. 재시작 된 이클립스의 Window - Preferences 를 선택하여 환경 설정을 해 줍니다.

 

 

8. Zen-Coding - Output - HTML 항목에서 다음과 같이 설정해 준 후 OK 를 누릅니다.


 

 

자, 이제 Zne-Coding 을 사용하기 위한 설정은 끝났습니다.

 

그럼 테스트를 한번 해 볼까요?

 

일반적인 HTML 파일 하나를 생성해서...

 

html:5 라고 입력한 후 저장 한뒤 Ctrl + E 키를 동시에 눌러주면 아래와 같은 소스 코드로 변환인 됩니다.

 

 

Zen-Coding 단축키 URL 주소 이다.