HTML 소스 코드 웹페이지에 삽입하기 | HTML Entities Encoder / Decoder

By
Travelholics
-

HTML 소스 코드를 웹페이지에 삽입하고자 할때, 과거 ‘<xmp></xmp>‘ 태그를 많이 사용했었습니다. 하지만, 이 태그는 Obsolete 되어 권장되지 않는 방법이며, ‘<pre><code> 내용 </code></pre>’과 같이 <pre>와 <code> 태그에 감싸서 사용하는 것이 바람직하다고 명시되어 있습니다. 참고 – MDN Web Docs

HTML 태그 및 객체들이 인코딩(Encoding)되어 있지 않으면, 코드가 브라우저에 의해 해석되어 반영되는 경우가 발생합니다. 따라서 코드를 삽입하기 이전 HTML 소스 코드를 HTML 객체 Encoder를 이용하여 변환해주어야 합니다.

HTML 객체 인코딩 ▼

<html>
<body>
<h1>인코딩</h1>
</body>
</html>
------------------------인코딩 후-----------------------
&lt;html&gt;
&lt;body&gt;
&lt;h1&gt;인코딩&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
  • UPDATE 2019-02-23 : 서버비 문제로 해당 페이지를 내리게 되었습니다. 다른 대체 사이트를 링크해두니 그 사이트의 기능을 이용하시기 바랍니다.
  • HTML entity encoder/decoder 대체 사이트

HTML 객체 Encoder / Decoder

필자는 그냥 연습삼아 간단하게 구현해보았습니다. 아래 링크를 통해 Encoder / Decoder로 접근 가능합니다.

아래와 같이 INPUT 값에 HTML 코드를 넣고 Encode를 누르면 OUTPUT Field에 Encoding 되어 나타납니다. 반대로 Decoding도 마찬가지입니다.

변환된 코드를 ‘<pre><code> 내용 </code></pre>’ 태그 안에 삽입하면 완료입니다. ▼

<pre><code>
&lt;html&gt;
&lt;body&gt;
&lt;h1&gt;인코딩&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

 

인코딩에 사용된 함수 ▼

string htmlspecialchars ( string $string [, int $flags = ENT_COMPAT | ENT_HTML401 [, string $encoding = ini_get("default_charset") [, bool $double_encode = true ]]] )
string html_entity_decode ( string $string [, int $flags = ENT_COMPAT | ENT_HTML401 [, string $encoding = ini_get("default_charset") ]] )

이상입니다.

댓글 남기기