HTML 코드 보여주기 – code 태그 완전정복!
HTML 공부하다 보면 코드 예제를 글에 넣고 싶은데, 그냥 태그를 쓰면 실행돼버리는 일이 많습니다.
예를 들어 <p>문단입니다</p>를 보여주고 싶은데, 실제로는 문단이 만들어져버리죠.
이럴 때 필요한 게 바로 code 태그와 HTML 엔티티 변환입니다.
이번 포스팅에서 이 방법을 완벽하게 정리해드립니다.
Step 1. 그냥 쓰면 어떻게 될까?
예를 들어 HTML 포스트에 이렇게 작성했다고 가정해보세요.
<p>문단입니다</p>문단입니다
문제: 브라우저는 <p>를 문자가 아니라 실제 태그로 인식해서 실행해버립니다.
그래서 글로 보여주고 싶어도 태그가 적용된 결과만 나타나는 것이죠.
Step 2. code 태그와 HTML 엔티티 변환
HTML 엔티티란, HTML에서 특수문자를 글자로 표현하기 위한 방법입니다.
대표적으로 <는 <로, >는 >로 바꿔야 합니다.
이렇게 바꾸면 브라우저가 실행하지 않고 글자 그대로 보여줍니다.
그리고 태그를 사용해서 "이 부분은 코드입니다"라고 의미를 추가해줍니다.
<code><p>문단입니다</p></code><p>문단입니다</p>
이렇게 하면 실행되지 않고 코드처럼 보입니다.
엔티티 변환 + code 태그 조합이 핵심입니다.
Step 3. 여러 줄 코드 보여주기
<pre> 태그를 같이 사용하면 줄바꿈까지 유지할 수 있습니다.
<pre>는 "줄바꿈을 있는 그대로 유지하세요"라는 뜻입니다.
<pre><code>
<h1>제목</h1>
<p>문단입니다</p>
</code></pre><h1>제목</h1> <p>문단입니다</p>
<pre>는 줄바꿈과 공백을 그대로 유지해주고,
<code>는 코드라는 의미를 명확히 해줍니다.
Step 4. 다양한 예제 모음
- 1. 단일 코드 표현
HTML 코드
<code><img src="image.jpg"></code>렌더링 결과<img src="image.jpg">
- 2. 명령어 보여주기
HTML 코드
<code>git commit -m "메시지"</code>렌더링 결과git commit -m "메시지"
- 3. 함수 표현
HTML 코드
<code>console.log('Hello!')</code>렌더링 결과console.log('Hello!')
정리하며
- 코드 보여주기 → 엔티티 변환 + code 태그
- 여러 줄 코드 → pre + code 조합
🔧 추가 설명
code 태그는 "이 부분은 코드입니다"를 알려주는 역할을 합니다.
단순히 글씨만 꾸미는 것이 아니라, 브라우저와 검색엔진에게도 코드라는 의미를 정확히 전달합니다.
자주 검색되는 html 코드 출력, html 코드 보여주는 방법까지 해결해주는 태그입니다.
추가로 kbd 태그는 키보드 입력을 표현할 때 사용합니다.
예를 들어 Ctrl + C 처럼 키보드 키를 나타낼 때 쓰니,
code와 kbd를 헷갈리지 마세요!
다음 포스팅에서는 pre 태그를 더 깊이 다뤄보겠습니다.