워드프로세서 프로그램 양식을 순수 HTML 코드로 변환하는 방법
HTML 속성 제거, 인라인 스타일 제거 팁
컴퓨터로 작업을 하거나 블로그에 포스팅을 할 때, 간혹 한글이나 엑셀, 워드 등 워드프로세서 프로그램(이하 워드)에서 표와 같은 자료를 가져와 웹에 게시해야 하는 경우가 있습니다. 일반적으로 워드 문서 속의 자료를 웹에 게시하고자 하는 경우, 워드에서 데이터를 그대로 복사하여 웹 상의 글쓰기 에디터(티스토리 에디터와 같은 이지웍에디터)에 붙여넣으면 워드의 자료를 웹에 게시할 수 있습니다. 하지만 그렇게 작업을 하면 자료의 내용과 레이아웃 뿐 아니라, 작업자의 의지와 상관없이 표의 테두리, 글자의 색상 등과 같은 디자인의 요소들까지 전부 복사가 되어 옵니다.
제 경우 웹사이트를 만들거나 유지보수를 할 때 클라이언트가 자료를 워드 문서에 담아서 보내오는 경우가 많은데요. 그 양이 많지 않으면 표가 됐든 리스트가 됐든 직접 하드코딩을 해도 부담이 없지만, 만약 그 자료가 수백행의 표라면 그것들을 일일이 다 코딩하는 것은 보통 고된 작업이 아닙니다.(단순 반복 작업이죠.) 그렇다고 워드의 문서를 그대로 복사해서 가져오면 불필요한 원본의 디자인 요소까지 포함되기 때문에, 디자인 요소들을 제거하는 2차적 작업(단순 반복 작업)을 해야합니다. 그 작업은 하드코딩으로 자료를 타이핑하는 것 만큼이나 번거로운 일입니다. 그렇다면 워드 문서에서 자료를 복사해서 쉽게 가져오되, 디자인의 요소 즉, 인라인 스타일(inline style)을 한 번에 일괄적으로 제거하는 방법은 없을까요?
있습니다. 아래 캡쳐 화면에 보이는 HTML cleaner(http://www.html-cleaner.com) 라는 웹사이트를 이용하면 됩니다.
HTML cleaner(http://www.html-cleaner.com)
외국에서 만들어진 사이트라 영어로 되어있는데, 사용 방법은 간단합니다. 워드 문서에서 이지웍 에디터로 복사해 오는 일반적인 방법과 동일한 방법으로 자료를 복사하여 HTML cleaner의 에디터로 가져옵니다. 그 다음 에디터 아래의 옵션창에서 제거할 항목을 선택해 줍니다. 그리고 실행 버튼을 누르면 불필요한 내용들이 제거된 상태의 HTML코드를 얻을 수 있습니다.
원본
결과물
HTML cleaner 에서 사용할 수 있는 옵션들을 살펴보면 아래와 같습니다.
|
|
|
위 옵션에서 필요한 부분에 체크하여 사용하시면 됩니다만, 주로 굵게 표기한 부분의 내용들을 사용하게 되실겁니다.
HTML cleaner를 사용하면 홈페이지 유지보수 같은 작업을 할 때, 복잡한 table을 직접 짜고, 자료를 복사 붙여넣기 해야하는 단순 반복의 고된 과정이 생략되기 때문에 업무 효율이 쑥쑥 올라갈 겁니다. 그리고 블로그나 웹에 자료를 게시하기 위해 워드 문서를 사용하는 분들에게도 도움이 되지 않을까 싶네요.
'공부 > 디자인/그래픽' 카테고리의 다른 글
| 티스토리 본문 영역만 텍스트 드래그 허용하기 (7) | 2015.07.04 |
|---|---|
| 티스토리 블로그 검색시 검색결과 없음 출력하기 (3) | 2015.07.01 |
| 기획자를 위한 필수 화면설계도구 Power Mockup (0) | 2015.01.15 |
