CSS 파일에 html 주석처리가 필요한 이유

 
CSS 파일을 열어보면 코드 내부에 주석 처리가 된 부분을 확인할 수 있다. 그런데 CSS 내부의 주석이 일반적인 CSS에 사용되는 주석이 아닌... html 주석처리가 된 것을 볼 수도 있다. 왜 CSS 주석이 아닌 html 주석처리를 할까? 그 이유는 무엇이고 주석처리를 하는 경우와 안하는 경우 어떤 차이점이 있을지 알아보도록 하자.

먼저 아래의 예제 코드를 보자. 아래 코드는 일반적으로 볼 수 있는 css 코드이다. 이 코드의 상단과 하단에 <!-- 그리고 --> 표시를 볼 수 있는데 이 부분이 바로 html 주석이다.

# 오래된 브라우저의 경우 style 태그를 인식하지 못하는 경우 발생 가능

최근 브라우저를 사용하는 경우 이런 일이 발생하지 않겠지만 오래된 브라우저의 경우 <style> 태그를 정상적으로 인식하지 못하는 경우가 있다. 이 경우 사이트 소유자가 의도하지 않던 CSS 코드들이 html에 섞여서 보여질 수 있는 문제점이 생기게 된다.

참고로 최근의 브라우저는 이런 문제가 발생하지 않을 것이나 개발자들의 오래된 습관으로 볼 수 있다... 예를 들어 html5가 표준화되면서 대부분의 코드 형식이 약식으로 사용되고 특별히 선언하지 않아도 지원될 수 있는 부분들이 개발자들의 습관에 의해 계속적으로 사용되는 것을 예로 들 수 있을 것이다.

# 내부 CSS 또는 inline CSS 처리된 부분에 html 주석처리를 하는 이유는?

사실 주석 처리를 하지 않더라도 기능상 동작에는 차이가 없을 것이다. 하지만 만약 위의 css코드가 내부 CSS(internal CSS)로 사용되었고 이 내용이 파일 형태가 아닌 데이터베이스 저장소 안에 있는 경우 문제가 생길 여지가 있는데...

일반적으로 데이터베이스에 저장된 내용을 불러올 경우 태그를 제거하여 뿌려주는데 이 경우 strip_tags() 등의 함수를 사용한다. 이 함수를 위의 경우에 사용한다면 물론 태그는 정상적으로 제거될 것이다. 하지만 style 태그의 경우 안에 해당하는 내용들이 모두 보여질 수 있게된다. 그래서 주석처리를 해두었을 경우 이런 경우의 문제를 사전에 차단할 수 있다. 결국 html 주석이 하나의 안전장치로 사용될 수 있는 것이다.

물론 위처럼 주석을 사용하지 않아도 인라인으로 사용하지 않는 경우라면??? 문제가 전혀없다.

# 참고사항. CSS 주석의 사용방법은?

일반적인 CSS 주석의 모습을 모르는 경우를 위해 아래 CSS 주석 코드를 추가해 두었다. 이 형태의 코드가 CSS에서 사용되고 실제 적용되는 코드이다.

/* 내용 */ 이 부분이 CSS 주석이다. html 주석과는 기호가 다르다는 사실~!