블로그와 같은 웹페이지를 운영할 때 자주 사용하는 HTML과 CSS 코드에 주석을 삽입하여 코드 속 태그에 대한 설명을 하거나 일시적으로 태그를 사용하지 않도록 하는 방법에 대해 알아보겠습니다.
태그를 주석으로 남겨두는 이유
열심히 만든 HTML과 CSS 태그가 더 이상 필요가 없어지는 때가 옵니다. 디자인 등을 변경하면서 해당 태그가 필요없어졌는데, 추후 다시 사용할지도 몰라 지우기는 아쉬운 상황.
이때 미래를 위해 태그를 삭제하지 않고 주석으로 감싸서 남겨두는 방법을 알아보겠습니다.
HTML 주석 삽입 및 감싸는 방법
먼저 예시를 위해 HTML을 하나 만들어봅시다.
<html>
<body>
<a href="https://gamejay.net" target="_blank">제이의 재미놀이터</a>
</body>
</html>여기서 주석을 삽입하여 어떤 태그인지 설명을 하려면 다음과 같습니다.
HTML 태그를 설명하는 주석 달기
<html>
<body>
<!-- 블로그 바로가기 링크 -->
<a href="https://gamejay.net" target="_blank">제이의 재미놀이터</a>
<!-- //블로그 바로가기 링크 -->
</body>
</html>이렇게 <!-- 내용 -->으로 간단하게 주석을 만들 수 있습니다. 앞뒤로 주석을 만들어주면 시작과 끝을 쉽게 알 수 있겠죠?
이제 HTML 태그를 주석으로 감싸는 방법에 대해 알아보겠습니다.
HTML 태그를 감싸는 주석 만들기
<html>
<body>
<!--<a href="https://gamejay.net" target="_blank">제이의 재미놀이터</a>-->
</body>
</html>주석으로 남기는 방법도 동일합니다. 사용된 태그의 제일 앞에 <!--을 붙이고, 제일 뒤에 -->를 붙이면 됩니다. 혹은 기존 태그의 제일 앞부분 홑화살괄호(<)에 !--을 삽입하고 제일 뒤에 --를 삽입하여 <!-- a ~ --> 로 만들어도 됩니다.
앞뒤에 설명하는 주석과 함께 사용하면 나중에 쉽게 찾을 수 있습니다.
CSS 주석 삽입 및 감싸는 방법
여기서도 설명을 위해 CSS를 하나 만들어보겠습니다.
a {
color: red;
text-decoration: none;
transition: color .1s ease-in-out, background-color .1s ease-in-out;
}하이퍼링크를 걸어주는 a태그를 위와 같이 css를 이용해 꾸몄습니다. 여기서 간단하게 주석 만들어보겠습니다.
CSS 태그를 설명하는 주석 달기
/* a 태그 꾸미기 */
a {
color: red;
text-decoration: none;
transition: color .1s ease-in-out, background-color .1s ease-in-out;
}
/* a 태그 꾸미기 끝 */위와 같이 /* 설명 */를 통해 간단하게 설명하는 주석을 달 수 있습니다. CSS 태그가 길 경우에는 앞뒤로 시작과 끝을 알려주는 태그를 달아놓으면 나중에 구분하기 편하겠죠.
CSS 태그를 감싸는 주석 만들기
이것도 간단합니다.
/* a {
color: red;
text-decoration: none;
transition: color .1s ease-in-out, background-color .1s ease-in-out;
} */HTML에 주석을 달 때와 마찬가지로 앞뒤로 설명하는 주석을 달아주면 나중에 키워드로 쉽게 찾을 수 있습니다. 주석은 티스토리나 워드프레스 블로그와 같은 자신만의 웹페이지를 갖고 있으면 굉장히 흔하게 사용됩니다.
너무 간단하지만 많이 사용되니 반드시 기억해둡시다.
번외: 태그 내부의 문자열을 주석으로 감싸기
태그 사이의 내용물에도 주석을 달아서 일부를 감출수 있습니다.
<html>
<body>
<a href="https://gamejay.net" target="_blank"><!--제이의 -->재미놀이터</a>
</body>
</html>이러면 제이의 재미놀이터 대신 재미놀이터라는 하이퍼링크가 나타나겠죠? 이렇게 태그 속 문자열을 주석으로 감싸서 일부 내용을 숨길 수도 있습니다.