blockquote - 인용문 배경 예쁘게 꾸미는 html 태그와 css

블로그에 인용구문을 넣을 때 대게는 글 상자를 이용하는데, 단순히 글 상자만 봐서는 이게 인용구인지 아니면 중요한 내용이라서 상자에 넣는 건 지를 파악하기가 어렵습니다. 앞뒤 단락을 읽어봐야 인용문인지 알 수 있죠. div와 CSS로 글 상자를 만들고 서식을 이용해서 넣는 방식이라서 그런데요.

저는 약간 다른 방법을 이용해 인용구를 넣어 보겠습니다. 원래 인용문을 넣는 태그인 blockquote를 사용하는 방법입니다. blockquote 태그를 이용하기때문에 브라우저나 크롤러에게 정확한 정보를 제공해줍니다. 배경 그림을 이용하면 인용구라는 걸 글을 읽는 사람이 금방 알 수 있죠. 결국 브라우저와 크롤러, 독자 모두에게 인용구라고 확실하게 표시를 해주는 방법입니다.

blockquote를 사용하면 글을 쓰는 사람 입장에서는 인용구를 넣기가 훨씬 쉬워집니다. 글상자의 서식을 이용하는 것보다는 훨씬 편하죠. 기본적으로 인용구 상자의 배경을 css로 꾸미는 건 같습니다.

인용구를 넣을 상자 꾸미기

인용구 상자를 꾸미는 건 css로 해야 합니다. 여기서 사용하는 css에 대해서는 이전 글들을 참고해주세요.

[블로그 꾸미기] 꼭 알아야 할 필수 CSS 첫 번째 - border, margin, padding
background, background-image, backgroun-color

인용구를 넣을 상자는 위 두 글을 참고하셔서 본인의 맘에 드는 걸로 만드세요.

background:#fafafa url(./images/quotes.png) no-repeat left top;
border:1px dashed #e5e5e5;
margin:10px 0 10px 20px;
padding:10px;

저는 위 css를 이용하여 상자를 만들었습니다. 블로그에 통일성을 주려고 댓글에서 답글에 사용하는 설정을 그대로 사용했습니다. 스킨 폴더에 큰따옴표 모양의 그림을 올렸고, 그 그림을 인용구의 배경으로 사용하였습니다.

마땅한 배경 그림이 없는 분은 아래 파일을 사용하세요. 48x48 크기에 굴림으로 쓴 큰따옴표입니다. 색은 #e5e5e5입니다. 카테고리 글 더 보기 플러그인의 경계선 색이자 제가 사용하는 인용문 상자의 경계선 색입니다. 그림의 배경색은 투명해서 인용문 상자에 어떤 색을 사용해도 괜찮습니다.

인용구 배경 적용하기

배경 그림과 css를 이용하여 상자를 만들었으면 이제 이 css를 적용해야겠죠.

블로그 관리 - 스킨 - style.css에서 .atricle blockquote라는 부분을 찾습니다. 혹시 이 부분이 없다면 직접 입력합니다. 그리고 .atricle blockquote의 { 와 } 사이에 위에서 만든 상자의 css를 넣습니다. 그러면 일단 끝입니다.

블로그에 인용구 넣기

div 태그를 이용하여 인용구를 만드는 것이 아니라 기본 기능인 blockqutoe를 이용하기 때문에 추가로 해야 할 일이 없습니다. 그냥 블로그에서 글을 쓸 때, 도구 모음에 있는 큰따옴표를 클릭하면 됩니다. 큰따옴표를 클릭하면 편집 영역에 네모난 상자가 생기는데, 거기에 인용할 내용을 입력하세요.

blockquote 태그를 이용한 방법은 css를 이용해서 상자를 만들기는 하지만, 새로 클래스를 만들고 div 상자를 만들어서 서식을 적용하는 방법보다 좀 더 정확하고 빠른 방법입니다. 서식을 사용하면 "OOO 서식을 불러올까요?" 창에서 확인 버튼을 눌러야하지만 이 방법은 그런 과정이 필요없습니다.

아래는 인용문의 예로 저작자표시-동일조건변경허락이라는 CCL 라이센스를 인용한 모습니다.

이용자는 아래의 조건을 따르는 경우에 한하여 자유롭게

• 이 저작물을 복제, 배포, 전송, 전시, 공연 및 방송할 수 있습니다.
• 리믹스 — 저작물의 개작

다음과 같은 조건을 따라야 합니다:

• 저작자표시 — 저작자나 이용허락자가 정한 방법으로 저작물의 원저작자를 표시하여야 합니다(그러나 귀하나 귀하의 저작물을 추천하는 의미로 표시되어서는 안됩니다).
• 동일조건변경허락 — 이 저작물의 개작, 변형물이나 가공물은 이 라이선스와 같거나 유사한 라이선스 하에서만 배포할 수 있습니다.

관련글

[블로그 꾸미기] 꼭 알아야 할 필수 CSS 첫 번째 - border, margin, padding
background, background-image, backgroun-color