HTML 텍스트 관련 태그
블록 속성을 가진 태그
태그의 디자인은 CSS로 바꿀 수 있으므로 태그의 '의미론적' 역할에 더 주목해야한다.
<h1> ~ <h6> (MDN)
:: 제목을 나타낼 때 사용하는 태그
:: 숫자가 작을수록 글씨 크기가 커진다.
<p> (MDN)
:: 문단을 나타낼 때 사용하는 태그.
:: p태그 내부 텍스트에 줄바꿈이 사용될 경우 띄어쓰기 하나로 표현된다.
:: 텍스트의 길이가 텍스트가 담긴 박스 너비보다 길면 그 때 자동으로 줄바꿈이 된다.
<blockquote> (MDN)
:: 주로 긴 인용문을 나타낼 때 사용하는 태그.
:: 사용시 내부 내용에 들여쓰기가 적용된다.
:: cite 태그를 이용해 인용문의 출처를 표시할 수 있다.
-- 들여쓰기를 사용하고 싶지 않은 짧은 인용문은 <q>태그를 이용하면 된다.
<pre> (MDN)
:: 미리 서식을 지정한 텍스트를 나타내는 태그.
:: 텍스트를 있는 그대로 표시하고 싶을 때 사용한다.
:: <p> 태그 등에서는 스페이스바를 여러개 써도 하나만 나타나지만 <pre> 태그는 그대로 표현된다.
:: <pre> 태그를 사용한 부분은 웹 접근성 도구가 건너뛰어버리는 경우가 많다.
:: 이를 대비해 웹 접근성을 위해 <pre>태그의 내용에 대한 대체 텍스트를 추가할 필요가 있다.
:: 프로그래밍 코드를 있는 그대로 보여주기 위해 <code>, <samp>, <kbd> 태그를 사용할 때도 함께 사용된다.
<hr> (MDN)
:: 분위기가 전환되는 단락과 단락을 나누는 수평줄을 그릴 때 사용하는 태그
:: 닫는 태그가 없다. </hr> 형태로는 사용되지 않는다.
:: 주로 단락들을 나열하다가 단락의 주제가 바뀌었을 때 사용된다.
:: 그냥 줄을 긋고 싶은거라면 이 태그보다는 css를 사용하는 편이 의미론적으로 좋다.
<br> (MDN)
:: 줄바꿈(캐리지 리턴)을 나타내는 태그.
:: 닫는 태그가 없다. <br> 혹은 </br>의 형태로 쓰인다.
:: 여백을 주고 싶다면 css의 마진을 사용하는 것이 박스 모델에 더 알맞다.
블록 속성을 가진 텍스트 관련 태그에 대한 예제 코드
See the Pen block tag by lypi (@Lypi) on CodePen.
썸네일용