HTML 보기 쉽고 이쁘게 변환하기(HTML Beautify)

HTML 보기 쉽고 이쁘게 변환하기(HTML Beautify)



HTML-보기-쉽고-이쁘게-변환하기



구글 Blogger(blogspot)의 기본 편집기에는 "HTML 보기"라는 메뉴가 있습니다. 기본 편집기에서 "HTML 보기" 메뉴로 전환하는 경우 HTML Tag가 너무 알아보기 힘들게 변환 됩니다.

블로그에 올릴 초안을 OneNote, Google Docs 등의 문서로 작성하고 html로 변환하는 경우에도 html tag가 보기 힘들게 변환되는 경우가 있는데 이런 경우에도 보기 쉽게 html을 변환할 수 있습니다.


HTML Beautify 설치하기



wsl2 Kali linux, ubuntu 리눅스를 사용하면 윈도 컴퓨터에서 쉽게 Linux 명령어를 사용할 수 있습니다. 아직 wsl2 linux를 사용하지 않고 있다면 이번 기회에 설치한 번 해보시기 바랍니다.


sudo apt install nodejs



먼저 sudo apt-get update && sudo apt install nodejs 명령어를 입력합니다.
repository를 update 하고 nodejs를 설치하게 됩니다. 시간은 3분 내외로 소요됩니다.


sudo apt install npm


sudo apt install npm 명령어로 npm packages를 설치합니다. 다양한 packages가 설치되고 설치 시간은 약 3~5분 내외 소요됩니다.


sudo npm install -g js-beautify


sudo npm install -g js-beautify 명령어를 사용하여 js-beautify를 설치합니다. 이 패키지를 사용하여 HTML을 좀 더 보기 쉽고 이쁘게 변환할 수 있습니다.



변경 전 Blogger(Blogspot)의 HTML Source 입니다. tag 별로 구분도 없고 정말 보기 힘듭니다. 문서의 길이가 짧은 경우 직접 소스를 수정할 수 있겠지만... 우리에게는 Linux와 js-beautify라는 프로그램이 있습니다.

html-beautify 프로그램 사용법


html-beautify --help


기본적으로 -f 옵션을 사용하여 input file을 지정하고, -o 옵션을 사용하여 output file을 지정하시면 됩니다. 


html-beautify-명령어-사용법


명령어 한 줄 사용하여 html tag를 변환했습니다.
그럼 변환된 최종 결과를 확인해 보도록 하겠습니다.


html-beautify 변환 결과



html-beautify 변환-결과


변환된 html source입니다. 좀 더 편하게 내용을 파악할 수 있습니다. 그러면 리눅스가 없으면 이런 기능을 사용 못 할까요? 아닙니다. 인터넷에서 "HTML Beautify"라고 입력해 보시면 다양한 HTML Beautify 홈페이지가 있습니다.

그런 홈페이지에 방문하여 HTML Source를 복사 & 붙여넣기하고 변환시킬 수 있습니다. 자신의 리눅스 운영체제에서 변환하는 경우 관련 내용이 어딘가에 log로 남아있지는 않겠지만 html beautify 홈페이지를 사용하여 변환하는 경우, 홈페이지 개인정보 정책에 따라 서버에 log가 남을 가능성이 있습니다.


이 블로그의 인기 게시물

Hyper-V Default Switch 인터넷 연결 문제 해결(No Internet Solved)

이미지
 Hyper-V Default Switch 인터넷 연결 문제 해결(No Internet Solved) Windows Pro 버전부터 사용할 수 있는 Hyper-V, 그중에서 인터넷을 사용할 수 있는 기본 가상 스위치(Default Switch)를 사용해도 인터넷을 사용할 수 없는 경우가 있습니다. 개인(Private Switch), 내부(Internal Switch), 외부(External Swithch), 기본(Default Switch) 각각 차이점을 살펴보고 해결 방법도 알려드리겠습니다. 제가 사용하는 Wi-Fi 네트워크 어댑터 설정을 보여드리겠습니다. 저는 DNS만 바꿔서 사용하고 있습니다. DNS는 구글(8.8.8.8), Cloudflare(1.1.1.1) 등 자신이 좋아하는 DNS로 바꿔도 상관없습니다. Default Switch로 연결된 Kali Linux VM에서 nslookup 명령어를 사용해 봤습니다. dnsleaktest를 해보면 Cloudflare로 나옵니다. Wi-Fi 네트워크에 수동으로 설정해 준 DNS 서버를 통해서 정상적으로 인터넷을 사용할 수 있게 됩니다. Hyper-V를 활성화시키면 네트워크 연결에 vEthernet(Default Switch)가 생성됩니다. 제 컴퓨터는 Wi-Fi를 통해 연결되어 있으며, 위와 같이 총 4개의 네트워크 어댑터가 있습니다. 개인 네트워크 (Private Switch) 가상 스위치 Hyper-V를 처음 실행하면 Default Switch만 (WSL 사용 시 WSL 스위치 추가) 있을 것입니다. 사용하는 VM의 용도에 맞게 개인 네트워크(Private Switch), 내부 네트워크(Internal Switch), 외부 네트워크(External Switch)로 설정할 수 있습니다. 이 중에서 개인 네트워크(Private Switch)은 단순히 컴퓨터에 랜 카드만 하나 달린 상태로 보시면 이해가 쉬울 것 같습니다. 컴퓨터에 랜카드는 있지만 아무런 설정이 안된 상태라 직접 랜카드에 IP, Netma...
