본문 바로가기
HTML & CSS

[HTML] 텍스트 태그

by 스응 2023. 2. 5.
728x90
728x90

텍스트를 묶어주는 태그

#  제목 표시

    - <h숫자> 텍스트 </h숫자>

        · 크기 : h1 > h2 > h3 > h4 > h5 > h6

 

#  단락 나누기

    - <p> 텍스트 </p>

 

#  줄 바꾸기

    - <br>

 

#  들여쓰기

    - <blockquote> 텍스트 </blockquote>

        · 다른 텍스트보다 안으로 들여 써짐

 

#  입력된 공백을 그대로 표시

    - <pre> 텍스트 </pre>

        · 해당 태그를 사용하지 않으면 코드 내 들여쓰기가 표현되지 않음

 

#  줄 바꿔 영역 묶기

    - <div> 텍스트 </div>

 

#  줄 바꿈 없이 영역 묶기 (인라인)

    - <span> 텍스트 </span>

    - 스타일 적용

        : <span style = "스타일속성 : 속성값;"> 텍스트 </span>

 

#  따옴표 추가

    - <q> 텍스트 </q>

        · 줄 바꿈 없이, 내용 앞뒤에 쌍따옴표를 추가함

 

#  수평 줄 생성

    - <hr>

        · 주제가 바뀔 때 분위기를 전환하는 용도

 

 

반응형
728x90

글자 효과 태그

#  굵게

  - <strong> 텍스트 </strong>

      · 보기에는 <b>와 똑같지만, 의미적으로 강조됨 (Sementic element)

  - <b> 텍스트 </b>

 

#  이탤릭체 (기울임)

  - <em> 텍스트 </em>

      · 보기에는 <i>와 똑같지만, 의미적으로 강조됨 (Sementic element)

  - <i> 텍스트 </i>

  - <cite> 텍스트 </cite>

      · 인용문을 삽입할 때 주로 사용함

 

#  글자 크기 작게

    - <small> 텍스트 </small>

 

#  형광펜

    - <mark> 텍스트 </mark>

 

#  취소선

    - <s> 텍스트 </s>

    - <del> 텍스트 </del>

 

#  밑줄

    - <u> 텍스트 </u>

    - <ins> 텍스트 </ins>

 

#  아래 첨자

    - <sub> 텍스트 </sub>

 

#  위 첨자

    - <sup> 텍스트 </sup>

 

 


주석 표시 태그

글자 위에 주석 표시

    - <ruby> 텍스트 <rt> 주석 </rt> </ruby>

 

약자 표시

    - <abbr title = “약자(주석)”> 텍스트 </abbr>

        · 텍스트 위에 커서를 올리면 약자(주석)이 표시됨

 

 


그 외 태그

공백 추가

    - &nbsp;

 

가운데 정렬

    - <center> 텍스트 </center>

 

소스 코드 형식으로 변경

    - <code> 코드 </code>

        · 들여쓰기까지 표현하려면 <pre> 태그 안에 넣기

320x100
반응형

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

[HTML] 링크 태그  (0) 2023.02.05
[HTML] 표 태그  (1) 2023.02.05
[HTML] 목록 태그  (0) 2023.02.05
[HTML] 개요  (0) 2023.02.01
[HTML] 비주얼 스튜디오 코드 단축키  (1) 2023.02.01

댓글