HTML 코드 원문과 이스케이프 결과 확인 방법

HTML 표현을 살펴볼 때의 기준

HTML Viewer는 HTML을 웹페이지로 꾸며서 보는 도구라기보다, 입력한 HTML이 텍스트로 어떻게 표현되는지 살펴보는 데 사용할 수 있는 도구입니다. 태그가 포함된 문자열을 그대로 비교하거나, HTML 기호가 이스케이프된 결과를 확인해야 할 때 목적에 맞습니다. HTML 입력은 선택 사항이므로 입력란을 비워 둘 수도 있습니다. 다만 빈 입력은 빈 내용으로 성공 처리되며, 내용이 있는 HTML을 대상으로 하는 source 또는 preview 처리 결과가 만들어지는 흐름과는 구분해야 합니다.

모드는 source와 preview 중에서 선택합니다. 모드를 따로 지정하지 않으면 source가 기본값으로 사용됩니다. source는 제공한 HTML의 이스케이프된 표현을 확인하는 방식이고, preview는 제공한 HTML과 이스케이프된 표현을 함께 대조하는 방식입니다. 여기서 preview라는 이름은 브라우저 화면을 만들어 보여 준다는 뜻이 아닙니다. 입력 내용과 텍스트 표현을 나란히 살펴보려는 경우에 적합한 선택지로 이해하면 됩니다.

이 도구를 사용할 때는 먼저 확인하려는 것이 원문인지, 원문과 변환된 텍스트의 비교인지 정하는 것이 좋습니다. 태그가 텍스트로 나타나는 모습만 살피려면 source가 간단하고, 두 표현 사이의 차이를 직접 살피려면 preview가 알맞습니다. 결과에 표시되는 문자 수와 줄바꿈으로 구분된 구간 수도 함께 읽으면 입력한 내용의 규모를 파악하는 데 도움이 됩니다.

입력과 모드에 따른 확인 순서

확인할 HTML을 입력란에 붙여 넣습니다. 예를 들어 태그와 텍스트가 함께 있는 짧은 문자열을 넣으면 태그가 결과에서 어떤 문자 표현으로 보이는지 비교하기 쉽습니다. 여러 줄로 작성한 HTML이라면 줄바꿈도 입력한 상태로 유지해 결과의 구간 수를 살펴볼 수 있습니다. 입력란을 비워 둔 채 진행하는 것도 가능하지만, 이 경우에는 빈 내용으로 성공 처리되므로 HTML 표현을 비교하는 결과를 기대하지 않아야 합니다.
모드를 정합니다. 입력한 HTML에서 이스케이프된 표현만 확인하려면 source를 선택합니다. 모드 선택을 생략하면 source가 사용되므로, 별도의 선택 없이 같은 목적의 확인을 진행할 수도 있습니다. 이 기본값은 입력이 비어 있지 않은 경우에 source 처리로 이어질 때 적용됩니다. 빈 입력은 먼저 빈 내용으로 처리되므로 source 결과가 생성되는 상황과 다릅니다.
입력한 HTML과 이스케이프된 표현을 함께 대조하려면 preview를 선택합니다. 이때 결과에서 제공된 HTML과 그 내용을 표현한 결과를 각각 확인할 수 있습니다. preview라는 모드 이름만 보고 브라우저 렌더링이나 HTML 실행을 기대해서는 안 됩니다. 이 과정의 확인 대상은 화면이 아니라 두 가지 텍스트 표현입니다.
실행한 뒤 결과의 본문을 읽습니다. source에서는 입력한 HTML의 이스케이프된 표현이 포함되는지 살펴보고, preview에서는 제공된 HTML과 이스케이프된 표현이 함께 있는지 확인합니다. 내용이 있는 source 및 preview 요청에는 문자 수와 줄바꿈으로 구분된 구간 수도 표시됩니다. 문자 수는 입력 규모를, 줄바꿈 구간 수는 입력에 포함된 줄 단위 구성을 살피는 보조 정보로 활용할 수 있습니다.
모드 값을 직접 입력하는 방식이라면 이름을 확인합니다. source나 preview가 아닌 다른 모드는 오류 응답을 반환합니다. 오류가 발생했을 때는 HTML 내용 자체를 먼저 바꾸기보다 모드가 허용된 두 선택지 중 하나인지 점검하는 편이 적절합니다. 모드를 고치고 같은 HTML을 다시 확인하면 입력 문제와 모드 문제를 분리해서 살필 수 있습니다.
확인 목적에 맞게 결과를 기록합니다. 태그의 이스케이프 표현만 필요하면 source 결과를 기준으로 보고, 원문과 변환 표현을 비교해야 하면 preview 결과를 함께 봅니다. 결과의 수치를 문법 판정이나 실제 화면의 모양으로 해석하지 말고, 입력 텍스트의 표현과 크기를 확인하는 자료로만 사용합니다.

