개발자 도구

HTML 뷰어

HTML 코드를 입력하여 이스케이프된 소스 문자열과 미리보기 텍스트를 확인하고 글자 수 및 줄 수를 검사합니다.

도구 실행

HTML 뷰어는 입력한 웹 마크업 코드를 손쉽게 검사할 수 있는 도구입니다. 텍스트 창에 HTML 코드를 입력하고 모드를 선택하면 처리된 결과를 바로 확인할 수 있습니다. 소스 모드를 선택하면 특수 문자가 이스케이프된 형태의 소스 코드가 생성되며, 미리보기 모드에서는 전달된 원본 HTML과 이스케이프된 코드가 함께 제공됩니다. 또한 입력된 텍스트의 전체 글자 수와 줄 바꿈 기준의 행 수를 계산하여 함께 표시합니다. 입력값이 비어 있는 경우에는 빈 내용으로 안전하게 처리되며, 소스나 미리보기 이외의 지원하지 않는 모드를 입력하면 오류 메시지가 반환됩니다. 웹 개발이나 문서 작성 시 마크업 구조를 점검할 때 유용합니다.

사용 방법

  1. HTML 입력란에 점검할 마크업 코드를 붙여넣거나 직접 작성합니다.
  2. 모드 선택란에서 소스 또는 미리보기를 지정합니다.
  3. 실행을 누르면 변환된 텍스트와 함께 글자 수 및 줄 수 통계가 화면에 나타납니다.

예시

  • HTML 입력에 '<p>안녕하세요</p>'를 넣고 소스 모드로 실행하면 특수 기호가 변환된 이스케이프 문자열과 18글자 1행 정보가 표시됩니다.
  • HTML 입력에 '<h1>제목</h1>\n<p>본문 내용</p>'을 넣고 미리보기 모드로 실행하면 원본 HTML과 이스케이프 소스, 33글자 2행 정보가 함께 반환됩니다.

자주 묻는 질문

입력란을 비워두고 실행하면 어떻게 됩니까?

HTML 입력을 비워둔 채 실행하면 오류 없이 빈 내용으로 처리되어 결과를 보여줍니다.

소스 모드와 미리보기 모드의 차이는 무엇입니까?

소스 모드는 HTML 특수 기호를 이스케이프한 문자열을 제공하며, 미리보기 모드는 전달받은 원본 HTML과 이스케이프 문자열을 함께 제공합니다.

지원되지 않는 모드 값을 지정하면 어떻게 처리됩니까?

소스 또는 미리보기가 아닌 다른 모드 값을 지정하여 요청하면 오류 안내가 반환됩니다.

이 도구 삽입하기

아래 코드를 사용해 작동하는 SmartPlusLab 도구를 웹사이트에 추가하세요.