Appia의 IT세상

[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기 본문

Programming/HTML&CSS

[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기

Appia 2020. 7. 17. 07:11
반응형

[초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기

프로그래밍 작업을 할 때 가장 중요한 것은 좋은 결과를 내는 것입니다. 좋은 결과는 즉 프로그램을 작성하는 사람이 원하는 결과를 얻는 것을 의미합니다. 예전에는 작업을 할 때 혼자 하는 경우가 많았습니다. 또한 혼자 작업을 하고 나서, 그 부분에 대해서 유지 보수 또한 혼자 진행해야 하는 경우가 많았습니다. 하지만, 시간이 지남에 따라, 혼자 보다는 여러명이서 같이 작업을 하는 경우도 많고, 작업을 하고 나서 다른 사람이 관련된 코드를 유지보수 해야하는 경우도 생깁니다. 이 때, 코드에 관련된 설명을 넣기 위해서는 저희는 주석을 넣습니다. 그래서 이번 포스팅에서는 HTML에 주석(Comment)을 입력하는 방법에 대해서 이야기를 해보고자 합니다. 

 

HTML에서 주석(Comment)을 입력할 때는 <!-- 내용 -->다음과 같은 형태로 나타냅니다. 위와 같이 내용에 들어가는 부분들은 모두 주석 처리가 됩니다. 그럼 간단하게 코드에서 살펴보겠습니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--Appia Commnet -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    TEST 
    <!--Appia Commnet -->
    
</body>
</html>
cs

그럼 결과를 한번 보면 다음과 그림과 같은 결과가 나타납니다. 

위에서 입력한 주석 부분들은 반영이 안된 것을 알 수 있습니다. 즉 이와 같이 외부적으로는 반영이 되지 않지만, 코드내에서 사용자가 인지하기 위해서 사용이 됩니다. 그럼 다른 형태의 주석(Comment)들도 살펴보겠습니다. 

 

근데 한가지 주의 해야 할 점이 있습니다. <!--Text --> 이 부분에서 Text 부분을 제외하고는 공백이 있어서는 안됩니다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--Appia Commnet -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    TEST 
    <!--Appia Commnet -->
    < !--Appia Commnet -->
    
</body>
</html>
cs

위에서 보이는 바와 같이 주석 관련된 시작 지점 또는 종료 지점에 <!-- / --> 에 공백이 포함된다면 주석(Comment)으로 역할을 하지 않습니다. 간단히 보면 다음과 같은 형태로 표시가 됩니다. 

만약 다수의 라인을 주석으로 처리하신다면 다음과 같은 형태로 입력하시면 됩니다. 

<body>
    TEST 
    <!--
        Heelo 여러줄 주석 처리 
        정상 처리 됨. 
        Appia Commnet 
    -->
</body>
cs

위의 코드를 실행하면 TEST라는 부분만 실행이 될 것입니다. 

 

스크립트 및 Style 관련된 주석(Comment) 

위에서 언급한 주석은 단순히 <body>/<head>에만 사용이 되는 것은 아닙니다. Script/style 관련된 부분에도 사용이 됩니다. 이 때는 다음과 같이 주석을 입력해 주셔야 합니다. 

 

      <style>
         <!--
             Appia Style commnet
            example {
               
            }
         //-->
      </style>
      <script>
         <!-- 
            Appia Script commnet
         //-->
      </script>
cs

 

위에서 보시는 바와 같이 <!-- 내용 //--> 이런 형태로 사용이 되야 합니다. 

 

이번 포스팅에서는 [초보HTML배우기 05]HTML - HTML에 주석(Comment) 입력하기라는 주제로 html에 주석을 입력하는 방법에 대해서 포스팅을 해봤습니다. 혹시 궁금하신 점이나 문의 사항이 있으시면 언제든지 댓글 및 방명록에 글 남겨 주시길 바랍니다. 감사합니다. 

반응형
저작자표시 비영리 변경금지

'Programming > HTML&CSS' 카테고리의 다른 글

[초보HTML배우기 07]HTML - HTML에 표(Table) 입력하기  (0) 2020.07.21
[초보HTML배우기 06]HTML - HTML에 사진/이미지(Images) 삽입하기  (0) 2020.07.19
[초보HTML배우기 04]HTML - HTML에 메타 태그(meta tag)/메타 데이터(metadata) 입력하는 방법  (0) 2020.07.15
[초보HTML배우기 03]HTML - 글자 속성 스타일 적용  (0) 2020.07.13
[초보HTML배우기 02]HTML - 기본 태그(Tag) 구성 원칙 및 속성  (0) 2020.07.11
'Programming/HTML&CSS' Related Articles more
Comments