[CSS] 심심한 본문을 꾸며주는 세련된 콜아웃 박스 2종 커스텀

밋밋한 블로그 포스팅에 생동감을 불어넣는 콜아웃 박스 2종을 소개한다. 상단 라벨이 돋보이는 '스티커형(type-sticker)'과 제미나이 감성을 담은 깔끔한 '그레이 박스(type-box)'로 가독성을 높여보자. HTML/CSS 코드 포함!

**예시 화면: 코드를 적용하면 이런 모습.

1번. type-sticker 스타일 (알약 라벨 + 화이트 배경)

내용을 적으세요.

2번. type-box 스타일 (라벨 없음 + 제미나이풍 그레이 배경)

CHECK! 내용을 적으세요.

콜아웃(Callout) 박스 적용 방법

1번. type-sticker 스타일 (알약 라벨 + 화이트 배경)

1) 블로그스팟 관리자 [테마] > [맞춤설정] > [고급] > [CSS 추가]에 아래 코드를 복사해서 붙여 넣고 저장을 누른다.

CSS


/* [Style] 1. 라벨형 포인트 카드 (상단 알약 라벨 + 화이트 배경) */
.post-body blockquote.type-sticker {
    position: relative !important;
    margin: 45px auto 30px !important;
    padding: 35px 25px 25px !important; /* 라벨 공간 확보를 위해 상단 패딩 증가 */
    
    /* 제미나이 박스와 동일한 라운드 및 테두리 설정 */
    background-color: #ffffff !important;
    border: 1px solid #e3e3e3 !important; 
    border-radius: 12px !important; /* 12px로 통일 */
    
    text-align: left !important;
    font-family: 'Noto Sans KR', sans-serif !important;
    font-style: normal !important;
    font-size: 0.95rem !important;
    color: #333333 !important;
    line-height: 1.8 !important;
    box-shadow: none !important;
}

/* 상단 알약 모양 라벨 (H2 포인트 컬러 #102a43 적용) */
.post-body blockquote.type-sticker::before {
    content: attr(data-title) !important; /* HTML의 data-title 속성값을 가져옴 */
    position: absolute !important;
    top: -14px !important;
    left: 20px !important;
    background: #102a43 !important; /* H2 포인트 네이비와 통일 */
    color: #ffffff !important;
    padding: 4px 18px !important;
    border-radius: 50px !important; /* 라벨은 알약 모양 유지 */
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* 라벨만 살짝 입체감 */
    letter-spacing: -0.5px !important; /* 글자를 살짝 모아주면 더 전문적으로 보임 */
}

/* 내부 제목 강조 스타일 - 첫 줄 제목을 크고 굵게 */
.post-body blockquote.type-sticker strong:first-child,
.post-body blockquote.type-sticker b:first-child {
    color: #102a43 !important;
    display: block !important;
    margin-bottom: 12px !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
}

/* 본문 내 강조(b, strong) 스타일 - 굵기 및 포인트 색상 복원 */
.post-body blockquote.type-sticker b, 
.post-body blockquote.type-sticker strong {
    font-weight: 700 !important;
    color: #102a43 !important; /* 강조 부분은 네이비로 포인트 */
}

/* 내부 구분선 - 외곽 테두리(#e3e3e3)와 색상 통일 */
.post-body blockquote.type-sticker hr {
    border: none !important;
    border-top: 1px solid #e3e3e3 !important; /* 테두리 선과 동일한 색상 적용 */
    height: 0 !important;
    margin: 25px 0 !important; /* 부칙 영역과의 시원한 간격 */
    display: block !important;
}

/* 내부 모든 요소 기울기 방지 */
.post-body blockquote.type-sticker * {
    font-style: normal !important;
}

※ type-sticker 스타일: ::before 가상 요소 관련
HTML 작성 시 data-title 속성을 깜빡하고 넣지 않으면 라벨이 빈 칸으로 보이게 됨에 유의.

2) 블로그스팟 HTML 글쓰기 모드에서 아래 코드를 복사해서 붙여 넣고 사용하면 된다.

※ data-title="TIP"이나 data-title="NOTICE"처럼 상황에 맞게 바꾸면 됨.

HTML


<blockquote class="type-sticker" data-title="CHECK!">
  내용을 적으세요.<br />
</blockquote>

2번. type-box 스타일 (라벨 없음 + 제미나이풍 그레이 배경)

1) 마찬가지로, 블로그스팟 관리자 [테마] > [맞춤설정] > [고급] > [CSS 추가]에 아래 코드를 복사해서 붙여 넣고 저장을 누른다.

CSS


/* [Style] 2. 연한 회색 요약 박스 (라벨 없음 + 제미나이풍 그레이 배경) */
.post-body blockquote.type-box {
    position: relative !important;
    margin: 35px auto !important;
    padding: 20px 30px !important; /* 상단 패딩을 35px에서 20px로 줄여 첫 줄 간격 최적화 */
    
    /* 제미나이 스타일과 동일한 배경 및 라운드 적용 */
    background-color: #f8f9fa !important; 
    border: 1px solid #e3e3e3 !important; /* 제미나이 박스 경계색과 통일 */
    border-radius: 12px !important; /* 12px로 곡률 통일 */
    
    box-shadow: none !important;
    text-align: left !important;
    
    /* 서체 설정 */
    font-family: 'Noto Sans KR', sans-serif !important; 
    font-style: normal !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #1f1f1f !important; /* 제미나이 코드 글자색과 통일 */
    line-height: 1.6 !important; /* 행간을 조금 더 쫀쫀하게 조정 (1.8 -> 1.6) */
}

/* 박스 내부 제목 스타일 (H2 포인트 컬러 #102a43 유지) */
.post-body blockquote.type-box strong:first-child {
    color: #102a43 !important; 
    font-family: 'Noto Sans KR', sans-serif !important;
    display: block !important;
    margin-top: 0 !important;      /* 박스 상단 여백과 겹치지 않게 제목 윗 마진 제거 */
    margin-bottom: 8px !important; /* 제목 아래 여백도 12px -> 8px로 축소 */
    font-size: 1.2rem !important;  /* 크기를 아주 살짝 조절해서 균형을 맞춤 */
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;   /* 제목 자체의 세로 높이를 최소화 */
}

/* 내부 구분선: 제미나이 헤더 구분선 느낌으로 */
.post-body blockquote.type-box hr {
    border: 0 !important;
    border-top: 1px solid #e3e3e3 !important;
    margin: 25px 0 !important;
}

/* 내부 모든 요소 기울기 방지 */
.post-body blockquote.type-box * {
    font-style: normal !important;
}

※ .post-body blockquote.type-box strong:first-child { ... } 이 방식은 blockquote 바로 다음에 <strong>이 올 때만 작동한다.

HTML 작성 시 공백이나 줄바꿈이 들어가면 :first-child가 적용되지 않음에 유의.

2) 블로그스팟 HTML 글쓰기 모드에서 아래 코드를 복사해서 붙여 넣고 사용하면 된다.

HTML


<blockquote class="type-box">
  <strong>CHECK!</strong>
  내용을 적으세요.
</blockquote>

오늘의 한마디

이번에 공유하는 콜아웃 박스는 HTML 글쓰기 모드에서 작성하면 오류를 줄일 수 있다.

unsplash@celine

이 블로그 검색

더한스픽