• 회원가입
  • 로그인
  • 구글아이디로 로그인

[basic] HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미

목차

  1. HTML 주석 예제
  2. HTML 주석 정의
  3. HTML 주석 구문
  4. <script> 태그 안 주석 역할
  5. IE 조건부 주석

 

HTML 주석 예제

 
<!-- 홈짱닷컴 소개 시작--> 
<p> 홈짱닷컴 (homzzang.com)</p>
<p> 홈페이지 무료 제작 강의 카페 </p>
<p> html css java 등 무료 강의 </p>
<!-- 홈짱닷컴 소개 종료--> 
 

HTML 주석 정의


소스 코드가 뭐에 관련된 내용인지 설명할 때 사용하거나,
특정 소스를 브라우저에 실행시켜 보이고 싶지 않을 때 사용.

 



1.
특정 소스의 시작과 끝을 표시할 때 설명을 넣어 사용하면 수정 편집할 때 굉장히 편리.
 
2.
브라우저엔 보이지 않지만, 소스 보기를 하면 주석 내용이 보임.
 
3.
너무 많은 주석은 유령 문자 버그 생성하니 주의 !!
 
4.
전역속성이벤트속성 지원 X
 
※ 전역 속성 (Global Attributes) : 
HTML 요소들 안에서 공통 사용 가능 속성
 
 이벤트 속성 (Event Attributes) : 
문서 객체의 속성 중 on으로 시작하는 속성 
 
 

HTML 주석 구문

 

<!-- 주석내용 -->



[주의]

<! -- 주석 내용 --> (X) (이유: "<!" 와 "--" 사이에 공백 존재.)

<!-- 주석 내용  -- > (△) (이유:  "--"와  ">" 사이에 공백 존재.)

<!--- 주석 내용 ---> (X) (이유: 주석 구분자에 2개 초과 하이픈('-') 사용.)

 

 

<script> 태그 안 주석 역할

 
<script type="text/javascript">
< !--
function displayMsg() {
    alert("홈짱닷컴 (Homzzang.com)")
}
//-->
< /script>

 


[설명]
 
1.
  • <!-- //--> 코드는 기본적으로 브라우저가 HTML 주석으로 인식하는데, 브라우저에 JS엔진 내장 시, <!-- //--> 안 코드를 JS 소스로 재인식 함.
  • 즉, 브라우저에 JS엔진 없어서 발생하는 에러를 사전에 방지하는 역할 함.
  • 현재는, 거의 대부분 JS엔진 내장된 상태라 더 이상 사용 안 해도 됨.
 
2.
  • 자바스크립트에선 //를 넣어 <!--주석 내용//-->처럼 사용함. (왜냐하면, //이 자바스크립트가 -->를 실행시키는 것을 막아 줌.)
  • 일반 HTML도 주석 끝부분 명확히 표시 위해 // 넣어 사용 가능.
  • 다양한 JS 주석 처리법 보기 
 
 

IE 조건부 주석

 
IE 브라우저에서만 해석해 실행시키는 주석.
크롬・파이어폭스 등 타 브라우저는 주석으로 인식해 실행 안 함.
 

 


분류 제목
link HTML - <link> 태그 ★ - 외부소스연결 (= link태그 = 링크태그) (HTML5수정) ※ 파비…
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
form HTML - <select> 태그 ★ - 선택메뉴 (= select태그 = 실렉트태그 = 셀렉트태그) (H…
api HTML5 - Drag and Drop - 마우스로 끌어서 놓기 (= 드래그앤드롭)
font HTML - <i> 태그 - 이탤릭체 (=기울어진 글씨체 = 글씨 기울어지게 = i태그 = 아이태그, 이탤…
etc HTML - <tt> 태그 - 텔레타이프 텍스트 (= tt태그 = 티티태그)
media HTML - <audio> 태그 ★ - 음성파일재생 (= audio태그 = 오디오태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
programming HTML - <embed> 태그 - 외부동영상재생 (= embed태그 = 엠베드태그, HTML5추가)
etc HTML - 키보드 단축키 모음 (Window/Mac)
style HTML - <style> 태그 ★ - 요소에 CSS스타일적용 (= style태그 = 스타일태그)
image HTML - <area> 태그 - 이미지맵에서 특정 링크 영역 (= area태그 = 에어리어태그) (HTML…
style HTML - <details> 태그 - 토글 가능한 세부사항(상세사항)을 표시 (= details태그 = 디…
form HTML - <textarea> 태그 ★ - 여러줄 입력창 (= 텍스트입력영역 = 텍스트영역 = textar…
font HTML - <strong> 태그 ★ - 굵은글씨 (= 글자굵기 = 폰트굵게 = strong태그 = 스트롱태…
image HTML - <map> 태그 - 이미지 특정 부분에 링크 (= map태그 = 이미지맵태그) ※ 이미지에 여러…
image HTML - <img> 태그 ★ - 이미지태그 (= img태그) ※ 이미지 일부 자르기, ※ 링크 허버 시,…
form HTML - <input> 태그 ★★★ - 입력창 + 입력버튼 (= input태그 = 인풋태그) ※ 자동포커…
font HTML - <u> 태그 ★ - 밑줄태그 (= u태그 = 유태그 = 언더라인태그) (HTML5재정의)
17/18
목록
찾아주셔서 감사합니다. Since 2012