본문 바로가기
IT

04.HTML 주석(티스토리 블로그에 주석달기),feat.tags

by 티투유튜 2020. 3. 27.

HTML 주석(티스토리 블로그에 주석달기)

오늘은 HTML 웹 페이지에 주석이란 무엇이며 왜 주석을 달아야하는지 자신의 티스토리에 적용하는 방법 까지 알아보도록 하겠습니다. 추가로 다른 태그들도 알아보도록 하겠습니다.

 

주석

주석은 HTML에 적용되지 않는 술래잡기할때 단무지 같은 느낌입니다. HTML 소스코드(티스토리 블로그 소스코드)에 메모나 설명을 달아 놓는 용도로 사용합니다.. 주석은 코드와 연동되지않지만 소스코드에서 코드의 시작이나 끝, 코드설명 등 여러가지 알려주는 용도로 쓰입니다. 

<!-- 주석 : 코드의 설명이 들어간다. -->

코드들을 작성하다보면 실행하지 말아야 할 부분이 생길수도있고, 테스트 용도로 코드작성시 기존에 있던 코드를 지우지 않고 실행되지 못하도록 할때 사용할 수도 있습니다.

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

    <h2>로렌잇섭닛어밋</h2>
    <b>로렌잇섭닛어밋</b>
    <h2><i>로렌잇섭닛어밋</i></h2>

    <!-- 
    <h2>normal<sub>로렌잇섭닛어밋</sub></h2>
    <h2>normal<sup>로렌잇섭닛어밋</sup></h2>
    <h2><small>로렌잇섭닛어밋</small></h2>
    <h2><ins>로렌잇섭닛어밋</ins></h2>
    <h2><del>로렌잇섭닛어밋</del></h2>


     -->
   

  </body>
</html>

보시는바와 같이 주석안에 들어가있는 코드들은 실행이 되지 않는 모습을 보입니다. 왜 굳이 HTML 코드에 아무런 기능도 하지않는 주석을 달아야 하는지 의문이 들 수 있을겁니다.  코드줄수가 길어질수록 주석이 많이 쓰이는데, 작성한 코드가 많으면 많을수록 어떤코드가 어떤 기능을 하는지 자신이 작성했어도 모를수가 있습니다. 그럴때 알려주는 용도로 많이 사용하는 이유입니다.

 

티스토리 블로그에 적용해보기

자 그러면 주석이라는 것을 배웠으니 우리의 티스토리 블로그에 적용해 보겠습니다.이걸 왜 하느냐? 블로그 최적화 및 구글 애드센스코드를 등록하였을 겁니다. 언젠가 한번쯤 블로그 스킨을 수정해야 할 수 있는데, 광고코드나 네이버서치콘솔로 등록한 코드들 등 여러 중요한 기능들을 잘못 건드렸다가 낭패를 볼수 있는것을 사전에 미리 방지할 수 있습니다.

블로그 관리창을 열러 스킨편집에 들어갑니다. 그리고 html 편집을 클릭

주석달기

자신이 구분할 코드에 정확히 어떤 기능인지 설명을 달아줍니다. 그리고 적용버튼 을 누르면 블로그 화면에는 뜨지않는, 자신이 확인 할 수 있는 주석을 달 수 있습니다.

 

추가로 새로운 태그들을 알아보도록 하겠습니다.

 

<pre>태그

<pre> 태그는 공백과 줄 바꿈을 모두 유지합니다.

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

<br>

줄바꿈 태그입니다.

 My Bonnie lies over the ocean.<br>
    
 My Bonnie lies over the sea.
    
 My Bonnie lies over the ocean.<br>
    
 Oh, bring back my Bonnie to me.

<hr>

화면에 수평선을 그립니다. 시각적인 용도로 주로 사용합니다.

특수문자

HTML 을 작성할때 띄어쓰기가 제대로 동작하지않고 HTML 사이에 태그가아닌 > , < 등 사용하고 싶을 때가 있습니다. 이럴때 어떻게 해야 하는지 알아보겠습니다.

문자 문자표현 숫자표현 설명
space &nbsp; &#160; 스페이스
& &amp; &#38; 엠퍼샌드
< &lt; &#60; 보다 작은
= - &#61; 등호
> &gt; &#62; 보다 큰
© &copy; &#169; 저작권 표시(Copyright)

여기까지 티스토리 애드센스 등 주요코드에 주석달기와, HTML에 특수문자 넣기를 알아보았습니다. 숙지하고 있으면 언젠간 큰 도움이 될것이고, 특히 주석과 특수문자에서 스페이스바 표현인 &nbsp 를 기억해주시면 블로그를 운영하거나 HTML 코드를 작성할 때 아주 편리하게 사용 할 수 있을것입니다. 

댓글