쿠팡 파트너스 배너 오른쪽 정렬

쿠팡 파트너스 배너 오른쪽 정렬

 

쿠팡 파트너스 배너를 오른쪽에 두고외쪽에 글을 작성하기 위해

제가 작성한 코드는 아래와 같습니다.

<!-- 부모 div 에 display를 flex로 설정하여 자식 div 조절이 가능하게 설정합니다.-->
<div style="display: flex;">
  <!-- flex left 옵션과 width를 80% 주어 왼쪽 공간을 확보했습니다-->
  <!-- margin-top 을 활용하여 위에서 부터 마진을 20px 정도 주어 글자를 위 공간을 좀 주고 작성되게 구성하였습니다.-->
  <!--line-height를 200%로 하여 줄간 간격을 넓혀주었습니다-->
  <div style="flex:left; width:80%; margin-top: 20px; line-height:200%;">
    <p align="middle">내돈 내산 제품이지만 쿠팡 파트너스 링크를 추가하여두었습니다.</p>
    <p align="middle">본 제품에 관심이 있다면 아래 링크를 통해 확인해 주세요</p>
    <p align="middle">"이 포스팅은 쿠팡 파트너스 활동의 일환으로, </p>
    <p align="middle">이에 따른 일정액의 수수료를 제공받습니다."</p>
  </div>
  <!-- flex right 옵션과 width를 20% 주어 왼쪽 공간을 확보했습니다-->
  <div style="flex:right; width:20%">
    <!--아래는 쿠팡 링크 입니다. 그대로 복사 해서 붙여두었습니다.-->
    <a href="" target="_blank" referrerpolicy="unsafe-url">
      <img src="https://img4c.coupangcdn.com/image/affiliate/banner/6a095e4b9d918c2b87432673c5125747@2x.jpg" alt="생활백서 못없이 설치하는 암막커튼 올인원 풀세트 NEW ver.4" width="120" height="240">
    </a>
  </div>
</div>

 

코드 실행 부분은 아래와 같습니다.

 

내돈 내산 제품이지만 쿠팡 파트너스 링크를 추가하여두었습니다.

본 제품에 관심이 있다면 아래 링크를 통해 확인해 주세요

"이 포스팅은 쿠팡 파트너스 활동의 일환으로,

이에 따른 일정액의 수수료를 제공받습니다."

 

아래 코드펜 위에서 자율로운 수정도 가능합니다.

See the Pen 쿠팡 배너 오른쪽 정렬 by hyunho (@momalcy) on CodePen.