티스토리 뷰
이번 시간은 html 뷰어 사용할 수 있는 방법을 알려드리기 위한 정보성 포스팅을 준비했는데 웹상에서 문서를 만들기 위한 과정에서 사용되는 프로그래밍 언어 HTML은 단순한 형태의 컴퓨터 언어로 하이퍼텍스트를 작성하려고 개발됐습니다.
보통 대부분의 인터넷에서 Web을 통해 접근하는 페이지는 이 언어를 사용한다고 보시면 되는데요.
컴퓨터를 활용하여 온라인 웹상에서 나만의 멋진 홈페이지를 만들고 싶은 생각을 갖고 계신 분들이 많을 텐데 다양한 디자인과 구성의 스킨을 이용할 수도 있지만 원하는 구조가 아니라서 직접 코드를 입력하여 바꾸고 싶은 생각이 들 수 있을 겁니다.
그래서 이 분야에 관심을 갖고 있거나 어느 정도 지식이 있는 분들은 태그 변경 또는 추가 입력을 통해 글자와 문서, 그래픽 등 태그 변경 작업을 시도하여 자기만의 구조를 관리하고 계실 텐데요.
그런데 코딩 프로그램을 이용해서 특정 일부분을 변경하고 저장한 다음 확인하는 작업이 계속해서 반복되다 보니 과정이 다소 번거롭거나 불편하게 느껴질 수도 있을 텐데 알고 보니 온라인상에서 별도로 설치 파일을 내려받을 필요 없이 간편하게 html 뷰어 전용으로 쓸 수 있는 곳을 알게 돼서 매우 유용한 것 같다는 생각을 하게 됐습니다.
쉽고 간단한 방법으로 달라진 결과를 확인할 수 있도록 도움을 주는 이 Viewer 사이트의 이름은 Code Beautify라고 알려져 있으며 작업할 때 잘 활용하면 효율적인 일 처리가 가능한 것을 느낄 수 있을 거예요.
그런 의미에서 온라인에서 이용 가능한 Viewer 사이트를 알려드릴 텐데 인터넷 포털 사이트의 검색창에 'code beautify'를 입력 후 찾아보면 바로 사이트를 확인할 수 있으니 클릭해서 들어가도록 합니다.
참고로 이곳으로 진입하면 JSON, XML, MXML, JAVA, JavaScript, RSS, C#, Source Code 등 다양한 뷰어 기능을 이용할 수 있으니 좋을 텐데 표시한 버튼을 눌러서 다음으로 이동하세요.
다음 화면을 보면 좌측에는 Input 우측에는 Resultd 영역으로 구분된 걸 볼 수 있고 중간에 몇 가지 메뉴가 준비되어 있는데 테스트를 해보기 위해 [Load Url]를 눌러 입력창에 태그를 보고 싶은 주소를 적은 후 Load를 하시면 되겠습니다.
저 같은 경우 대한민국에서 2번째로 유명한 포털 사이트인 다음(Daum)의 주소를 입력하니 좌측에 정리된 태그와 우측에 미리보기 형식으로 완성된 html 뷰어 결과를 간편하게 확인할 수 있었어요.
스크롤을 위, 아래 또는 좌, 우로 조정해볼 수도 있지만 우측 상단에 Full Screen 모양을 눌러 전체적으로 살펴볼 수도 있으니 도움이 될 수 있을 것입니다.
이렇게 Input하게 되면 Output의 결과를 빠르게 볼 수 있고 코딩으로 완성된 외형의 모습을 아주 쉽게 볼 수 있어 효율적인 작업이 가능할 거예요.
또한 [Browse] 버튼을 눌러 파일을 불러올 수도 있는데 자바스크립트가 포함되어 있거나 다소 복잡한 코딩일 경우 에러가 발생할 때도 있지만 페이지 소스를 복사하여 Input 영역에 붙여넣기 해주면 정상으로 Output을 확인할 수 있을 겁니다.
그러니 평소에 웹디자인 및 코딩에 관심을 갖고 있는 분들이 이곳을 이용해 보면 유용함을 느끼게 될 것이며 이상으로 html 뷰어 프로그램을 굳이 설치하지 않고 간편하게 확인할 수 있는 곳인 code beautify에 대해 알려드린 포스팅을 마치겠고요.
아무쪼록 이 내용을 보신 후 도움이 됐다면 밑에 공감 (♥)하트 또는 공유 부탁드리고 부디 이 내용이 유익한 정보가 되셨기를 바라겠습니다.