[formatting] HTML - <blockquote> 태그 ★ - 긴 인용구 (= blockquote태그 = blockquote요소 = 인용태그 = 블락쿼트태그 = 블럭쿼트태그 = 블록쿼트태그)

1. <blockquote> 예제 - 긴 인용구
2. <blockquote> 정의
3. <blockquote> 구문
4. <blockquote> 속성
5. <blockquote> 기본 CSS

<blockquote> 예제 - 긴 인용구

[HTML 경우]

 

<p>사이트 소개<p>

<blockquote cite="http://www.homzzang.com">

    홈짱닷컴 (homzzang.com) - 홈페이지 제작강의

</blockquote>

<p>사람들이 말하길, <q>아주 그냥 죽여줘요.~~</q>라고 평가.</p>

 

결과보기

---

[XHTML 경우]

※주의: <blockquote>태그 안 텍스트를 다른 블럭요소 태그로 감싸야 함.

 

<p>사이트 소개<p>

<blockquote cite="http://www.homzzang.com">

    <p>홈짱닷컴 (homzzang.com) - 홈페이지 제작강의</p>

</blockquote>

<p>사람들이 말하길, <q>아주 그냥 죽여줘요.~~</q>라고 평가.</p>

 

결과보기 

<blockquote> 정의

 

긴 인용구 표시.

 

---

 

1. 
인용구 앞뒤로 여백이 생기는 블럭 요소 임. 
(즉, 한 줄을 다 차지하며, 같은 태그 나열 시 줄 바꿈해 정렬)

 

2. 
짧은 인용구를 사용할 때는 인라인 요소인 <q> 태그 이용. 
(ex) 소크라테스 가라사대, <q>너 자신을 알라</q>

<q>태그는 화면에 큰 따옴표(" ")로 출력.

 

3. 
XHTML :  <blockquote> 안 텍스트를 다른 블럭요소(예:<p> <div> 등)으로 감싸줘야 함.

 

4. 
HTML4.01 : 단순히 긴 인용구 의미. 
HTML5 : 다른 소스로부터 인용된 단락 의미.

 

5.

주요 최신 브라우저 모두 지원.

 

6.

스마트에디터 경우, <blockquote> 태그의 스타일 지정 불가.

(∴ 인라인방식으로 스타일 지정 시, 확인 버튼 누르면 사라짐.)

※ smarteditor 매뉴얼 맨 마지막 참고.

 

<blockquote> 구문

 

<blockquote>인용 내용</blockquote>

<blockquote> 속성

<blockquote> 기본 CSS

 

blockquote {

  display: block;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 40px;

  margin-right: 40px;

}

 

<blockquote> 태그는 블럭요소 (= 한 줄 전체 차지).