반갑습니다~
글을 작성하다보니 어느덧 5강까지 왔네요
이전 강좌들은 HTML을 배우는데 많은 도움이 되셨나요??
4강 게시물을 아직 읽지 못하고 오신분들은 아래 링크를 클릭하여 게시물을 읽은후 5강을 들으면
공부에 도움이 될겁니다!
4강 링크를 클릭하세요!
이번 5강에서는 HTML에서 주석을 다는 방법에대해서 알려드리려고 합니다
주석이란?
소스코드의 양이 많아진다면 매번 어느부분인지 확인하기가 어렵습니다 그렇기 때문에 HTML프로그래밍을 하는 과정에서 각 행별 어떤 소스 코드인지 이해하기 쉽게 정리하는데 사용이 됩니다
주석은 HTML뿐만아니라 css에도 있으며 C언어나 vb.net ,c#에도 존재합니다
하지만 프로그래밍 언어에따라서 약간씩 주석을 넣는 방법도 다릅니다
그럼 HTML에서는 주석을 어떻게 넣을까요??
HTML 주석 작성방법
1 2 3 4 | <!-- 이곳에 내용을 작성합니다 --> <body> </body> | cs |
HTML에서는 <!-- -->
사이에 내용을 넣어 주석을 작성합니다
예제에서는 <body> 태그 위에 주석을 작성했습니다
주석을 작성하면 다른 소스들과 다르게 연하게 표시됩니다
주석의 색상은 에디터마다 약간 다릅니다
에디터별 HTML 주석의 차이점
*비주얼스튜디오코드에서의 HTML 주석사용시 초록색으로 표기됨*
Sublime Text에서의 HTML 주석사용시 회색으로 표기됨
Atom에서의 HTML 주석 사용시 연한 청색으로 표기됨
그리고 웹상에서 개발자 도구를 사용하여 소스코드를 확인할경우에는 대부분 비주얼스튜디오코드처럼 초록색으로 표기가 됩니다
HTML 주석의 활용 예제
1 2 3 4 5 | <!-- 이부분은 상품의 이름 입니다 --> <p>1번상품</p> <!-- 이부분은 상품에 대한 정보입니다 --> <p>이 상품은 테스트용 상품이며 HTML의 </p> | cs |
이런식으로 소스코드를 구분하기 쉽게 주석을 넣어줄수 있습니다
주석은 소스코드의 윗부분 혹은 밑부분에 넣어도 상관은 없습니다 보통은 소스코드의 윗부분에 넣습니다
HTML 주석의 활용 예제2
1 2 3 4 5 | <!-- 아직 이 부분은 준비되지 않았습니다 <img border="0" src="https://www.google.com/logos/doodles/2020/national-liberation-day-of-korea-2020-6753651837108501-law.gif"> --> | cs |
이렇게 여러줄을 주석으로 처리할수도 있습니다
주석이 시작되는 부분에 <!-- 을 넣은후 주석이 끝나는 줄에 --> 넣어 3줄을 주석처리한 예제입니다
'프로그래밍 > HTML, PHP, CSS' 카테고리의 다른 글
| PHP를 사용하여 방문자 정보 아이피 위치 추적 사이트 만들기 (2) | 2022.09.11 |
|---|---|
| HTML 강좌 #07 HTML에서 CSS를 불러오기 & class와 id의 차이점 (1) | 2020.09.07 |
| HTML 강좌#06 브라우저 사이즈에 맞게 글자크기가 변하는 반응형 텍스트 만들기 (8) | 2020.09.06 |
| HTML 강좌 #04 자주 사용되는 텍스트 서식 | 굵기,밑줄,강조 등 (0) | 2020.08.11 |
| HTML에서 head는 뭘까? (3) | 2020.08.09 |
| HTML 강좌 #03 HTML에서 사용하는 태그 정리 (0) | 2020.08.09 |
| HTML 강좌 #02 HTML코드 작성하기 태그편 (1) | 2020.08.07 |
