소재 규격 비율 4종과 안전 영역

세로형이 섞인 지면 4종을 실제 비율 사각형으로 나란히 놓고, 매체 화면 요소에 가려지는 영역을 빗금으로, 문구를 둘 안전 영역을 테두리로 표시하는 도식. 피드·슬라이드·스토리·릴스 규격, 숏폼 자막 위치 안내에 사용. 지면 4개 고정(3개면 D-도식-소재규격비율3), 지면마다 규격 + 유의점 2줄. 값 바꾸는 법: 사각형은 frame(폭, 높이, 위 가림 높이, 아래 가림 높이) 값: div.bx 의 width·height 와 그 안 i.cut 두 개의 height(px). 가림이 없으면 i 에서 class 와 style 삭제. 예: 9:16 높이 220px 에서 상단 14% = 31px, 하단 20% = 44px, 릴스 하단 약 3분의 1 = 74px. 지면 이름·규격·유의점 교체. 강조색은 안전 영역 테두리에만 사용.

지면별 소재를 실제 가로세로 비율의 사각형으로 나란히 놓는 표기는 매체 공식 소재 가이드(네이버 성과형 디스플레이, 메타 광고 가이드의 지면별 규격 도해)와 Envato Elements 의 social media size guide 인포그래픽 구성 참고. 직접 제작. 가림 영역 빗금과 안전 영역 테두리 표기는 메타 릴스·스토리 안전 영역 템플릿 표기 방식 참고.

<div class="dk dk-ratio4">
<div class="c"><div class="bx" style="width:156px;height:195px"><i class="cut" style="height:27px"></i><span>4:5</span><i class="cut" style="height:39px"></i></div><h3>피드</h3><p class="sz num">1080×1350픽셀</p><p class="d">상단·하단 여백 확보</p></div>
<div class="c"><div class="bx" style="width:180px;height:180px"><i></i><span>1:1</span><i></i></div><h3>슬라이드</h3><p class="sz num">1080×1080픽셀</p><p class="d">카드별 개별 링크</p></div>
<div class="c"><div class="bx" style="width:124px;height:220px"><i class="cut" style="height:31px"></i><span>9:16</span><i class="cut" style="height:44px"></i></div><h3>스토리</h3><p class="sz num">1080×1920픽셀</p><p class="d">상단 프로필·진행 표시, 하단 답장 입력창과 겹침</p></div>
<div class="c"><div class="bx" style="width:124px;height:220px"><i class="cut" style="height:31px"></i><span>9:16</span><i class="cut" style="height:74px"></i></div><h3>릴스</h3><p class="sz num">1080×1920픽셀, 영상만</p><p class="d">하단 댓글·좋아요·음원 표시와 버튼으로 가림 영역이 가장 넓음</p></div>
<p class="lg"><span class="a">가림 영역</span><span class="b">문구를 둘 안전 영역</span></p>
</div>

.dk-ratio4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;row-gap:14px}
.dk-ratio4 .c{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px 20px;display:grid;grid-template-rows:226px auto auto 1fr}
.dk-ratio4 .bx{align-self:end;margin-bottom:6px;background:var(--soft);border-radius:var(--r-sm);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;outline:1.5px solid var(--g2)}
.dk-ratio4 .bx .cut{display:block;flex:none;background-image:repeating-linear-gradient(135deg,var(--g2) 0,var(--g2) 1.5px,transparent 1.5px,transparent 7px)}
.dk-ratio4 .bx span{flex:1;display:flex;align-items:center;justify-content:center;margin:3px;border:1.5px dashed var(--ac);border-radius:4px;font-size:var(--f-cap);font-weight:700;color:var(--ac)}
.dk-ratio4 h3{margin:12px 0 0;font-size:var(--f-lg);font-weight:700;line-height:1.3}
.dk-ratio4 .sz{margin:0 0 6px;font-size:var(--f-sm);font-weight:600;color:var(--ink)}
.dk-ratio4 .d{margin:0;font-size:var(--f-sm);color:var(--ink2);line-height:1.5}
.dk-ratio4 .lg{grid-column:1/-1;margin:0;display:flex;gap:20px;font-size:var(--f-cap);color:var(--mu)}
.dk-ratio4 .lg span{display:flex;align-items:center;gap:8px}
.dk-ratio4 .lg span::before{content:"";width:22px;height:14px;border-radius:3px}
.dk-ratio4 .lg .a::before{background-image:repeating-linear-gradient(135deg,var(--g2) 0,var(--g2) 1.5px,transparent 1.5px,transparent 7px);outline:1px solid var(--g2)}
.dk-ratio4 .lg .b::before{border:1.5px dashed var(--ac)}