HTML 소스를 정리하는 사이트입니다.

홈페이지를 만들면서 기본이 되는 뼈대 무엇일까요. 바로 HTML으로써 우리 몸의 뼈와 같습니다. 뼈가 없으면 일어서지도 걷지도 못하므로 가장 중요한 전체적인 부분이라고 할 수 있습니다. HTML도 마찬가지로 테이블로 뼈대를 완성하여 그 기본 뼈대에 태그를 작성하여 비로써 홈페이지를 만들고 완성하는 것을 말합니다.

홈페이지에 보시면 전부 이미 지나 동영상 텍스트로 이루어져 있지만 주로 우리 눈엔 안 보이지만 전부 테이블로 구성되어 있습니다. 즉 표로 만들어져 있다고 생각하시면 쉽습니다. 우리가 표를 그릴 때 그 안에 해당 내용을 넣듯이 홈페이지도 똑같습니다.

그런데 이런 태그에 아무리 속성이 너무 많아도 나중에 문제점을 찾을 때 헷갈리거나 혼동하는 경우가 있으며 잘 모르는 분들은 어떻게 연결되어 있는지 수정해야 하는지 모를 때가 있어서 난감합니다.

저도 블로그를 운영하면서 스킨 파일을 건드릴 때 바로 태그 건드리는데 처음엔 정말 힘들었지만 지금은 HTML 소스 정리 홈페이지를 통해 소스를 정리하여 매우 편리하고 쉽게 단 한 번의 클릭으로 소스 태그를 정리한답니다.

그동안 일일이 찾고 수정하느라 정말 고생이 많았지만 지금은 소스를 복사하여 붙여넣기 해서 해당 태그 속성을 선택하여 제거 버튼을 누르면 완벽하게 제거가 됩니다.

그렇게 되면 시간이 절약이 되고 정말 편리하고 이 사이트가 없으면 안 될 정도로 지금 이 포스트를 작성하면서도 매우 유용하게 쓰고 있답니다.

HTML 소스 정리 사이트에 들어가 어떠한 기능이 있는지 알아보고 실제로 활용해보도록 하겠습니다.

HTML 소스 정리

아래 화면 보시면 미리 예제로 HTML 이 모두 입력이 되어 있습니다. 보시면 HTML 속성과 Tag 그리고 여백 중 하나를 선택하여 지울 수 있는데요. 소스를 수정하는데 어려움이 있으시거나 초보자분들께 딱 안성 맞춤인 사이트입니다.

미리보기 영역

미리 보기 영역을 보시면 위 태그에 입력된 결과가 예제로 뜨는데 이 미리보기를 확인하면서 태그가 수정이 가능합니다.

속성(allr) 선택

속성 중 다양한 속성이 있습니다. 그중 요즘 HTML5 를 많이 쓰기에 HTML 속성 목록이 뜹니다. 이 속성 목록 중 하나를 선택하여 해당 속성을 지울 수 있습니다.

태그(tag) 선택

span 태그부터 한방에 정리가 가능합니다.

여백(space)

태그에 보면 여백 부분 때문에 많이 힘든 부분이 있습니다. 이 여백 부분을 지워서 코드를 좀 더 깔끔하게 정리해 줍니다.

미리보기 영역-1

한번 border 테이블 선 태그를 지워 보도록 하겠습니다.

과연 어떤 변화가 일어날까요.

미리보기 영역-2

그럼 아래와 같이 border 속성이 사라지면서 테이블 표시가 사라진 것을 확인할 수 있습니다.

이로써 HTML 소스를 정리하는 사이트를 알아보았습니다.