대가성 문구는 상품 묶음 바로 위

Disclosure sits right above the products

추천 준비물 목록 바로 앞에 「쿠팡 파트너스 활동의 일환…」 문구가 14px로 있어요. 링크에는 광고 표시가 붙어요.

···

html

<main class="dsx dsx--one"><p class="dsx-label"><b>실제 렌더</b>KRDS ProductList rows — 점선과 이름표는 아틀라스가 얹은 설명이에요</p><div class="container gx-measure"><section class="pr pr--rows" aria-labelledby="products" data-astro-cid-qhlpuo23> <h2 id="products" class="pr__title" data-astro-cid-qhlpuo23>추천 준비물</h2> <p class="disclosure pr__disclosure" data-affiliate-disclosure data-astro-cid-qhlpuo23> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.6 12C3.6 7.36081 7.36081 3.6 12 3.6C16.6392 3.6 20.4 7.36081 20.4 12C20.4 16.6392 16.6392 20.4 12 20.4C7.36081 20.4 3.6 16.6392 3.6 12ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM13 7.59375V13.5938H11V7.59375H13ZM13 17.0938V15.0938H11V17.0938H13Z" fill="currentColor"></path> </g></svg> <span data-astro-cid-qhlpuo23>이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</span> </p> <ul class="pr__list" data-product-block data-astro-cid-qhlpuo23> <li class="pr__item" data-astro-cid-qhlpuo23>  <div class="pr__body" data-astro-cid-qhlpuo23> <p class="pr__name" data-astro-cid-qhlpuo23>아기 식탁 의자(하이체어)</p> <p class="pr__why" data-astro-cid-qhlpuo23>아기가 똑바로 앉아야 음식을 제대로 삼킬 수 있어요. 안전벨트가 단단히 고정되는지 확인하세요.</p>  </div> <a class="button button--quiet pr__button" href="https://link.coupang.com/a/hNfOheHXj2" target="_blank" rel="sponsored nofollow noopener" data-astro-cid-qhlpuo23>
쿠팡에서 보기
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29922 5.5002C4.29922 4.83745 4.83648 4.3002 5.49922 4.3002H11.9992V2.7002H5.49922C3.95282 2.7002 2.69922 3.9538 2.69922 5.5002V18.5002C2.69922 20.0466 3.95282 21.3002 5.49922 21.3002H18.4992C20.0456 21.3002 21.2992 20.0466 21.2992 18.5002V12.0002H19.6992V18.5002C19.6992 19.1629 19.162 19.7002 18.4992 19.7002H5.49922C4.83648 19.7002 4.29922 19.1629 4.29922 18.5002V5.5002ZM14.1992 3.5002C14.1992 3.94202 14.5574 4.3002 14.9992 4.3002H18.5678L10.4335 12.4345C10.1211 12.7469 10.1211 13.2535 10.4335 13.5659C10.746 13.8783 11.2525 13.8783 11.5649 13.5659L19.6992 5.43157V9.0002C19.6992 9.44202 20.0574 9.8002 20.4992 9.8002C20.941 9.8002 21.2992 9.44202 21.2992 9.0002V2.7002H14.9992C14.5574 2.7002 14.1992 3.05837 14.1992 3.5002Z" fill="currentColor"></path></svg> <span class="sr-only" data-astro-cid-qhlpuo23>(새 창, 광고 링크)</span> </a> </li><li class="pr__item" data-astro-cid-qhlpuo23>  <div class="pr__body" data-astro-cid-qhlpuo23> <p class="pr__name" data-astro-cid-qhlpuo23>실리콘 이유식 스푼</p> <p class="pr__why" data-astro-cid-qhlpuo23>끝이 부드러운 이유식 전용 숟가락은 아기 잇몸에 부담이 적어요.</p>  </div> <a class="button button--quiet pr__button" href="https://link.coupang.com/a/hNfOkvnyb6" target="_blank" rel="sponsored nofollow noopener" data-astro-cid-qhlpuo23>
쿠팡에서 보기
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29922 5.5002C4.29922 4.83745 4.83648 4.3002 5.49922 4.3002H11.9992V2.7002H5.49922C3.95282 2.7002 2.69922 3.9538 2.69922 5.5002V18.5002C2.69922 20.0466 3.95282 21.3002 5.49922 21.3002H18.4992C20.0456 21.3002 21.2992 20.0466 21.2992 18.5002V12.0002H19.6992V18.5002C19.6992 19.1629 19.162 19.7002 18.4992 19.7002H5.49922C4.83648 19.7002 4.29922 19.1629 4.29922 18.5002V5.5002ZM14.1992 3.5002C14.1992 3.94202 14.5574 4.3002 14.9992 4.3002H18.5678L10.4335 12.4345C10.1211 12.7469 10.1211 13.2535 10.4335 13.5659C10.746 13.8783 11.2525 13.8783 11.5649 13.5659L19.6992 5.43157V9.0002C19.6992 9.44202 20.0574 9.8002 20.4992 9.8002C20.941 9.8002 21.2992 9.44202 21.2992 9.0002V2.7002H14.9992C14.5574 2.7002 14.1992 3.05837 14.1992 3.5002Z" fill="currentColor"></path></svg> <span class="sr-only" data-astro-cid-qhlpuo23>(새 창, 광고 링크)</span> </a> </li><li class="pr__item" data-astro-cid-qhlpuo23>  <div class="pr__body" data-astro-cid-qhlpuo23> <p class="pr__name" data-astro-cid-qhlpuo23>이유식 냉동 큐브 용기</p> <p class="pr__why" data-astro-cid-qhlpuo23>한 번 먹을 양씩 나눠 얼리고 날짜를 적어 두면 보관 기준을 지키기 쉬워요.</p>  </div> <a class="button button--quiet pr__button" href="https://link.coupang.com/a/hNfOtEoGPc" target="_blank" rel="sponsored nofollow noopener" data-astro-cid-qhlpuo23>
쿠팡에서 보기
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29922 5.5002C4.29922 4.83745 4.83648 4.3002 5.49922 4.3002H11.9992V2.7002H5.49922C3.95282 2.7002 2.69922 3.9538 2.69922 5.5002V18.5002C2.69922 20.0466 3.95282 21.3002 5.49922 21.3002H18.4992C20.0456 21.3002 21.2992 20.0466 21.2992 18.5002V12.0002H19.6992V18.5002C19.6992 19.1629 19.162 19.7002 18.4992 19.7002H5.49922C4.83648 19.7002 4.29922 19.1629 4.29922 18.5002V5.5002ZM14.1992 3.5002C14.1992 3.94202 14.5574 4.3002 14.9992 4.3002H18.5678L10.4335 12.4345C10.1211 12.7469 10.1211 13.2535 10.4335 13.5659C10.746 13.8783 11.2525 13.8783 11.5649 13.5659L19.6992 5.43157V9.0002C19.6992 9.44202 20.0574 9.8002 20.4992 9.8002C20.941 9.8002 21.2992 9.44202 21.2992 9.0002V2.7002H14.9992C14.5574 2.7002 14.1992 3.05837 14.1992 3.5002Z" fill="currentColor"></path></svg> <span class="sr-only" data-astro-cid-qhlpuo23>(새 창, 광고 링크)</span> </a> </li> </ul> <p class="pr__note" data-astro-cid-qhlpuo23>상품은 이 글을 읽는 분께 실제로 필요한 것만 골랐고, 링크가 없는 항목은 준비할 때 참고하는 체크리스트예요.</p> </section> </div></main>

