"블로그스팟 blockquote 꾸미기: 세련된 인용구 스타일 CSS 코드 공유"

블로그스팟에 인용구를 꾸며보자. 아니지, 넣어보는 건가? 네이버블로그나 티스토리에선 클릭 한 번이면 되지만, Blogger에서는 코드를 넣어줘야 한다. 2가지 인용구(따옴표 + 밑줄, 상하 이중 따옴표)를 소개한다.

인용구(blockquote) 추가하기

소개하는 인용구는 2가지, '따옴표 + 밑줄'과 '상하 이중 따옴표' 스타일이다. 예시는 아래와 같다.

The only way to do great work is to love what you do. (위대한 일을 하는 유일한 방법은 당신이 하는 일을 사랑하는 것이다.) - 스티브 잡스

어제와 똑같이 살면서 다른 미래를 기대하는 것은 정신병 초기 증세이다. - 알베르트 아인슈타인

먼저 해야할 일:

1. 블로그스팟 관리자 [테마] → [맞춤 설정] → [고급] → [CSS 추가]에 아래의 코드를 삽입한다.

CSS

/* 1. 상하 이중 따옴표 스타일 (클래스: type-double) */
.post-body blockquote.type-double {
    position: relative !important;
    margin: 45px auto !important;     /* 위아래 여백을 주어 본문과 구분 */
    padding: 10px 20px !important;
    border: none !important;          /* 기본 테두리 제거 */
    text-align: center !important;    /* 텍스트 중앙 정렬 */
    background: transparent !important;
    font-family: "Noto Sans KR", sans-serif !important;
    font-style: italic !important;    /* 기울임꼴 적용 */
    font-weight: 500 !important;
    font-size: 1.1rem !important;     /* 본문보다 살짝 큰 크기 */
    color: #34495e !important;        /* 세련된 다크 그레이 색상 */
    line-height: 1.8 !important;
    display: block !important;
}

/* 위쪽 큰 따옴표 디자인 */
.post-body blockquote.type-double::before {
    content: "\201C" !important;      /* 여는 따옴표 코드 */
    display: block !important;
    font-size: 40px !important;       /* 따옴표 크기 */
    color: #191970 !important;        /* 미드나잇 블루 포인트 컬러 */
    font-family: "Georgia", serif !important; /* 따옴표 전용 폰트 */
    height: 25px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;    /* 문장과의 간격 */
    font-style: normal !important;    /* 따옴표는 기울이지 않음 */
}

/* 아래쪽 큰 따옴표 디자인 */
.post-body blockquote.type-double::after {
    content: "\201D" !important;      /* 닫는 따옴표 코드 */
    display: block !important;
    font-size: 40px !important;
    color: #191970 !important;
    font-family: "Georgia", serif !important;
    height: 25px !important;
    line-height: 1 !important;
    margin-top: 15px !important;      /* 문장과의 간격 */
    font-style: normal !important;
}

/* 2. 왼쪽 따옴표 + 하단 밑줄 스타일 (클래스: type-line) */
.post-body blockquote.type-line {
    position: relative !important;
    margin: 50px auto !important;
    padding: 20px 0 15px 0 !important;
    border: none !important;
    border-bottom: 2px solid #191970 !important; /* 하단 진한 네이비 강조선 */
    text-align: left !important;      /* 왼쪽 정렬 */
    background: transparent !important;
    font-family: "Noto Sans KR", sans-serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 1.1rem !important;
    color: #34495e !important;
    line-height: 1.8 !important;
}

/* 왼쪽 상단 큰 따옴표 디자인 */
.post-body blockquote.type-line::before {
    content: "\201C" !important;
    display: block !important;
    font-size: 50px !important;
    color: #191970 !important;
    font-family: "Georgia", serif !important;
    height: 35px !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
    font-style: normal !important;
}

/* 인용구 내부 문단(p) 여백 초기화 (블로그스팟 기본 여백 방지) */
.post-body blockquote.type-double p, 
.post-body blockquote.type-line p {
    margin: 0 !important;
    padding: 0 !important;
}
  

2. CSS 추가가 끝났다면, 이제 글쓰기에서 HTML 모드로 들어간다.

• 이중 따옴표: <blockquote class="type-double">내용</blockquote>
• 밑줄 스타일: <blockquote class="type-line">내용</blockquote>

3. 둘 중 원하는 스타일의 클래스명을 추가 후, '내용' 부분에 글을 작성하면 끝.

HTML

<blockquote class="type-double">내용</blockquote>

<blockquote class="type-line">내용</blockquote>
  

오늘의 한마디

이제 티스토리나 네이버블로그가 부럽지 않지?

unsplash@ari he