HTML blockquote 태그

1 개요[ | ]

HTML blockquote

기본 스타일

css

Copy

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

2 예시 1: 기본[ | ]

html

Copy

<blockquote>
  모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다.
</blockquote>
<blockquote>
  <p>모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다.</p>
</blockquote>

3 예시 2: 네모[ | ]

html

Copy

<style>
.myblockquote {
  display: block;
  margin: .5em 2em;
  padding: .5em 1em;
  border: 1px solid #aaaaaa;
  background: #f9f9f9;
}
.myblockquote p {
  margin: .5em 0;
}
.myblockquote cite {
  display: block;
  margin: .5em 0;
  text-align: right;
  font-style: normal;
}
</style>
<h1>적법 절차의 원리</h1>
<p>헌법에 명시되지 않은 기본권을 도출하는 경우 원리, 원칙, 제도 등에서 기본권이 바로 도출되는 경우 이외에는 헌법 제10조 또는 제37조 제1항에 의해서 도출된다.</p>
<blockquote class="myblockquote">
  <p>모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다.</p>
  <cite>- 헌법 제10조</cite>
</blockquote>

4 예시 3: 양쪽 따옴표[ | ]

html

Copy

<style>
.myblockquote:before, .myblockquote:after {
  position: absolute;
  font-size: 4em;
  font-family: Georgia, cursive;
  font-weight: bold;
  color: #8ae8;
}
.myblockquote:before {
  content: '“';
  top: -.1em;
  left: -.8em;
}
.myblockquote:after {
  content: '”';
  bottom: -.6em;
  right: -.8em;
}
.myblockquote {
  position: relative;
  margin: 1em 4em;
}
.myblockquote p {
  margin: .5em 0;
}
.myblockquote cite {
  display: block;
  margin: .5em 0;
  text-align: right;
  font-style: normal;
}
</style>
<h1>적법 절차의 원리</h1>
<p>헌법에 명시되지 않은 기본권을 도출하는 경우 원리, 원칙, 제도 등에서 기본권이 바로 도출되는 경우 이외에는 헌법 제10조 또는 제37조 제1항에 의해서 도출된다.</p>
<blockquote class="myblockquote">
  <p>모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다.</p>
  <cite>- 헌법 제10조</cite>
</blockquote>

5 예시 4: 왼쪽 따옴표[ | ]

html

Copy

<style>
.myblockquote:before {
	position: absolute;
  font-size: 4em;
  font-family: Georgia, cursive;
  font-weight: bold;
  color: #7ba8;
  content: '“';
  top: .1em;
  left: .3em;
}
.myblockquote {
  position: relative;
  padding: 1em 3em 1em 4em;
  background: #9991;
  border-left: .5em solid #7ba8;
}
.myblockquote p {
  margin: .5em 0;
}
.myblockquote cite {
  display: block;
  margin: .5em 0;
  text-align: right;
  font-style: normal;
}
</style>
<h1>적법 절차의 원리</h1>
<p>헌법에 명시되지 않은 기본권을 도출하는 경우 원리, 원칙, 제도 등에서 기본권이 바로 도출되는 경우 이외에는 헌법 제10조 또는 제37조 제1항에 의해서 도출된다.</p>
<blockquote class="myblockquote">
  <p>모든 국민은 인간으로서의 존엄과 가치를 가지며, 행복을 추구할 권리를 가진다. 국가는 개인이 가지는 불가침의 기본적 인권을 확인하고 이를 보장할 의무를 진다.</p>
  <cite>- 헌법 제10조</cite>
</blockquote>

6 같이 보기[ | ]

7 참고[ | ]