인용문 <blockquote> 태그 스타일 바꾸는 여러가지 방법

블로그/블로그 꾸미기

블로그에 글을 쓸 때, 신문기사나 다른 글을 인용하는 경우가 있습니다. 이럴 때 인용임을 표시하는 인용문 <blockquote> 태그를 사용합니다. HTML4에서는 긴 인용 문구를 정의할 때 사용하지만, HTML5에서는 다른 소스로부터 인용된 부분을 나타낼 때 사용하며, 짧은 인용문을 표시할 때는 인라인 레벨 요소인 <q> 태그를 사용합니다.

인용문 <blockquote> 태그 스타일 바꾸는 여러가지 방법
HTML5 <blockquote> 태그
  • 다른 소스에서 인용된 부분을 지정할 때 사용하며, 블록 레벨 태그로 줄바꿈과 들여쓰기가 되어 표시됩니다.
  • 다른 소스의 출처를 알 수 있으면 cite 속성을 사용하여 출처를 명기할 수 있습니다. cite 속성은 선택사항이므로 넣지 않아도 되며, 웹브라우저에서는 보이지 않습니다.
<blockquote cite="http://ko.wikipedia.org/wiki/HTML5">
HTML5는 HTML의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다.
</blockquote>
▶ 실행화면
HTML5는 HTML의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다.
HTML5 <cite> 태그

<cite> 태그는 어떤 작품의 제목을 나타냅니다. 예를 들어 책, 논문, 수필, 시, 점수, 노래, 영화, TV 쇼, 게임, 조각, 그림, 연극, 오페라, 뮤지컬, 전시회, 법적 사례 보고서, 컴퓨터 프로그램, 웹 사이트, 블로그 게시물이나 댓글, 포럼 게시물이나 댓글, 트윗, 서면 또는 구두 성명 등 창조적인 작업을 포함할 수 있습니다.

이러한 작품은 인용되었거나 자세하게 참조되었을 수 있으며, 혹은 간략히 언급한 것일 수 있습니다.

<blockquote>
<p><cite> 요소는 작품의 제목을 나타낸다. [......] 비록 사람들이 그 사람을 한 작품으로 볼지언정, 사람의 이름은 한 작품의 제목이 아니다. 그러므로 이 요소는 사람의 이름을 표시하는데 사용되어서는 안 된다.</p>
<cite>HTML Living Standard</cite>
</blockquote>
▶ 실행화면

<cite> 요소는 작품의 제목을 나타낸다. [......] 비록 사람들이 그 사람을 한 작품으로 볼지언정, 사람의 이름은 한 작품의 제목이 아니다. 그러므로 이 요소는 사람의 이름을 표시하는데 사용되어서는 안 된다.

HTML Living Standard
HTML5 <q> 태그
  • 짧은 인용문에 사용하며, 자동으로 따옴표("")가 붙어 출력됨
  • 인라인 태그로 다른 내용과 한 줄에 표시됨
<p><q>악법도 법이다</q>라는 말이 회자되지만, 소크라테스가 직접 이런 말을 했다는 증거는 없다.</p>

보기 : 악법도 법이다라는 말이 회자되지만, 소크라테스가 직접 이런 말을 했다는 증거는 없다.

티스토리에서 인용문 사용하기

티스토리 도구 모음

  1. 글쓰기 도구 모음에서 인용구(따옴표)를 선택합니다.
  2. 글 상자에 인용 글을 입력합니다.
  3. 입력한 뒤 글 쓰기를 에디터 모드로 전환하여 아래처럼 코드를 수정합니다.
<blockquote><p>HTML5는 인터넷 웹페이지를 만들 때 사용하는 언어인 하이퍼텍스트 마크업언어(HTML)의 다섯 번째 버전으로, 2008년 첫 논의를 시작해 2년 전인 2012년 12월 ‘권고안 후보’로 지정됐다가 이번에 웹 표준이라 할 수 있는 공식 권고안이 됐다.</p>
<cite>- W3C 사무국 뉴스</cite>
</blockquote>
▶ 실행화면

HTML5는 인터넷 웹페이지를 만들 때 사용하는 언어인 하이퍼텍스트 마크업언어(HTML)의 다섯 번째 버전으로, 2008년 첫 논의를 시작해 2년 전인 2012년 12월 ‘권고안 후보’로 지정됐다가 이번에 웹 표준이라 할 수 있는 공식 권고안이 됐다.

