이쁜 박스 CSS 샘플 1가지 – 쿠팡 공지사항으로 사용

쿠팡 파트너스를 이용하면 반드시 대가성 글이란 것을 공지해야만 합니다. 매번 글 쓸때마다 하단에 그 문구를 넣기엔 너무 노가다 같아 워드프레스 본문 글 하단에 자동으로 노출되게 해봤습니다.

아래 CSS 코드는 인터넷에서 참고한 것입니다. 너무 오래전에 스크랩 해 둔것이라 어디서 참고 했는지 원 출처를 모르겠습니다.

이쁜 박스 CSS 샘플?

이쁜 박스 CSS 샘플 코드

<style>
div.tip { position: relative; margin: 40px 0px 30px 0px; padding: 20px 20px 1px 20px; border: 5px solid #eeeeee; border-radius: 10px; background-color: #ffffff; font-size: 0.9em;}
div.tip:before { content: "Notice"; position: absolute; top: -15px; margin: 0px; padding: 3px 10px; border-radius: 3px; background-color: #666666; color: #ffffff; font-weight: 800; font-size: 14px; font-family: "Noto Serif", sans-serif; }
</style>

<div class="tip">
일부 포스팅은 쿠팡 파트너스와 같은 제휴 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
</div>

어떻게 추가 하나?

추가 방법은 GeneratePress 엘리먼트에 훅(hook)으로 추가 합니다. 자세한 내용은 아래 영상을 참고 하세요.

관련 글