[HTML] 텍스트를 덩어리로 묶어 주는 태그

<hn>태그 - 제목 표시하기

---

제목 텍스트는 일반 텍스트보다 굵고 진하게 표시된다.

<h1> ~ <h6> 까지 표현할 수 있으며 가장 큰 제목이 <h1>이고 <h6>이 가장 작은 크기의 제목이다.

<h1> h1 </h1>
<h2> h2 </h2>
<h3> h3 </h3>
<h4> h4 </h4>
<h5> h5 </h5>
<h6> h6 </h6>

결과값 :

 

<p> 태그 - 단락 만들기

---

<p> 태그는 paragraph의 줄임말로, 텍스트 단락을 만든다.

여기서 단락이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다.

<br> 태그를 두개 삽입해서 텍스트 단락인 것처럼 보이게 할 순 있으나 실제로 웹 브라우저가 이것을 텍스트 단락으로 인식하기 어렵다.

화면상으로 차이는 없으나 웹 브라우저가 인식하는 것은 다를 것이다.

 

<br> 태그 - 줄 바꾸기

---

줄바꿈을 하기 위해 사용한다.

break의 줄임말이며 닫는 태그가 없다.

 

<hr> 태그 - 분위기 전환을 위한 수평줄 넣기.

---

horizontal의 줄임말로 수평 줄을 삽입할 때 사용한다.

보통 여러 개의 텍스트 단락을 나열하는 도중 텍스트 단락의 주제가 바뀔 때 분위기 전환용으로 사용한다.

닫는 태그가 없다.

css를 이용해 가로선을 없앨 수 있다.

 

<blockquote> 태그 - 줄 바꾸기

---

다른 블로그나 사이트의 글을 인용할 경우 <blockquote>태그를 이용해 표시해줄 수 있다.

인용한 문장은 자동으로 들여쓰기가 되므로 다른 텍스트와 구별이 된다.

한 줄짜리 짧은 인용문은 p태그를 사용할 수 있다.

 

<blockquote>
<p>인용문인용문</p>
</blockquote>

 

cite 속성 - blockquote 태그의 출처 URL 설정

인용문의 출처를 표시한다. 화면에서 특별히 표시되는 부분은 없지만

검색 엔진이 이 주소 정보를 사용할 수 있다.

<blockquote cite="URL">
인용문
</blockquote>

 

cite 태그 - 작품의 제목

cite 속성과 달리 책, 영화, 그림 같은 작품의 제목을 지정할 때 사용한다.

 

<figure>
    <blockquote cite="https://movie.naver.com/movie/bi/mi/basic.naver?code=190320">
        <p>
            부산 건설현장 직원들을 상대로 걸려온 전화 한 통. 보이스피싱 전화로 인해 딸의 병원비부터 아파트 중도금까지, 당일 현장에서는 수많은 사람들이 목숨 같은 돈을 잃게 된다. 현장작업반장인 전직형사 서준(변요한)은 가족과 동료들의 돈 30억을 되찾기 위해 보이스피싱 조직을 추적하기 시작한다. 마침내 중국에 위치한 본거지 콜센터 잠입에 성공한 서준, 개인정보확보, 기획실 대본입고, 인출책 섭외, 환전소 작업, 대규모 콜센터까지! 체계적으로 조직화된 보이스피싱의 스케일에 놀라고, 그곳에서 피해자들의 희망과 공포를 파고드는 목소리의 주인공이자 기획실 총책 곽프로(김무열)를 드디어 마주한다. 그리고 그가 300억 규모의 새로운 총력전을 기획하는 것을 알게 되는데.. 상상이상으로 치밀하게 조직화된 보이스피싱의 실체! 끝까지 쫓아 반드시 되찾는다!
        </p>
    </blockquote>
    <figcaption>
        <cite>영화 보이스</cite>
    </figcaption>
</figure>

결과값 :

<pre> 태그 - 입력하는 그대로 화면에 표시하기

---

html에서는 아무리 많은 공백을 넣더라고 브라우저 창에는 한 개의 공백만 표시된다.

하지만 <pre> 태그를 사용할 경우, 소스에 표시한 공백이 그대로 표시된다.

 

※ <pre> 태그와 웹 접근성
<pre> 태그를 사용할 때는 웹 접근성에 대해 한 번 더 고려해야한다. 스크린 리더기는 <pre>태그가 적용된 부분을 만나면 건너뛰어 버리기 때문이다. 따라서 그 부분의 내용을 알 수 있도록 대체 텍스트를 추가하는 것이 좋다.

 

 

 

참고

- Do it! HTML5+CSS3 웹 표준의 정석