내용에 꺽쇠 기호(<>) 텍스트 넣는 방법

화면에 태그와 같은 형태의 꺽쇠 기호(<>) 넣는 방법에 대해서 알아보자. 다른 말로는 '홑화살괄호'라고도 부른다.

html에서 내용을 작성할 때 html 태그와 같은 형태의 <html>, <title>, <body> 등을 텍스트로 넣고 싶을 때가 있을 것이다. 예를 들어 아래와 같은 코드를 작성하였다고 가정해보자.

<h1>html 태그의 종류</h1>
<p>태그는 내가 표시하고 싶은 대상의 양쪽에 꺽쇠(<,>)를 사용해서 태그 이름을 적어주면 된다.</p>
<p>
  대표적인 태그들은 아래와 같다.<br>
  - <h> 태그는 heading의 약자로 제목이다.<br>
  - <p> 태그는 paragraph의 약자로 하나의 문단을 만들 때 쓴다.<br>
  - <b> 태그는 bold의 약자로 글씨를 굵게 표현한다.
</p>

위 코드를 화면으로 그리면 웹 브라우저에서 <h>, <p>, <b> 태그를 설명하는 부분이 제대로 보이지 않는다.

이유는 이 텍스트들을 html 태그라고 해석했기 때문이다. 꺽쇠를 태그가 아닌 텍스트로 입력하고 싶을 때에는 < 대신에 <를 사용하고 > 대신에 >를 사용해야 한다. lt는 less than의 약자, gt는 greater than의 약자이다.

<h1>html 태그의 종류</h1>
<p>태그는 내가 표시하고 싶은 대상의 양쪽에 꺽쇠(<,>)를 사용해서 태그 이름을 적어주면 된다.</p>
<p>
  대표적인 태그들은 아래와 같다.<br>
  - &lt;h&gt; 태그는 heading의 약자로 제목이다.<br>
  - &lt;p&gt; 태그는 paragraph의 약자로 하나의 문단을 만들 때 쓴다.<br>
  - &lt;b&gt; 태그는 bold의 약자로 글씨를 굵게 표현한다.
</p>

위와 같이 입력하면, html 태그를 설명하는 부분이 정상적으로 보이는 것을 확인할 수 있다.

매우 기초적인 html 작성팁이므로 기억해두는 것이 좋을 듯 하다.

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

'퍼블리싱 & 프론트엔드 > html & CSS' 카테고리의 다른 글

코드잇 학습일기 Day10. 링크 상대 주소, url 프래그먼트, 새 탭 열기, URI 스킴 (0)	2023.04.04
코드잇 학습일기 Day9. HTML 개념과 구조, 코멘트(주석) 작성 방법 (0)	2023.03.27
부모 속성을 상속하는 CSS 태그 모음 (0)	2021.08.17
CSS 우선 적용 순서 (0)	2021.08.17
CSS 선택자 모음 (0)	2021.08.16