Liveweave란?
Liveweave는 온라인상에서 HTML 및 CSS를 편집하여 실시간 미리 볼 수 있는 온라인 에디터입니다.
Liveweave가 있다면 굳이 HTML·CSS 편집용 텍스트 에디터나 IDE(통합 개발 환경)를 설치해 준비할 필요가 없고 변경 내용도 바로 미리 볼 수 있어 매우 사용하기 쉬운 에디터 중 하나일 것입니다.
지금부터는 Liveweave를 사용하는 장점과 사용법을 자세히 살펴보겠습니다.
Liveweave의 장점
먼저 Liveweave를 사용하는 장점을 알아보겠습니다.
회원가입 불필요
온라인 서비스를 이용할 경우 계정 등록을 하지 않으면 사용할 수 없는 경우가 많지만 Liveweave는 계정 등록 없이 이용할 수 있습니다.
그렇기 때문에 일부러 Liveweave를 위해서 메일 주소와 패스워드를 설정할 필요가 없고, 부담없이 이용할 수도 있습니다.
다만 계정 등록을 하면 저장해서 다른 컴퓨터에서도 쉽게 가져올 수 있기 때문에 계정 등록을 하면 메인 에디터로도 이용할 수 있을 것입니다.
OS를 고르지 않다
Liveweave는 온라인 에디터이며 브라우저만 있으면 작동합니다.
따라서 Windows·Mac·Linux 모두 같은 환경에서 HTML·CSS를 편집할 수 있으며, 어떤 환경에서도 익숙한 에디터를 사용하여 HTML·CSS 편집을 할 수 있습니다.
또, 어카운트 등록을 실시하는 것으로 Windows에서 편집한 코드를 Mac으로 편집하는 것도 간단하게 할 수 있기 때문에, 복수 OS 구분해서 사용하고 있는 분에게 매우 궁합이 좋은 에디터일 것입니다.
실시간 프리뷰를 사용할 수 있다
Liveweave의 큰 장점 중 하나입니다.
편집 내용이 즉시 프리뷰 되도록 되어 있어 CSS 편집 내용이 어떻게 반영되는지 페이지 새로고침 없이 확인할 수 있습니다.
물론 img태그등을 사용해 화상을 불러들였을 경우도 즉시 프리뷰 해줍니다.
실시간 미리보기 기능을 비활성화할 수도 있지만 특별한 이유가 없는 한 비활성화하는 장점은 없을 것입니다.
신택스 하이라이트 기능이 활성화되어 있다
신택스 하이라이트 기능(
Liveweave는 아예 신택스 하이라이트 기능(HTML 태그 등을 색깔 구분하는 기능)이 활성화되어 있습니다.신택스 하이라이트 기능이 있는 것만으로 어디가 태그이고 어디가 텍스트인가 하는 것은 한눈에 알 수 있습니다.
오토 컴플리트 기능 지원
오토 컴플리트 기능
태그 입력 등을 하면 입력 후보가 표시되는 오토 컴플리트 기능을 이용할 수 있습니다.
이 기능이 있으면 태그 이름을 모두 입력할 필요가 없는 관계에서 오타를 일으킬 가능성도 줄어들기 때문에 꼭 사용해 두고 싶은 기능일 것입니다.
자바스크립트도 사용할 수 있다.
JavaScript
Liveweave는 HTML·CSS 뿐만이 아닙니다.자바스크립트도 지원하며 jQuery 등 각종 라이브러리도 사용 가능합니다.
물론 자바스크립트의 변경 내용도 즉시 반영되는 것 외에 HTML·CSS와 마찬가지로 오토 컴플리트 기능을 사용할 수 있기 때문에 함수명이 서성거림이라도 틀리지 않고 입력할 수 있을 것입니다.
Liveweave 사용법
Liveweave는 단지 HTML 및 CSS를 편집할 수 있을 뿐만 아니라 다양한 기능이 준비되어 있습니다.
지금부터는 Liveweave의 사용법에 대해 알아보겠습니다.
HTML CSS를 편집하다
상단 페이지에 접속하면 표시되는 에디터
HTML·CSS의 편집은 Liveweave의 톱 페이지에 접속하면 표시되는 에디터로 즉시 실시할 수 있습니다.
liveweave - 공식 사이트
디폴트로는
좌측 상단 : HTML
왼쪽 하단:CSS
우측 상단: 자바스크립트
오른쪽 아래: 실시간 미리보기
라는 형태로 되어 있습니다.
아래쪽에 있는 패널 아이콘을 클릭 조금 이해하기 어렵지만 아래쪽에 있는 패널 아이콘을 클릭하면 에디터의 줄을 바꿀 수 있기 때문에 기억해 두면 좋을 것 같습니다.
보존하다
상단 메뉴의 [Save]Liveweave에서 편집한 HTML 및 CSS를 저장할 경우 상단 메뉴의 [Save]를 누르면 저장할 수 있습니다.
저장 처리를 하면 전용 URL이 발급 계정을 만들지 않은 경우에도 저장할 수 있으며, 저장 처리를 하면 전용 URL이 발급됩니다.
이 URL만 기억해 두면 나중에 다시 편집할 수도 있습니다.
다운로드하여 저장하다
[Tools]를 클릭하면 표시되는 다운로드 메뉴를 다운로드하여 저장하고자 하는 경우 [Tools]를 클릭하면 표시되는 다운로드 메뉴에서 수행합니다.
"Download this weave as a single HTML file"이라면 에디터 상의 HTML만 다운로드 받아 저장할 수 있습니다.
모든 편집 내용을 저장하려면 "Download this weave as a ZIP file"을 클릭하면 HTML, CSS, 자바스크립트 모든 파일이 정리된 ZIP 파일을 다운로드 할 수 있습니다.
jQuery 등 라이브러리 가져오기
상단 메뉴의 Library jQuery 등 자바스크립트 라이브러리를 사용하고 싶다면 상단 메뉴의 Library에서 클릭 한 번으로 추가할 수 있습니다.
HTML 에디터에 자바스크립트 파일을 가져오는 코드가 추가되면 HTML 에디터에 자바스크립트 파일을 가져오는 코드가 추가되며, 해당 코드를 삭제하지 않는 한 추가한 라이브러리의 함수 등을 이용할 수 있습니다.
또한 수동으로 script 태그로 다른 자바스크립트 파일을 가져올 수 있기 때문에 필요에 따라 추가하는 것이 좋습니다.
기본적으로는
Liveweave 에디터의 기본적인 사용법
편집 내용 저장 방법(다운로드 포함)
자바스크립트 라이브러리 추가 방법
를 기억해 두면 Liveweave를 능숙하게 사용할 수 있습니다.
정리
이번 시간에는 Liveweave의 장점과 사용법에 대해 알아봤습니다.
Liveweave는 일본어야말로 지원하고 있지 않습니다만, HTML·CSS 편집 목적으로 사용한다면 별 지장은 없을 것입니다.
단, PHP 등 서버사이드에서 사용되는 프로그래밍 언어는 지원하지 않기 때문에, 그러한 서버사이드 언어를 사용하고 싶다면 다른 온라인 에디터를 찾는 것이 좋습니다.