<blockquote>태그와 text-indent

Joah·2022년 5월 24일

HTML

목록 보기

3/5

`<blockquote>`

인용문을 나타내는 `<blockquote>`태그는 자동으로 브라우저가 들여쓰기를 지정한다.

<body>
  <p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
  <blockquote>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</blockquote>
</body>

아래의 <blockquote> 의 문장은 <p>태그의 문장과 다르게 아무런 CSS 속성을 부여하지 않았음에도 자동으로 들여쓰기를 가지고 있다.
<blockquote>는 인용문을 작성할 때 사용하는 태그이기 때문에 통상적으로 인용문이라는 것을 명시하기 위해서 브라우저에서 자동으로 들여쓰기를 지원한다.

`text-indent` 속성으로 들여쓰기

`<blockquote>` 태그가 아닌 다른 태그에 들여쓰기를 하고 싶다면 `text-indent`속성을 사용한다.

<body>
  <p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</p>
  <blockquote>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세</blockquote>
  <style>
    p {
 	 text-indent: 50px
	}
  </style>
</body>