[HTML 기초] 텍스트 서식 꾸미기

 

✨ 텍스트를 꾸며주는 태그들

<h1-6> : heading 제목 표시.
<p> : paragraph 단락 만들기.
<span> : 영역묶기.

<br> : breake line 줄 바꾸기.
<hr> : horizontal line 수평 줄 넣기.

 

<blockquote> : 인용문 넣기 (블럭 요소) > 들여쓰기 됨.
<q> : 인용문 넣기 (인라인 요소) > 쌍따옴표 표시.

 

<em>, <i> : 이탤릭체 표시.
<pre> : 입력문자 그대로 화면에 표시. 수학기호나 공식을 작성할 때 브라우저가 기호를 태그로 인식해서 잘못 출력될 경우 사용.

<strong>, <b> : 문자 강조표시.
<del>, <s> : 취소선.

 

---

🤔 <strong>과 <b>, <del>과 <s>는 같은 효과를 내는데 무엇이 다를까?

텍스트 리더기를 통해 들을 때 <strong> 은 태그 안의 문자를 강조해서 읽어주지만 <b>는 강조해서 읽어주지 않는다. 마찬가지로, <del> 은 태그 안의 문자를 읽지 않지만 (취소선이기 때문에) <s> 태그는 다른 문자들과 똑같이 읽어준다.
시각장애인이나 텍스트 리더기를 통해 들을 경우를 고려한다면 <strong> 태그나 <del> 태그를 이용하는 것이 좋다.

---

<mark>: 형광펜 효과 내기.
<crite> : 참고 내용 표시.
<big> : 브라우저의 기본 폰트(16px)를 기준으로 폰트를 조금 크게 표시.
<small> : 브라우저의 기본 폰트(16px)를 기준으로 폰트를 조금 작게 표시.
<sub> : 아래첨자
<sup> : 윗첨자
<u> : 밑 줄