디자인킷 · 레이아웃
실행: 콘텐츠 캘린더(월 달력형)
D-레이아웃-완성-실행-콘텐츠캘린더
언제 쓰는가
전(轉). 콘텐츠 운영안 뒤. 한 달 발행 계획을 달력으로 보여주고 오른쪽에 유형별 건수와 발행 원칙을 정리. 한 달 5주, 하루 칩 1개, 유형 4종 이하. 바꿔야 할 값: 월, 날짜 시작 요일, 날짜별 칩(유형), 기준일 1개(class hot), 유형별 건수와 요일, 발행 원칙 3줄. 값 바꾸는 법: .wk 한 줄이 한 주(월~일 7칸). 빈 칸은 class="d off". 칩은 <span class="c b">블로그</span>(b 블로그, i 인스타, s 숏폼, m 메일). 기준일(출시·행사) 하루만 class="c hot". 오른쪽 .lg li 의 건수는 달력 칩 수와 일치시킬 것.
참고
CoSchedule·Hootsuite 콘텐츠 캘린더 양식의 월 보기(날짜 칸 + 유형 색 칩), Notion 캘린더 보기의 칩 표기를 참고. 색 대신 무채색 농도와 테두리로 유형 구분. 직접 제작.
조각
<section class="slide lo-ex-cal">
<div class="run"><b>하늘결 스킨케어 2027 신제품 출시 캠페인 제안</b><span>PART 03 · 매체별 실행안</span></div>
<div class="hd"><p class="lb">콘텐츠 캘린더</p><h1>출시 전 2주는 예고, 출시 후 2주는 후기 중심으로 19건 발행</h1><p class="lede">2027년 1월 발행 일정. 1월 15일 신제품 출시 기준</p></div>
<div class="body">
<div class="grid">
<div class="cd cal">
<div class="wd"><span>월</span><span>화</span><span>수</span><span>목</span><span>금</span><span>토</span><span>일</span></div>
<div class="wk"><div class="d off"></div><div class="d off"></div><div class="d off"></div><div class="d off"></div><div class="d"><b class="num">1</b><span class="c b">블로그</span></div><div class="d"><b class="num">2</b></div><div class="d"><b class="num">3</b></div></div>
<div class="wk"><div class="d"><b class="num">4</b><span class="c i">인스타</span></div><div class="d"><b class="num">5</b><span class="c b">블로그</span></div><div class="d"><b class="num">6</b></div><div class="d"><b class="num">7</b><span class="c s">숏폼</span></div><div class="d"><b class="num">8</b><span class="c b">블로그</span></div><div class="d"><b class="num">9</b></div><div class="d"><b class="num">10</b></div></div>
<div class="wk"><div class="d"><b class="num">11</b><span class="c i">인스타</span></div><div class="d"><b class="num">12</b><span class="c b">블로그</span></div><div class="d"><b class="num">13</b><span class="c m">메일</span></div><div class="d"><b class="num">14</b><span class="c s">숏폼</span></div><div class="d"><b class="num">15</b><span class="c hot">출시일</span></div><div class="d"><b class="num">16</b></div><div class="d"><b class="num">17</b></div></div>
<div class="wk"><div class="d"><b class="num">18</b><span class="c i">인스타</span></div><div class="d"><b class="num">19</b><span class="c b">블로그</span></div><div class="d"><b class="num">20</b></div><div class="d"><b class="num">21</b><span class="c s">숏폼</span></div><div class="d"><b class="num">22</b><span class="c b">블로그</span></div><div class="d"><b class="num">23</b><span class="c i">인스타</span></div><div class="d"><b class="num">24</b></div></div>
<div class="wk"><div class="d"><b class="num">25</b><span class="c i">인스타</span></div><div class="d"><b class="num">26</b><span class="c b">블로그</span></div><div class="d"><b class="num">27</b><span class="c m">메일</span></div><div class="d"><b class="num">28</b><span class="c s">숏폼</span></div><div class="d"><b class="num">29</b><span class="c b">블로그</span></div><div class="d"><b class="num">30</b></div><div class="d"><b class="num">31</b></div></div>
</div>
<div class="r">
<p class="k">유형별 발행 수</p>
<ul class="lg">
<li><span class="c b">블로그</span><em>화·금, 성분과 사용 후기</em><b class="num">8건</b></li>
<li><span class="c i">인스타</span><em>월요일, 카드형 3~5장</em><b class="num">5건</b></li>
<li><span class="c s">숏폼</span><em>목요일, 15초 안팎</em><b class="num">4건</b></li>
<li><span class="c m">메일</span><em>격주 수요일, 기존 고객</em><b class="num">2건</b></li>
</ul>
<p class="k">발행 원칙</p>
<ul class="pr">
<li>출시 전 주제는 성분과 예고, 출시 후는 사용 후기</li>
<li>같은 주의 블로그와 숏폼은 같은 검색어 그룹</li>
<li>초안 공유는 발행 3영업일 전, 확인 회신 1영업일</li>
</ul>
</div>
</div>
</div>
<div class="pg">23</div>
</section>스타일
.slide.lo-ex-cal .hd .lb{color:var(--mu)}
.slide.lo-ex-cal :where(.body p,.body ul,.body ol,.body dl,.body dd,.body dt){margin:0;padding:0;list-style:none}
.slide.lo-ex-cal .k{font-size:var(--f-cap);font-weight:600;color:var(--mu)}
.slide.lo-ex-cal .cd{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow)}
.slide.lo-ex-cal .say{font-size:var(--f-body);color:var(--ink2)}
.slide.lo-ex-cal .say::before{content:"→";color:var(--mu);font-weight:600;margin-right:10px}
.slide.lo-ex-cal .grid{display:grid;grid-template-columns:760px 1fr;gap:40px;align-items:center}
.slide.lo-ex-cal .cal{padding:14px 18px 16px}
.slide.lo-ex-cal .wd,.slide.lo-ex-cal .wk{display:grid;grid-template-columns:repeat(7,1fr)}
.slide.lo-ex-cal .wd span{font-size:var(--f-cap);font-weight:600;color:var(--mu);padding:0 8px 8px}
.slide.lo-ex-cal .wk{border-top:1px solid var(--line)}
.slide.lo-ex-cal .wd + .wk{border-top-color:var(--line2)}
.slide.lo-ex-cal .d{height:66px;padding:6px 8px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.slide.lo-ex-cal .d:first-child{border-left:0}
.slide.lo-ex-cal .d b{font-size:var(--f-cap);font-weight:600;color:var(--ink2)}
.slide.lo-ex-cal .d:nth-child(n+6) b{color:var(--mu)}
.slide.lo-ex-cal .c{font-size:var(--f-cap);font-weight:600;border-radius:var(--r-sm);padding:2px 10px;line-height:1.5;white-space:nowrap}
.slide.lo-ex-cal .c.b{background:var(--g4);color:var(--card)}
.slide.lo-ex-cal .c.i{background:var(--g2);color:var(--ink)}
.slide.lo-ex-cal .c.s{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--g3)}
.slide.lo-ex-cal .c.m{background:var(--card);color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line2)}
.slide.lo-ex-cal .c.hot{background:var(--ac);color:var(--card)}
.slide.lo-ex-cal .lg{margin:8px 0 22px}
.slide.lo-ex-cal .lg li{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.slide.lo-ex-cal .lg .c{text-align:center;padding:2px 0}
.slide.lo-ex-cal .lg em{font-style:normal;font-size:var(--f-sm);color:var(--ink2)}
.slide.lo-ex-cal .lg b{font-size:var(--f-md);font-weight:700}
.slide.lo-ex-cal .pr{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.slide.lo-ex-cal .pr li{font-size:var(--f-sm);color:var(--ink2);padding-left:14px;position:relative}
.slide.lo-ex-cal .pr li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--line2)}