디자인 효과 모음
지금까지 글 본문에 사용한 디자인 효과 24종입니다. 글쓰기 화면에서는 "+ 디자인 효과 삽입" 버튼으로 클릭 한 번에 넣을 수 있습니다.
섹션 1
드롭캡
.si-dropcap
첫 문단의 첫 글자를 크게 강조해서 글의 시작을 눈에 띄게 만듭니다. 에디토리얼 매거진에서 자주 쓰는 문법입니다.
하이라이터(형광펜)
.si-mark
일반 에디터에서는 구현이 어려운 효과입니다. 핵심 문구에 배경색 마킹을 해서 시선을 붙잡습니다.
자간 넓은 라벨형 헤딩
.si-tracked-heading
STEP 01 — 라벨 예시
섹션 제목
풀쿼트
.si-pullquote
핵심 메시지를 큰 세리프 인용구로 독립시켜 강조합니다.
넘버링 헤딩
.si-num-heading
01큰 숫자와 제목을 나란히 배치
섹션 2
타이트 리딩(행간 좁힘)
.si-tight
본문 줄간격을 줄여 밀도 있는 인상을 줍니다. 데이터가 많은 섹션에 어울립니다.
교차 배경 패널
.si-panel
패널 제목
배경색이 있는 박스로 비교 항목을 구분합니다.
체크/엑스 비교 리스트
.si-check-list / .si-x-list
- 체크 리스트 항목 예시
- 두 번째 항목
- 엑스 리스트 항목 예시
TL;DR 요약 박스
.si-tldr
이 글의 핵심 (TL;DR)
- 글 최상단에 핵심 요약을 배치합니다.
- 독자가 전체 내용을 빠르게 파악할 수 있습니다.
에디토리얼 이탤릭 서브헤딩
.si-editorial-sub
섹션 제목
소제목 아래 세리프 이탤릭체로 부연 설명을 답니다
섹션 3
각주형 노트
.si-footnote
참고: 본문 중 부가 설명이나 정책 변동 가능성 등을 작은 글씨의 각주로 분리합니다.
인라인 큰 숫자 강조
.si-stat-inline
수수료율은 대부분 3% 수준입니다.
질문형 콜아웃
.si-callout
혹시 이런 생각 해보신 적 있나요? 독자에게 직접 묻는 문장을 부드러운 배경 박스로 강조합니다.
밑줄 악센트 헤딩
.si-underline
핵심 키워드가 들어간 소제목
큰 장식 인용부호
.si-bigquote
대형 따옴표 장식과 함께 핵심 메시지를 인용구로 강조합니다.
섹션 4
사이드 팁 박스
.si-aside
참고 팁 — 왼쪽 컬러 라인이 있는 박스로 부가 설명을 강조합니다.
인라인 미니 스텝
.si-inline-steps
① 완료된 단계② 완료된 단계③ 예정 단계
자간 넓은 캡스 도입부
.si-lead-caps
TOPIC · KEYWORD · 주제어 나열
섹션 제목
비비드 그린 강조
.si-vivid-green
이 부분은 비비드 그린으로 강조합니다.
비비드 시안 강조
.si-vivid-cyan
이 부분은 비비드 시안으로 강조합니다.
섹션 5
비비드 핑크 강조
.si-vivid-pink
이 부분은 비비드 핑크로 강조합니다.
비비드 앰버 강조
.si-vivid-amber
이 부분은 비비드 앰버로 강조합니다.
비비드 퍼플 강조
.si-vivid-purple
이 부분은 비비드 퍼플로 강조합니다.
타임라인
.si-timeline
1단계 · 진행 중
단계 제목
단계 설명 텍스트