HTML 요소 목록을 본 적이 있다면 "블록 쿼트 (blockquote)가 무엇입니까?"라고 물어볼 수도 있습니다. blockquote 요소는 긴 인용문을 정의하는 데 사용되는 HTML 태그 쌍입니다. 다음은 W3C HTML5 사양에 따른이 요소의 정의입니다.
blockquote 요소는 다른 소스에서 인용 된 섹션을 나타냅니다.
웹 페이지에서 Blockquote를 사용하는 방법
웹 페이지에 텍스트를 쓰고 페이지 레이아웃을 만들 때 텍스트 블록을 인용 부호로 부를 때도 있습니다.
사례 연구 나 프로젝트 성공 사례에 동반되는 고객의 증언처럼 다른 곳의 견적 일 수 있습니다. 이것은 기사 나 내용 자체에서 중요한 텍스트를 반복하는 디자인 처리 일 수도 있습니다. 퍼블리싱에서 이것을 때때로 풀 쿼트 (pull-quote) 라고 부릅니다. 웹 디자인에서이를 달성하는 방법 중 하나 (그리고이 기사에서 다루는 방식)를 블록 쿼트 (blockquote)라고합니다.
이제 블록 쿼 우트 태그를 사용하여 Lewis Carroll의 "The Jabberwocky"에서 발췌 한 것과 같이 긴 인용문을 정의하는 방법을 살펴 보겠습니다.
'Twas brillig와 slithey toves
너는 환심을 가지고 지혜로웠다.
모든 mimsy는 borogoves이었고,
그리고 mome raths outgrabe.
(루이스 캐롤 기자)
Blockquote 태그 사용의 예
blockquote 태그는 내용이 긴 인용 인 브라우저 또는 사용자 에이전트에게 알려주는 의미 태그입니다. 따라서 인용 부호가 아닌 텍스트를 인용 부호 태그 안에 넣으면 안됩니다. 인용 부호는 종종 누군가가 말한 실제 단어이거나 외부 소스의 텍스트입니다 (이 기사의 Lewis Carroll 텍스트처럼). 우리가 이전에 다뤘던 풀 쿼트 개념 일 수도 있습니다.
당신이 그것에 대해 생각할 때, 그 풀 쿼트는 텍스트의 인용입니다. 그것은 인용문 자체가 나타나는 동일한 기사에서 일어난 것입니다.
대부분의 웹 브라우저는 주위 텍스트에서 눈에 띄기 위해 작은 따옴표의 양쪽에 들여 쓰기 (약 5 칸)를 추가합니다. 매우 오래된 일부 브라우저는 따옴표로 묶인 텍스트를 기울임 꼴로 표시 할 수도 있습니다.
이것이 단순히 blockquote 요소의 기본 스타일이라고 기억하십시오. CSS를 사용하면 인용구 표시 방법을 완전히 제어 할 수 있습니다. 들여 쓰기를 추가하거나 제거하려면 들여 쓰기를 늘리거나 제거하거나 배경색을 추가하거나 텍스트 크기를 늘릴 수 있습니다. 그 견적을 페이지의 한면에 띄우고 다른 텍스트를 감싸며, 일반적으로 인쇄 된 잡지의 견권에 사용되는 비주얼 스타일입니다. CSS로 blockquote의 모양을 제어 할 수 있습니다. 잠시 후에 다시 살펴 보겠습니다. 지금은 견적 자체를 HTML 마크 업에 추가하는 방법을 계속 살펴 보겠습니다.
텍스트에 blockquote 태그를 추가하려면 따옴표 인 텍스트를 다음 태그 쌍으로 묶으십시오.
예 :
'Twas brillig와 slithey toves
너는 환심을 가지고 지혜로웠다.
모든 mimsy는 borogoves이었고,
그리고 mome raths outgrabe.
보시다시피 인용 부호의 내용 주위에 blockquote 태그 쌍을 추가하기 만하면됩니다. 이 예제에서는 몇 가지 중단 태그 (
)를 사용하여 텍스트 내부에 적절한 한 줄 바꿈을 추가하십시오. 이것은 우리가시에서 텍스트를 재창조하기 때문입니다.이시는 그 특별한 휴식이 중요합니다. 고객 견본 견적을 작성하고 특정 부분에서 줄을 긋을 필요가없는 경우 이러한 구분 태그를 추가하고 화면 크기에 따라 필요에 따라 브라우저 자체를 줄 바꿈 할 수 있습니다.
텍스트를 들여 쓰는 데 Blockquote를 사용하지 마십시오.
몇 년 동안 사람들은 웹 페이지에 텍스트를 들여 쓰고 싶다면 그 텍스트가 풀 쿼츠가 아니더라도 blockquote 태그를 사용했습니다. 이것은 나쁜 습관입니다! 시각적 인 이유만으로 blockquote의 의미를 사용하고 싶지는 않습니다. 들여 쓰기가 필요하다면, blockquote 태그가 아닌 스타일 시트를 사용해야합니다 (물론 들여 쓰려고하는 것은 따옴표입니다!). 단순히 들여 쓰기를 추가하려는 경우이 코드를 웹 페이지에 넣으십시오.
들여 쓰기되는 텍스트입니다.
다음으로, 당신은 CSS 스타일로 그 클래스를 목표로 삼을 것입니다.
.indented {
패딩 : 0 10px;
}
이것은 단락의 양쪽에 패딩 10 픽셀을 추가합니다.
Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 5/8/17에 편집 됨.