워드프레스 블로그나 구글 블로그를 하다 보면 테이블을 사용해야 하는 경우가 있습니다. 워드프레스는 테이블 플러그인을 설치하면 되지만, 플러그인이 많아질수록 속도에 영향을 미치기 때문에 좋지 않습니다. 그래서 이렇게 가끔 사용하는 HTML 코드는 직접 작성하기 보다 온라인 HTML 에디터를 활용하면 매우 편리합니다. 이 글에서는 쓸만한 온라인 HTML 에디터 2가지를 알아보겠습니다.
쓸만한 온라인 HTML 에디터 2가지와 사용방법
처음 시작했던 구글 블로그스팟과 그 다음 시작한 워드프레스도 특정 코드, 예를 들어 테이블이 필요할 때 직접 코드를 작성하거나, 워드프레스는 플러그인을 설치하여 사용하곤 했습니다. 그런데 자주 쓰는 것도 아닌데 서버 용량을 잡아먹는 플러그인을 설치하기가 부담스럽기도 해서, 지금은 무료로 온라인에서 사용할 수 있는 HTML 에디터를 활용하고 있습니다.
HTML 코드를 작성해 본 적이 없는 분들이라면 이 글을 꼭 참고하시기 바랍니다.
1. HTML-Online
HTML-Online 에디터는 제가 개인적으로 좋아하는 온라인 HTML 에디터입니다. 깔끔한 인터페이스와 필요한 대부분의 기능을 제공하고 있고 사용하기도 편리하기 때문입니다.
HTML-Online를 활용해서 테이블을 만들고 워드프레스에 붙여넣기를 해 보겠습니다.
먼저 HTML-Online에서 테이블을 만듭니다.
HTML-Online에서 테이블을 만들면 기본적으로 화면 폭을 100%로 보고, 테이블의 column 개수에 따라 width가 설정됩니다. 저는 3개의 컬럼을 만들었기 때문에 컬럼 각각의 폭이 33.3%로 설정이 되었습니다.
테이블 작성이 완료되면, 소스코드를 마우스로 선택한 후 우클릭하여 “복사”를 클릭하여 코드를 복사합니다.
워드프레스로 이동한 후, 화면 오른쪽 상단에 있는 세로 3개점 → 코드 편집기를 순서대로 클릭하여 HTML 코드를 직접 작성할 수 있는 모드로 변경합니다. ③번의 위치에서 HTML 코드를 직접 작성하고 수정할 수 있는데, 여기에 위에서 복사한 HTML 코드를 Ctrl+V를 클릭하여 “붙여넣기” 합니다.
Table 코드를 “붙여넣기” 한 후, 제대로 적용이 됐는지 확인하기 위해 “미리보기”를 클릭합니다.
아래와 같이 테이블이 잘 만들어진 것을 볼 수 있습니다.
2. HTML5-Editor.Net
HTML5-Editor는 HTML-Online과 사용법이 비슷합니다. 다만, 화면 구성에서 코드 에디터가 왼쪽에, WYSIWYG 에디터가 오른쪽에 위치해 있어 HTML-Online과는 반대이며, 테이블을 작성할 때 폭을 비율(%) 대신 픽셀(px)로 설정하는 것이 주요 차이점입니다.
테이블 코드를 작성한 후, HTML-Online에서처럼 마우스로 코드를 선택하고, 우클릭하여 “복사”를 클릭해 코드를 복사합니다. 그런 다음, 워드프레스에 “붙여넣기” 를 하면 됩니다.
오늘은 워드프레스나 구글 블로그를 하시는 분들 중 HTML 코드에 익숙하지 않은 분들이라면 반드시 알아야 하는 무료 온라인 HTML 에디터 2가지를 알아보았습니다. HTML 코드 사용에 익숙한 분들도 온라인 HTML 에디터를 활용하면 더욱 쉽게 테이블과 다른 HTML 코드를 작성하고 사용할 수 있게 됩니다. 다른 여러 가지 온라인 HTML 에디터도 많지만, 오늘 소개해 드린 2가지 에디터를 사용해 보시길 권해 드립니다.