우피의 한계를 시험하는 공간

히히 공백이나 내용이 있으면 코드가 안 먹히지

<head>
<style>
.page_cover, .width.padding:first-of-type {
display: none !important;
}
</style>
</head>

↑ 헤더를 없애는 코드입니다.

우피에 적용했을 때 커버 이미지, 아이콘, 제목이 모두 사라집니다.
제목 바로 밑에 다른 내용 없이, 공백 없이
코드블럭 (/코드) → html로 입력

<head>
<style>
  @keyframes fadeUp {
    from {
      transform: translateY(50px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .notion-frame > .notion-scroller {
    transform: translateY(50px);
    opacity: 0;
    animation: 400ms ease fadeUp;
    animation-fill-mode: forwards;
  }
</style>
</head>

↑ 페이지가 스르륵 등장하는 코드입니다.

우피에 적용했을 때 페이지 전체가 스르륵 예쁘게 나타납니다.
제목 바로 밑에 다른 내용 없이, 공백 없이
코드블럭 (/코드) → html로 입력

<aside>

STEP 1.

참가권과 도서 구매하기

참가권과 도서를 모두 구매하시면, 챌린지 프로그램에 자동으로 신청됩니다.

챌린지 참가권이 필요해요. (↔️ 슬라이드로 넘겨보기)

<aside>

oopy:slide

type: "crossfade" # Pro 플랜 전용) 애니메이션 효과가 크로스페이드로 적용됩니다.
speed: 1000 # 슬라이드가 넘어가는데 걸리는 시간입니다. 기본값: 1000 (ms, 밀리세컨드)
ratio: 1.4 # 슬라이드 너비 : 슬라이드 높이 비율을 지정합니다. 기본값: 2.76 (708px : 256px)
full: false # 슬라이드를 화면에 꽉 차도록 합니다. full 옵션이 true 일때도 ratio는 유지됩니다. 슬라이드가 컬럼이나 토글에 들어가는 경우 해당 옵션은 동작하지 않습니다. 기본값: false
autoplay: 
  period: 0 # 슬라이드가 자동으로 넘어가기까지 걸리는 시간입니다. 자동 재생을 원하지 않는다면 값을 0으로 주세요!
indicator: # 슬라이드 아래에 나타나는 이동을 위한 점들을 의미합니다.
  show: true # 점들을 숨기려면 값을 false로 변경하세요
  color: "#6196FF" # 현재 보이는 슬라이드에 대응되는 점의 색깔입니다. 기본값: #6196FF
borderRadius: 0 # 슬라이드의 모서리를 둥글게 하는 값입니다. 기본값: 16
backgroundColor: "transparent" # 슬라이드의 배경화면 색상을 지정합니다. *) 배경을 투명색으로 사용하려면 "transparent" 를 입력하세요.

</aside>

챌린지 도서가 필요해요.

<aside>

oopy:slide

type: "crossfade" # Pro 플랜 전용) 애니메이션 효과가 크로스페이드로 적용됩니다.
speed: 1000 # 슬라이드가 넘어가는데 걸리는 시간입니다. 기본값: 1000 (ms, 밀리세컨드)
ratio: 4 # 슬라이드 너비 : 슬라이드 높이 비율을 지정합니다. 기본값: 2.76 (708px : 256px)
full: true # 슬라이드를 화면에 꽉 차도록 합니다. full 옵션이 true 일때도 ratio는 유지됩니다. 슬라이드가 컬럼이나 토글에 들어가는 경우 해당 옵션은 동작하지 않습니다. 기본값: false
autoplay: 
  period: 2000 # 슬라이드가 자동으로 넘어가기까지 걸리는 시간입니다. 자동 재생을 원하지 않는다면 값을 0으로 주세요!
indicator: # 슬라이드 아래에 나타나는 이동을 위한 점들을 의미합니다.
  show: true # 점들을 숨기려면 값을 false로 변경하세요
  color: "#6196FF" # 현재 보이는 슬라이드에 대응되는 점의 색깔입니다. 기본값: #6196FF
borderRadius: 16 # 슬라이드의 모서리를 둥글게 하는 값입니다. 기본값: 16
backgroundColor: "transparent" # 슬라이드의 배경화면 색상을 지정합니다. *) 배경을 투명색으로 사용하려면 "transparent" 를 입력하세요.

ChatGPT Image 2025년 6월 11일 오전 12_25_21.png

ChatGPT Image 2025년 6월 11일 오전 12_22_33.png

</aside>

<aside> 💡 oopy:slide

type: "crossfade" # Pro 플랜 전용) 애니메이션 효과가 크로스페이드로 적용됩니다.
speed: 1000 # 슬라이드가 넘어가는데 걸리는 시간입니다. 기본값: 1000 (ms, 밀리세컨드)
ratio: 4 # 슬라이드 너비 : 슬라이드 높이 비율을 지정합니다. 기본값: 2.76 (708px : 256px)
full: true # 슬라이드를 화면에 꽉 차도록 합니다. full 옵션이 true 일때도 ratio는 유지됩니다. 슬라이드가 컬럼이나 토글에 들어가는 경우 해당 옵션은 동작하지 않습니다. 기본값: false
autoplay: 
  period: 2000 # 슬라이드가 자동으로 넘어가기까지 걸리는 시간입니다. 자동 재생을 원하지 않는다면 값을 0으로 주세요!
indicator: # 슬라이드 아래에 나타나는 이동을 위한 점들을 의미합니다.
  show: true # 점들을 숨기려면 값을 false로 변경하세요
  color: "#6196FF" # 현재 보이는 슬라이드에 대응되는 점의 색깔입니다. 기본값: #6196FF
borderRadius: 16 # 슬라이드의 모서리를 둥글게 하는 값입니다. 기본값: 16
backgroundColor: "transparent" # 슬라이드의 배경화면 색상을 지정합니다. *) 배경을 투명색으로 사용하려면 "transparent" 를 입력하세요.

KakaoTalk_20231107_173950502.mp4

</aside>