반응형

html과 css를 배운지도 벌써 두 달이 지났다.

그동안 여러가지 편집기를 써봤는데, 사용하기 편했던 편집기 위주로 남겨보려고 한다.

편집기의 장점

1. 태그 자동닫힘

이게 생각보다 매우 편하다.

메모장에서 적다보면 태그 안닫아서 레이아웃 깨지는 경우가 있다거나 속성이 안먹는 경우가 종종 발생한다.

특히 코드가 길어지고 복잡해질수록 닫는걸 가끔 까먹음..

근데 알아서 자동으로 닫아주니 훨씬 편하다.

2. 태그 색상구분

흰 배경에 검은 글씨만 나열되는 메모장과는 달리, 편집기에서는 태그나 속성마다 색상지정이 가능하다.

사용자의 편의에 따라 원하는 색상으로도 지정이 가능.

특히 css에서는 워낙 많은 선택자가 등장하기 때문에 색상이 구분될수록 훨씬 업무가 수월해진다.

3. 줄 복사

비슷한 선택자가 여러개 나오는 경우, ctrl+c/v하면 되긴 하지만 사실 선택자 이름이 길면 그거 드래그 하는 것도 일이다. 나처럼 귀차니즘이 심한 사람에게는 단축키 하나로 윗 줄을 그대로 복사붙여넣기 할 수 있는 기능이 있다. 실제로 나는 이 기능을 매우 편리하게 사용하고 있음..

4. emmet 기능

메모장에도 이게 되나? 잘은 모르겠지만 우선 emmet을 설치하면 태그를 일일이 치지 않아도 태그안에 태그를 여러번 넣을 수 있다. editplus에서는 안써봤지만 되는 걸 확인했고, notepad++에서는 단축키를 여러번 눌러야 먹히는 단점이 있긴했지만(내가 잘못 설치한 거일수도 있음..) 너모너모 편함.

지금 사용하는 visual studio code에서는 단축키(탭키) 한번 눌러도 아주 잘 먹힘.

이렇게 사용한다.

5. 창분리로 메인과 스타일시트를 분리해서 바로바로 스타일 적용 가능

뭐 메모장으로도 못할 건 없는데 메모장은 창이 여러개 뜨니까 그게 불편해서 싫은거고 편집기를 이용하면 하나의 편집기 안에 창만 분리해서 볼 수 있어 훨씬 편함.


이제 편집기로 돌아가보자.

메모장(핵불편)

메모장은 html을 처음 접할 때 많이 쓰는 것 같다. 윈도우에서 기본적으로 제공하고 있기 때문이고, 베이직하기 때문이다.

정말 긴급한 상황이 아니면 메모장은 되도록 안쓰는게 정신건강에 좋다.

Notepad++

남자친구의 추천으로 알게된 편집기였다. 노트패드를 알게 되었을 때 학원에서는 editplus를 추천해줬었는데 둘 다 써본 결과, 나에게는 notepad++가 훨씬 편했다.

우선 notepad++는 무료로 이용이 가능하고, emmet기능도 editplus와 동일하게 사용할 수 있기 때문에 가격적인 면에서는 훨씬 이득이라는 생각이 들었다. 근데 emmet 설치 방법이 좀 까다롭다고 해야하나? 어려워서 버벅대다가 겨우 깔았는데, 생각보다 단축키가 노트패드 안에서 잘 먹지를 않아서 여러번 눌러야 쓸 수 있었다.

단점은 맥버전이 없음!!

**용이하다고 생각했던 부분**

- 줄 복사는 복사하고자 하는 행의 끝에 커서를 갖다놓고 ctrl+d로 이용할 수 있다.

- 원하는 줄 앞에 커서를 두고 alt키를 누른 다음 위나 아래로 드래그하면 행을 다중으로 선택 가능

- ctrl + y 되살리기(ctrl + z의 반대)

- 원하는 줄 대충 드래그 후 탭 누르면 한번에 들여쓰기 가능 > 정렬이 편해서 깔끔하게 작성 가능함

다운로드 https://notepad-plus-plus.org/downloads/

 

Editplus

우선 에디트플러스는 유료로 알고 있다.

예전에는 무료로 제공했다고 하는데, 현재는 한 달만 무료 사용 가능하고, 30일이 지나면 유료로 전환되는 듯하다. 물론 어둠의 경로를 이용하면 다르겠지만..

이 편집기는 학원에서 선생님이랑 함께 쓰느라고 설정도 다 같이 했는데, 나는 노트패드가 더 편해서 잘 안썼음. 근데 쌤은 여전히 이거로 emmet 플러그인도 잘 사용하신다. (emmet 플러그인 별도 설치해야 함)

노트패드보다 기능이 많은 것인지 뭔지 모르겠지만 인터페이스가 굉장히 불편했던 걸로 기억.

뭔가 되게 복작복작한 느낌이었다. 단순무식한 나는 알록달록하고 알아보기 힘든 화면에서 적응을 못했음 ㅠ

**용이하다고 생각했던 부분**

- html이나 css 기본문서 불러올 때 원하는 형식대로 짜놓고 불러올 수 있음.(노트패드에도 있지 않을까?)

- 줄 복사 단축키는 ctrl + j

- html편집할 때 필요한 색상표나 글씨체, 글씨크기 등 도구모음 상자가 편해보였다. 노트패드에선 찾다찾다 못찾았어염..

<출처: https://www.editplus.com/screen.html>

다운로드 https://www.editplus.com/download.html

Visual Studio Code

윈도우에서 맥으로 옮겨오면서 노트패드말고 다른 걸 써볼까 해서 결국 나의 종착지가 된 visual studio code이다. 편집기 내부에서 바로바로 작성한 코드를 프리뷰할 수 있다는 게 매우 편리하게 다가왔다.

그리고 윈도우나 맥 가리지 않고 다양한 os에서 사용이 가능해서 매력적이다.

지정하기 나름이지만 기본 emmet은 tab키로 쓸 수 있는 것 같음, 그리고 노트패드와 달리 바로바로 입력이 된다. 별도의 플러그인 설치 없이 바로 emmet 기능을 쓸 수 있음.

**용이하다고 생각했던 부분**

- 창 분할 후 굳이 크롬으로 html 파일을 열지 않아도 프리뷰가 가능(다른 편집기도 가능할 수 있는데 안해봤어여..)

- emmet 플러그인 설치할 필요 없고 간단하게 이용 가능

- 오타나거나 태그가 이상하면 빨간색으로 표시해준다.

더 있었는데 기억이 안나서 우선은 여기까지만..

다운로드 https://code.visualstudio.com/

 

나보다 더 경력자들도 있을테고, 오랜시간 코딩하셨던 분들에 비하면 나는 완전 아가수준이지만 혹시나 고민하시는 분들이 계시다면 이 포스팅을 보고 도움이 되었으면 좋겠다.

반응형

+ Recent posts