이번 편의 결과물: 세 페이지에서 <·&·저작권 기호가 등장하는 자리를 모두 찾아 올바른 문자 참조로 바꾼다. · 다루는 개념: 이름 문자 참조, 숫자 문자 참조, UTF-8과 meta charset의 역할
이 편에서 만드는 파일
web-practice/portfolio/
├ index.html ~ (푸터 저작권 기호)
├ projects.html ~ (코드 스니펫 3곳, 푸터)
└ contact.html ~ (푸터)개념 정리
HTML 소스에서 <와 &는 특별한 의미를 가진 문자다. <는 태그 시작, &는 문자 참조 시작으로 해석된다. 이 두 문자를 텍스트로 그대로 보여주고 싶으면 브라우저가 태그나 참조로 오인하지 않도록 문자 참조(character reference) 로 바꿔 써야 한다.
문자 참조는 두 종류다. 이름이 붙은 것과 숫자로 지정하는 것.
| 문자 | 이름 문자 참조 | 숫자 문자 참조 | 필요한 상황 |
|---|---|---|---|
< | < | < | 코드 예시 안에서 태그 이름을 텍스트로 보여줄 때 |
> | > | > | 위와 같음, 닫는 꺾쇠 |
& | & | & | URL 안의 쿼리스트링 구분자 &를 텍스트로 보여줄 때 |
" | " | " | 속성값 인용부호를 텍스트로 보여줘야 할 때 |
© | © | © | 저작권 기호 |
| (줄바꿈 없는 공백) | |   | 숫자와 단위 사이처럼 줄바꿈이 나면 안 되는 자리 |
<와 &는 반드시 이스케이프해야 한다(안 하면 파서가 태그·참조로 잘못 해석한다). © 같은 기호는 키보드로 직접 입력한 문자를 써도 렌더링은 되지만, 문서가 어떤 인코딩으로 저장되든 안전하게 표시되도록 이름 문자 참조를 쓰는 편이 낫다.
이 안전장치가 필요한 이유는 <meta charset="UTF-8">이 있어도 문자 자체의 의미는 인코딩과 별개이기 때문이다. UTF-8은 “이 바이트를 어떤 글자로 읽을까”를 정하고, 문자 참조는 “이 글자를 파서가 태그로 오인하지 않게 어떻게 적을까”를 정한다. 한글 텍스트는 UTF-8 선언 덕분에 그대로 써도 깨지지 않지만, <·&는 인코딩과 무관하게 항상 이스케이프 대상이다.
실습
1. 코드 스니펫에 이스케이프가 필요한 예시 추가하기
projects.html의 프로젝트 카드에는 08편에서 넣은 코드 예시가 이미 있다. 이번에는 태그 이름이나 &가 들어간 코드를 텍스트로 보여줄 때만 생기는 문제를 새 예시로 확인한다.
“접근성 체크리스트” 카드 설명 문단 다음에 저장 버튼 마크업 예시를 추가한다.
<!-- 이스케이프 없이 추가하면: 실제 버튼 태그로 해석되어 화면에서 사라진다 -->
<pre><code><button aria-pressed="false">저장됨</button></code></pre><button을 브라우저가 실제 버튼 태그로 열려고 시도한다. <와 >를 모두 이스케이프해서 추가한다.
<!-- 카드에 추가할 코드 -->
<pre><code><button aria-pressed="false">저장됨</button></code></pre>“독서 기록 bookshelf” 카드에도 같은 이유로 JSX 예시를 이스케이프해서 추가한다. <BookCard rating={5} />처럼 태그 형태의 예시는 <·>를 전부 이스케이프한다.
<!-- 카드에 추가할 코드 -->
<pre><code><BookCard rating={5} /></code></pre>“오늘의 날씨” 카드의 기존 코드(navigator.geolocation...)에는 <나 &가 없어 그대로 둔다. 대신 API 주소를 설명하는 문장을 하나 추가해 &도 이스케이프 대상임을 확인한다.
<!-- 카드에 추가할 코드 -->
<p>API는 <code>/api/weather?lat=1&lon=2</code> 형태로 호출됩니다.</p>이 상태로 저장하지 않고 &를 그대로 쓰면 &lon을 브라우저가 문자 참조 시작으로 해석하려다 실패한다.
2. 저작권 기호를 문자 참조로 바꾸기
세 페이지 푸터에 © 2026 Zeno Kim 문구가 있다. 키보드로 입력한 © 문자 대신 이름 문자 참조로 바꾼다.
<!-- ...기존 코드 유지 -->
<footer class="site-footer">
<p>© 2026 Zeno Kim. 이 사이트는 학습용으로 제작되었습니다.</p>
<!-- ...기존 코드 유지 -->
</footer>index.html·projects.html·contact.html 세 파일 모두 같은 방식으로 바꾼다.
3. 브라우저로 확인
각 파일을 브라우저에서 열고 마우스 우클릭 → “페이지 소스 보기”로 소스와 실제 화면을 나란히 비교한다.
4. 확인
projects.html의 코드 스니펫 세 곳이 태그·연산자가 아니라 텍스트 그대로 화면에 보인다- 세 페이지 푸터에
©기호가 정상적으로 표시된다 - 페이지 소스에는
<·>·&·©가 그대로 남아 있고, 화면에는 이스케이프 전의 문자로 보인다
직접 해보기
contact.html의 이메일 도움말 문구를 “이메일 주소 <홍길동@example.com> 형식”처럼 꺾쇠로 예시를 감싸는 문구로 바꿔 보자. 이스케이프 없이 저장하면 어떤 문제가 생기는지 브라우저 콘솔이나 화면에서 확인한다.
정답 보기
<홍길동@example.com>을 그대로 쓰면 브라우저가 <홍길동@example.com>을 알 수 없는 태그로 해석해 화면에서 사라진다. <홍길동@example.com>으로 이스케이프하거나, 애초에 꺾쇠 대신 괄호로 감싸는 문구로 바꾸는 편이 더 안전하다.
자주 하는 실수
| 증상 | 원인 | 고치는 법 |
|---|---|---|
| 코드 스니펫의 태그 이름이 화면에서 사라진다 | <·>를 이스케이프하지 않아 실제 태그로 해석됨 | <·>로 바꾼다 |
| URL 쿼리스트링을 텍스트로 보여줬는데 뒷부분이 잘린다 | &가 존재하지 않는 문자 참조의 시작으로 해석됨 | &로 바꾼다 |
©를 썼는데 화면에 글자 그대로 ©가 보인다 | 세미콜론을 빼먹었거나 오타(©right; 등) | 정확한 이름(©)과 세미콜론을 확인한다 |