표시된 결과를 해석하는 범위

source 결과에서 태그의 꺾쇠괄호 같은 HTML 문자가 이스케이프된 형태로 보인다면, 입력한 문자열이 텍스트 표현으로 제공된 것입니다. 이 결과는 입력한 HTML을 실행했다는 의미가 아니며, 태그가 문서 안에서 어떤 문자로 나타나는지 확인하는 데 사용합니다. preview 결과는 이 확인을 한쪽 표현에만 의존하지 않도록 제공된 HTML과 이스케이프된 표현을 함께 보여 줍니다. 따라서 두 결과의 차이를 비교할 때는 어느 쪽이 원문이고 어느 쪽이 표현된 결과인지 구분해서 읽어야 합니다.

문자 수와 줄바꿈으로 구분된 구간 수는 내용이 있는 source 및 preview 요청에 포함됩니다. 문자 수가 크다고 해서 HTML이 올바르다는 뜻은 아니며, 구간 수가 많다고 해서 화면이 여러 부분으로 표시된다는 뜻도 아닙니다. 두 수치는 입력한 텍스트의 양과 줄 구성에 관한 정보입니다. 입력 내용이 한 줄인지 여러 줄인지에 따라 구간 수가 달라질 수 있으므로, 수치를 비교할 때는 줄바꿈을 임의로 추가하거나 제거했는지도 함께 확인해야 합니다.

빈 입력은 오류로 처리되는 대신 빈 내용으로 성공 처리됩니다. 그러므로 빈 결과가 나왔을 때는 변환 실패로 단정하지 말고 입력란에 HTML이 들어 있었는지 먼저 살펴보아야 합니다. 반대로 내용이 있는 요청에서 source 또는 preview의 표현이나 수치가 필요한 경우에는 입력이 실제로 전달되었는지 확인해야 합니다. 이 도구의 결과만으로 HTML 문법의 유효성, 브라우저에서의 표시 모습, 태그의 실행 여부를 판단할 수는 없습니다.

사용 예시

짧은 문단 태그가 실행되지 않은 텍스트 표현으로 어떻게 나타나는지 확인하려는 상황입니다.

태그 표현을 확인하려는 상황에서

안녕하세요

를 입력하고 source를 선택합니다. 반환된 내용에서 태그가 이스케이프된 표현으로 나타나는지와 문자 수 및 줄바꿈 구간 수가 함께 제공되는지 살펴봅니다.

한 줄로 입력한 HTML에 대해 source 결과에는 이스케이프된 표현과 문자 수, 줄바꿈으로 구분된 구간 수가 포함됩니다. preview 결과에는 입력한 HTML과 이스케이프된 표현, 두 수치가 함께 포함됩니다.

제한 사항

결과는 HTML의 텍스트 표현을 확인하는 범위에 해당하며, 브라우저 렌더링이나 HTML 실행, 문법 유효성 판정을 뜻하지 않습니다.

자주 발생하는 오류

source 또는 preview가 아닌 모드 이름을 사용하면 오류 응답이 반환될 수 있습니다. 모드 값을 두 선택지 중 하나로 바꾼 뒤 같은 HTML을 다시 제출하세요.

자주 묻는 질문

HTML을 입력하지 않고도 실행할 수 있나요?

입력란을 비워 두면 빈 내용으로 성공 처리됩니다. 이 경우에는 내용이 있는 HTML을 대상으로 하는 source 또는 preview 처리 결과가 생성되지 않습니다.

모드를 선택하지 않으면 어떤 모드가 적용되나요?

모드를 지정하지 않은 경우에는 source가 기본으로 사용됩니다. HTML 내용이 있다면 source 결과에서 입력한 HTML의 이스케이프된 표현을 확인할 수 있습니다.

preview에서 HTML이 실제 웹페이지처럼 표시되나요?

preview를 선택해도 브라우저 화면이 만들어지거나 HTML이 실행되는 것은 아닙니다. 내용이 있는 입력에서는 제공된 HTML과 이스케이프된 표현을 함께 확인하는 결과가 제공됩니다.