css

.dsx--one,.dsx{padding-top:34px}.pr__disclosure{outline:2px dashed #c2410c;outline-offset:3px;position:relative}.pr__disclosure::before{content:'대가성 문구 (14px)';position:absolute;bottom:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}[data-product-block]{outline:2px dashed #c2410c;outline-offset:3px;position:relative}[data-product-block]::before{content:'상품 묶음 — 문구가 바로 앞에';position:absolute;top:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.pr__list{margin-top:18px}.pr__disclosure{margin-top:34px}

쿠팡 파트너스 글은 읽는 사람이 광고 링크라는 걸 쉽게 알아봐야 해요. 문구가 글 어디엔가 있는 것으로는 부족하고, 링크 묶음 바로 앞에 있어야 읽고 누를 수 있어요. 문구는 「이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.」 한 문장으로 정해져 있고 글자 크기는 14px에서 줄어들지 않아요.

기계가 직접 막는 부분이 여럿 있어요. seo:audit 은 상품 묶음(data-product-block) 바로 앞 요소에 이 문구가 없으면 오류를 내고, 쿠팡 링크에 rel="sponsored nofollow" 가 없어도 오류, 쿠팡 링크가 있는데 페이지에 문구가 없어도 오류예요. 링크 글자 뒤에는 「(새 창, 광고 링크)」가 화면 읽기 프로그램용으로 붙어요. 크기와 위치의 모양은 팩이 그리지만 문구, 위치, 광고 표시는 네 팩이 같아요.

팩마다 상품 묶음의 모양은 달라요(rows 목록, table 표, checklist 글자 링크). 어떤 모양을 고르든 문구가 바로 앞에 오는 건 같아요.

언제 쓰나

상품 목록을 새 모양으로 만들거나 상품 링크를 본문 중간에 넣고 싶을 때 떠올려요. 새 모양이어도 상품 묶음 표시(`data-product-block`)와 바로 앞 문구는 그대로 둬요.

함께 보기

17추천 준비물Product list

17추천 준비물Product list

17추천 준비물Product list

06디자인 출처 표기Design credit

언제 쓰나