TIL)03 HTML 글자 태그

이명진·2021년 2월 18일
0
post-thumbnail

들어가기 앞서..

오늘도 어김없이 찾아온 HTML기초!!
https://poiemaweb.com/html5-tag-text
poiemaweb에서 공부한 내용을 정리한 글입니다.

오늘 배울 내용은?

h태그 , 이텔릭체, 볼드체, 인용구, 따옴표 태그 , 작은 태그 , 하이라이팅 태그 , 밑줄 태그

제목 태그

제목 태그는 h 태그로서 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있다.
숫자가 커질수록 크기가 작아지며 숫자1이 가장 크다.

h1

h2

h3

h4

h5
h6

글자 태그 P

P태그는 제목아래의 내용에서 한 단락으로 많이 사용된다.

b태그

bold체를 지정한다. 굵게 글자가 나온다
시작 태그와 끝 태그가 있다 b , /b

strong

b태그와 같은 결과값을 가진다. 하지만 차이점이 있다면
b태그는 의미론적으로 중요한 의미가 없지만 strong태그는 의미론적으로 중요하댄다. 아마 컴퓨터 입장에서 strong을 사용하면 중요하게 생각하는가 보다.

  • b태그와 strong태그
<!DOCTYPE html>
<html>
  <body>
    <b>This text is normal.</b>
    <strong>This text is strong.</strong>
  </body>
</html>

글자 태그 I

Italic체를 지정한다. 약간 기울어지며 필기체스러운 글자를 나타낸다.

This text is italic.
이탈릭스럽다 i

 <i>This text is italic.</i>

글자태그 em

emphasized(강조, 중요한) text를 지정한다.
중요하다 em
i 태그와 비슷하지만 b 와 strong 처럼 중요성은 em쪽에 있다.

글자태그 small

<small> 작다 </small>

small 태그를 활용하여 작게 보이도록 만든다.

일반

작다

글자태그 mark

하이라이팅 효과를 준다.

<mark> 하이라이팅 효과를 준다.</mark>

글자태그 del

중간선 느낌이 난다. 틀린것이 있을 때 사용 이곳 벨로그 에서는 닫는 태그를 안줘도 되는것 같다. 하지만 html에서는 어림없지

<del>이곳 벨로그 에서는 닫는 태그를 안줘도 되는것 같다.</del>

글자태그 ins

inserted (added) text를 지정한다. 밑줄이 생기는데 하이퍼링크로 주소를 연결한것 같다. 하지만 클릭은 안된다. 벨로그때 자주 사용할만 하다.

<ins> 밑줄 쫙</ins>

글자태그 sub / sup

이의 이승 e의e승 처럼 글자에 사용한다. 어느 상황에 쓰일지는 잘모르겠다.
이이 Ee

<sub></sub> E<sup>e</sup>

글자태그 br

html의 p태그는 줄바꿈 (엔터)가 반영이 안된다
그때 사용하는 br 태그이다.
종료 태그 없이 사용한다.

글자태그 pre

pre 태그 내의 content는 작성된 그대로 브라우저에 표시된다.
p태그는 br없이 단락을 나눠도 반영이 안되지만 pre태그는 반영된다.

글자태그 hr

수평줄을 나눈다


<hr>

글자태그 q

짧은 인용문(quotation)을 지정한다. 큰따옴표가 생긴다.

<q>따옴표</q>

글자태그 blockquote

블록 인용구 이다.
오늘은 글자 태그에 대해서 알아보았다. 벨로그에서도 사용이 되기에 벨로그를 사용하면서 많이 써보며 익혀나가야 겠다.
profile
프론트엔드 개발자 초보에서 고수까지!

0개의 댓글