[개인프로젝트] Garden of Books 책들의정원 10(인용구-인용구삽입, 인용구 꾸미기)

안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)

 

 

인용구란 하나의 문장을 멋지게 표현하고자 할 때 사용합니다.
혹은 강조할 때 사용하기도 하죠. 이 인용구는 스타일시트를 이용해서 스타일을 변경하여 꾸밀 수도 있답니다.
오늘은 그 인용구를 사용하는 방법에 대해 알아보겠습니다.

 

인용구 삽입하기

지난 테이블 태그 바로 아래에 div panel-footer을 작성하여 인용구를 넣어줍니다.

<화면 출력 모습>

아래 쪽에 제가 작성한 마거릿 미드의 명언이 화면에 출력되었어요.

 

인용구 꾸미기

<style type="text/css">
    blockquote{
        background: #f9f9f9;
        border-left: 10px solid #cccccc;			/* 회색 */
        margin: 1.5em 10px;
        padding: 0.5em 10px;
        quotes: "\201C""\201D""\2018""\2019";
        font-weight: bold;
    }

    /* 인용구가 처음 들어갈때, 왼쪽 부분 */
    blockquote:before{
        color: #cccccc;
        content: open-quote;
        font-size: 3em;
        line-height: 0.1em;
        margin-left: 0.8em;
        vertical-align: -0.4em;
    }

    /* 인용구 닫는 부분 */
    blockquote:after{
        color: #cccccc;
        content: close-quote;
        font-size: 3em;
        line-height: 0.1em;
        margin-left: 0.25em;
        vertical-align: -0.4em;
    }
</style>

이렇게 내부 스타일 시트를 넣어줍니다.
주석 부분을 참고하여 인용구가 들어가는 부분과 닫히는 부분을 확인할 수 있습니다.

margin과 padding 등으로 자유롭게 마음대로 스타일을 조금 변경할 수 있습니다.

 

인용구와 글자 사이 간격두기

<화면 출력 모습>

(인용구와 글자 사이 간격두기 전)

인용구와 글자 사이가 너무 딱 붙어서 미관상 좋아 보이지 않네요.
한 번 바꿔볼까요?
'&nbsp;'를 추가하면 공백이 생깁니다.

<화면 출력 모습>

인용구와 글자 사이 간격가 생긴 것을 확인할 수 있습니다.