코멘트

코멘트는 코드를 정리하고 설명하는 일종의 노트이다.

코드작성을 할 때는 보이지만, 프로그램을 실행하면 코멘트 부분은 무시하기때문에 화면에 출력되지 않는다.

오랜만에 코드를 열어볼때나 동료 프로그래머가 코드를 볼때 이해를 돕는 역할을 한다.

 

 

HTML의 코멘트는

 

<!-- 이사이에 코멘트를 적는다 -->

 

 

CSS의 코멘트는

 

/* 이 사이에 코멘트를 적는다 /*

 

단축키로 커멘드+/ 혹은 ctl+/ 를 사용한다.

커서가 있는 줄이 코멘트로 설정되고, 여러줄을 선택할때는 블럭을 지정하고 사용한다.

 

 

 

 

HTML 코멘트

<!-- 첫 번째 영화: 굿 윌 헌팅 (Good Will Hunting) -->
<div class="movie">
<h2>Good Will Hunting (굿 윌 헌팅)</h2>
<p>수학, 법학, 역사학 등 모든 분야에 재능이 있는 ‘윌’(맷 데이먼)은 천재적인 두뇌를 가지고 있지만 어린 시절 받은 상처로 인해 세상에 마음을 열지 못하는 불우한 반항아.</p>
</div>

<!-- 두 번째 영화: 뷰티풀 마인드 (A Beautiful Mind) -->
<div class="movie">
<h2>뷰티풀 마인드 (A Beautiful Mind)</h2>
<p>40년대 최고의 엘리트들이 모이는 프린스턴 대학원. 시험도 보지 않고 장학생으로 입학한 웨스트버지니아 출신의 한 천재가 캠퍼스를 술렁이게 만든다. 너무도 내성적이라 무뚝뚝해 보이고, 오만이라 할 정도로 자기 확신에 차 있는 수학과 새내기 존 내쉬. 누구도 따라올 수 없는 뛰어난 두뇌와 수려한 용모를 지녔지만 괴짜 천재인 그는 기숙사 유리창을 노트 삼아 단 하나의 문제에 매달린다. 바로 자신만의 '오리지날 아이디어'를 찾아내는 것. 어느 날 짖궂은 친구들과 함께 들른 술집에서 금발 미녀를 둘러싸고 벌이는 친구들의 경쟁을 지켜보던 존 내쉬는 섬광같은 직관으로 '균형이론'의 단서를 발견한다. 1949년 27쪽 짜리 논문을 발표한 20살의 청년 존 내쉬는 하루 아침에 학계의 스타로, 제2의 아인슈타인으로 떠오른다.</p>
</div>

<!-- 내용 -->의 형태로 되어 있는 부분이 HTML의 '코멘트(comment)'입니다.

CSS 코멘트

/* 영화 제목 */
.movie h2 {
color: #4d9fff;
text-align: center;
font-size: 48px;
}

/* 영화 줄거리 */
.movie p {
font-size: 24px;
}

/* 내용 */의 형태로 되어 있는 부분이 CSS의 '코멘트(comment)'입니다.

정리

코멘트는 사실 브라우저가 무시하기 때문에 실제 결과물인 사이트에 반영이 되지 않습니다. 하지만 복잡한 부분들을 설명함으로써 지저분해 보일 수 있는 코드를 정리해주는 중요한 역할을 합니다.

몇 년 뒤에 자신이 쓴 코드를 확인했을 때, 또는 동료 개발자에게 코드를 보여줬을 때 코멘트로 설명이 잘 되어 있어야 이해하기 쉽겠죠?