html <> 태그 오류

 

 

C #이나 Java처럼 <, > 기호를 쓰는 프로그래밍 코드를 블로그에 올리다 보면 이상하게 코드 블록이 깨지거나, </code> 부분이 빨갛게 표시되는 경우가 있습니다.
저도 처음에 이게 왜 그런 건지 한참 헤맸습니다. 문제의 원인은 의외로 단순했습니다.
HTML에서는 < 기호를 태그의 시작으로 인식합니다.
그런데 프로그래밍 코드 안에서는 < 가 비교 연산자로도 쓰이고, 제네릭 타입을 표현할 때도 자주 등장합니다.

 

예를 들어 이런 코드가 있다고 해보겠습니다.

if (value < count) 
{ 
    // ... 
} 

Dictionary<string, int> scores = new Dictionary<string, int>();

 

이처럼 <, > 기호가 들어간 코드가 블로그에 들어가면 HTML 은 이걸 진짜 태그인 <count>, <string> 같은 걸로 착각합니다.

그래서 “태그는 열렸는데 닫히지 않았다”고 판단해서 </code> 같은 부분이 오류처럼 붉게 표시되는 것이었습니다. 

 

해결 방법 : 특수문자로 바꿔쓰기

이 문제를 해결하려면 < 기호를 그냥 쓰는 게 아니라, HTML이 문자로 인식할 수 있게 바꿔줘야 합니다.

방법은 &lt;라는 특수문자를 사용하면 됩니다.

& 는 특수문자 코드가 시작됨을 알리는 표시이고, lt는 "less than(작다)" 의 약자입니다.

뒤에 세미콜론 ;까지 꼭 붙여야 마무리가 됩니다. (여기서 또 한번 헤멨습니다. ^^;;)

즉, < 대신 &lt; 를 써야 하고, 마찬가지로 > 는 &gt; 로 써야 합니다. 

 

예시 코드

아래는 바르게 변환된 코드 예시입니다.

for (int i = 0; i < numbers.Count; i++) 
{ 
    Console.WriteLine(numbers[i]); 
}

 

이렇게 < 대신 &lt; 로 쓰면 HTML이 착각하지 않고, 코드가 그대로 잘 보이게 됩니다.

 

마무리

프로그래밍 코드를 그대로 복사해서 붙여넣으면, 생각지도 못한 HTML 파싱 오류로 코드가 깨지는 경우가 많습니다.
특히 <, > 같은 기호는 자주 쓰이는데 그냥 써도 HTML 코드가 유연하기 때문에 출력에는 문제가 없지만, 프로그래머 특성상 빨간색으로 태그 오류가 뜨니 좀 당황스럽기는 했습니다.

정리하자면, 코드 안에서 < 기호를 쓸 때는 꼭 &lt; 로 바꿔서 사용하시면 됩니다.