콜아웃에 커스텀 이미지 배경 넣기!

크래프트 지 텍스처를 콜아웃에 적용했습니다.

페이지별 적용

텍스처를 변경하시려면 background-image 안에 원하시는 텍스처 이미지 링크를 넣어보세요!

콜아웃 내의 글자색을 변경하시려면 color: #fff 에 원하는 색상을 지정해 주세요!

<head>
	<style>
    .notion-callout-block {
      background-image: url("https://images.unsplash.com/photo-1615800098746-73af8261e3df?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHBhcGVyfGVufDB8MXwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
	    background-size: cover;
    }

    .notion-callout-block * {
      color: #fff !important;
      background-color: transparent !important;
    }
	</style>
</head>
HTML
복사

전체 페이지 적용

우피 콘솔의 HEAD 영역에 아래 코드를 넣고 저장해 주세요.

app.oopy.io

https://app.oopy.io/script

<style>
  .notion-callout-block {
    background-image: url("https://images.unsplash.com/photo-1615800098746-73af8261e3df?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHBhcGVyfGVufDB8MXwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60");
    background-size: cover;
  }

  .notion-callout-block * {
    color: #fff !important;
    background-color: transparent !important;
  }
</style>
HTML
복사