Read more »

svchost.exe 파일 점검하는 방법(How to verify svchost.exe file)

이미지
 svchost.exe 파일 점검하는 방법 윈도 운영체제의 svchost.exe 파일은 정상적인 프로세스입니다. 그러나 경우에 따라 악성 프로그램이 이 프로세스 이름과 동일한 프로세스로 위장하는 경우가 있습니다. 어떤 게 진짜 svchost.exe 파일인지 구분하기 힘들기 때문에 진짜로 착각하는 경우가 생길 수 있습니다. 그 구분 방법에 대해서 알려드리도록 하겠습니다. Process Explorer 활용하는 방법 Sysinternals Utilities 에 방문하여 'Process Explorer' 최신 버전을 다운로드합니다. Ctrl + Shift + Esc 로 실행할 수 있는 '작업 관리자'보다 더욱 쉽게 프로세스를 점검할 수 있는 도구입니다.  프로그램이 실행되면 먼저 [Menu] - [Options] - [VirusTotal.com] - [Check VirusTotal.com] 에 체크합니다. VirusTotal 항목에 바이러스 점검 결과가 숫자로 표시됩니다. 파란색 0으로 나오면 문제가 없는 프로세스이며 0 이상의 숫자와 함께 빨간색으로 표시되는 프로세스는 악성 프로세스일 가능성이 있습니다. 삼성 노트북 agent 프로그램도 빨간색으로 표시되지만 정상 프로세스이니 안심하세요. svchost.exe 파일 점검 절차 Process Explorer의 검색창에 'svchost'라고 입력하면 svchost.exe 파일 만 확인할 수 있습니다. 정상적인 svchost.exe 파일은 Company Name에 Microsoft Corporation이라고 나옵니다. 가짜 svchost.exe 파일의 Company Name은 보통 공란(Blank) 상태입니다. 혹은 svchost.exe 파일이 아닌 scvhost.exe 파일과 같이 비슷한 이름으로 위장할 수 있습니다. 만약 svchost.exe 파일, Company Name 항목에 공란(Blank) 로 나온다면 대부분 악성 파일입니다. 이 경우 다음 절차에 따라 더 자세히 점...
Read more »

LibreOffice hwp plugin(hwp2odt plugin)

이미지
 LibreOffice hwp plugin(hwp2odt plugin) 무료 오피스 프로그램인 LibreOffice에 hwp2odt(H2O restart) plugin을 설치하는 방법에 대해서 소개합니다. 일반 회사에서는 대부분 문서를 MS Office 포맷으로 만들지만 공공기관에서는 hwp 포맷으로 문서를 만들고 있어서 hwp 포맷으로 된 문서를 확인할 때 별도의 프로그램 없이 LibreOffice에서 바로 확인할 수 있습니다. Hwp2odt plugin github에서 hwp2odt 또는 H2Orestart로 검색을 하여 해당 Repo.를 찾아갑니다. 리눅스를 사용하는 경우 "Install from APT Repository"에 나오는 명령어를 그대로 터미널에 복사 & 붙여넣기하여 실행하시면 바로 설치됩니다. 터미널에서 명령어 실행 후 LibreOffice를 실행해 보면 H2O restart 0.5.7 plugin이 설치되어 있음을 확인할 수 있습니다. 명령어 대신 H2Orestart.oxt 파일을 다운로드해 LibreOffice - Extensions에 직접 추가해도 됩니다. 만약 hwp2odt plugin이 제대로 작동하지 않는 경우, LibreOffice - 고급 설정 - Java Runtime Environment에 JRE가 설치되어 있는지 확인해 주세요. (필수) github의 안내에 따라 JRE를 설치해 주세요. hwp2odt plugin을 설치했으니 문서 테스트를 위해 공공기관 홈페이지에 있는 공지사항 또는 보도 자료를 다운로드해서 테스트해보세요. LibreOffice에서 hwp 문서를 확인한 화면입니다. 약간 문서의 서식이 깨진듯한 느낌이지만 문서의 내용은 무리 없이 확인할 수 있으며 편집하여 odt 포맷으로 저장할 수 있습니다. hwp 문서 그대로 확인하거나 편집하고 싶다면 네이버 mybox 또는 한컴 스페이스 계정에 문서를 업로드하여 확인 또는 편집하는 것을 추천합니다.
Read more »