- W3C 사무국 뉴스
.blockquote {
    background-color: #fff4e5;
    border-left: 6px solid #ffc472;
    margin: 15px 0;
    padding: 15px;
}
blockquote p {
    margin-bottom: 10px;
}
blockquote cite {
    color: #a1a1a1;
    display: block;
    font-size: 14px;
}

인용문 <blockquote> 스타일 바꾸기

인용문은 <blockquote> 태그를 이용하여 다른 텍스트보다 들여쓰게 됩니다. 단순히 들여쓰는 것 이외에 CSS를 이용해서 다른 텍스트보다 눈에 띄게 강조하는 방법을 알아봅니다.

소스(blockquote.zip)를 내려받아 압축을 해제한 뒤, 이미지는 관리자 > HTML/CSS 편집 > 파일 업로드에 올려주고, 스타일에 해당하는 소스 코드는 style.css 편집에서 Ctrl 키와 F 키를 동시에 눌러 검색창을 호출한 뒤 blockquote를 검색하여 기존 코드를 내려받은 소스 코드로 바꿔줍니다.

인용문 스타일-1

워드프레스는 웹사이트를 만들고 관리하기 쉽게 도와준 저작도구이다. 전세계 웹사이트의 1/6가 워드프레스로 만들어져 있다. 특히 소스코드가 공개된 오픈소스 CMS는 누구나 무료로 웹에서 콘텐츠를 만들 수 있게 도와준다. 개발자들이 스스로 만들어 올린 플러그인이나 테마도 사용할 수 있다. 웹표준을 따르기에 운영체제나 웹브라우저에 관계없이 모두 통하는 웹사이트를 만들 수 있다.

- 네이버캐스트
.blockquote {
    background: url("./images/quote.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #333;
    margin: 15px 0;
    padding: 5px 5px 10px 60px;
}
blockquote p {
    margin-bottom: 10px;
}
blockquote cite {
    color: #a1a1a1;
    display: block;
    font-size: 14px;
}

인용문 스타일-2

워드프레스는 오픈소스 CMS 중 하나다. 누구나 무료로 내려받아 설치형 블로그로 쓰거나 기업의 홈페이지로 만들어 활용할 수 있다. 국내에선 서울 시청을 비롯해 삼성, LG, CJ, 블로터닷넷 등이 워드프레스를 활용해 홈페이지 또는 브랜드 홈페이지를 만들어 운영 중이다.

- 네이버캐스트
.blockquote {
    background: url("./images/bg-blockquote.gif") no-repeat scroll 15px 18px #fff;
    border: 1px dashed #ccc;
    clear: both;
    font-style: italic;
    margin: 15px 0;
    padding: 15px 15px 15px 50px;
}
blockquote p {
    margin-bottom: 10px;
}
blockquote cite {
    color: #a1a1a1;
    display: block;
    font-size: 14px;
}

인용문 스타일-3

디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지. 에이치티엠엘5(HTML5) 시대가 도래됨에 따라 기능 완성 형태의 새로운 마크업 언어의 등장으로 스마트한 웹페이지 구현이 가능하다.

- [네이버 지식백과] 반응형 웹

- 테두리 색과 배경색을 사이트와 어울리는 색으로 적절히 바꿔주면 더욱 멋지게 만들 수 있습니다.

.blockquote {
    background-color: #fff4e5;
    border-left: 6px solid #ffc472;
    margin: 15px 0;
    padding: 15px;
}
blockquote p {
    margin-bottom: 10px;
}
blockquote cite {
    color: #a1a1a1;
    display: block;
    font-size: 14px;
}

인용문 스타일-4

HTML5는 인터넷 웹페이지를 만들 때 사용하는 언어인 하이퍼텍스트 마크업언어(HTML)의 다섯 번째 버전으로, 2008년 첫 논의를 시작해 2년 전인 2012년 12월 ‘권고안 후보’로 지정됐다가 이번에 웹 표준이라 할 수 있는 공식 권고안이 됐다.

- W3C 사무국 뉴스
.blockquote {
    border-left: 5px solid #ddd;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
    margin: 15px 0;
    padding: 15px;
}
blockquote p {
    margin-bottom: 10px;
}
blockquote cite {
    color: #a1a1a1;
    display: block;
    font-size: 14px;
}
마무리 하면서...

인용문 <blockquote> 태그를 꾸미는 여러가지 방법을 살펴보았습니다. 인용문 <blockquote> 태그는 글을 쓸 때 많이 사용하는 태그이므로 멋지게 꾸며서 개성있는 사이트로 만들어 보세요.

+ 댓글은 큰 힘이 됩니다.