Language - [Front]/HTML & CSS

[HTML, CSS] - HTML 텍스트 태그

구구르밍 2023. 10. 17. 14:19

 



 

제목

<h#></h#> 

  • 웹 페이지에 표시하려는 제목
  • < h1>은 하나의 페이지에서 한번만, 제일 큰 주제
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  • 섹션, 문단의 제목을 나타내며 숫자가 작을수록 글자의 크기가 커짐
  • 봇(컴퓨터, 검색엔진)이 문서를 파악하기 위해 쓰임
  • 위아래 약간의 여백(margin)이 자동 삽입

 


단락

<p></p>

  • 문단 정의, 단락
  • 위아래 약간의 여백(margin)이 자동 삽입
  • <p>태그 내에서 작성된 여러 번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 표현

 

<br> 

  • 줄바꿈
  • 새로운 단락을 만들지 않고도 줄을 나눌 수 있음

 

<pre>

  • HTML 코드에서 작성한 텍스트 서식을 그대로 표현
  • 줄바꿈 뿐만 아니라 띄어쓰기, 탭 등 원래 무시되던 문자들이 출력
  • <pre> 태그 내에 작성된 텍스트의 글꼴(font)은 고정폭 글꼴(fixed-width font)로 자동 변환
  • 미리 정의된 형식의 텍스트를 정의할 때
  • 독특한 서식 표현 가능

 

<hr>

수평 가로 구분선

 


서식

<b></b>

  • 화면의 텍스트 굵게 표현

 

<strong></strong>

  • 화면의 텍스트 굵게 표현 및 내용 중요성 강조

 

<i></i> 

  • 이텔릭체

 

<em></em> 

  • 이텔릭체 및 내용 중요성 강조

 

<mark>

  • 텍스트 하이라이팅

 

<del>

  • 텍스트 중앙에 가로줄, 취소선

 

<ins>

  • 텍스트 아래에 밑줄

 

<sup>

  • 위첨자

 

<sub>

  • 아래첨자

인용

<q></q>

  • 짧은 인용구
  • 출력시 자동으로 큰 따옴표 붙음

 

<blockquote></blockquote>

  • 블록 인용구
  • 출력시 인용 부분을 별도의 단락으로 구분

 

<abbr></abbr>

  • 용어의 축약형
  • 태그 위 마우스 위치시 타이틀 속성에 명시한 용어의 원형 나타남

 

<address></address>

  • HTML에서 주소 표현
  • 출력시 이텔릭체 및 위아래 약간의 공백

주석

<!-- 내용 -->