[HTML5] 5. 소스 코드를 본문에 포함할 때는 pre 태그를 사용!

HTML 문서를 작성할 때 작성할 때 보이는 것과 브라우저에서 보이는 내용이 다르게 보일 수 있습니다.

간단한 예를 들어볼게요.

  • 태그없이 입력한 예

웹 브라우저 화면
웹 브라우저 화면

보시는 것처럼 편집할 때 여러 문단으로 작성한 것이 하나의 문단으로 나타나는 것을 알 수 있습니다.

HTML에서는 <p> 태그를 통해 새로운 문단을 시작하는 것을 나타내 줄 수 있습니다.

  • <p> 태그 사용한 예

웹 브라우저 화면
웹 브라우저 화면

하지만 프로그램 소스를 <p> 태그를 사용해서 표현하면 들여쓰기가 사라집니다. 이를 위해 <br>태그를 제공하고 있지만 편집하기가 불편합니다. 다음은 <br> 태그없이 <p> 태그만 사용하여 하노이 타워 소스를 편집한 예입니다.

  • 하노이 타워 소스를 <p>태그 사용한 예

웹 브라우저 화면
웹 브라우저 화면

HTML5에서는 pre 태크를 제공하여 작성하면 입력한 내용의 개행과 들여쓰기를 그대로 유지시켜 편집할 때 보는 것과 브라우저에서 보는 것을 같게 할 수 있습니다.

참고로 <는 &lt; >는 &gt; 로 표현합니다.

  • 하노이 타워 소스를 <pre>태그 사용한 예

브라우저 화면
브라우저 화면

이제 소스 코드를 본문에 포함할 때는 pre 태그를 사용하세요.


예제 파일 다운로드