공부 중 메모/HTML 기본

<3> 블록 속성을 가진 텍스트 관련 태그

라이피 (Lypi) 2021. 3. 16. 23:03
반응형

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.

 

더보기

썸네일용

반응형