공유
🎾

페이지별 HTML 코드 블럭

4 backlinks
💡
HTML 에 익숙치 않다면 이 내용은 건너 뛰어주세요. 먼저 👨‍💻HTML 편집 을 읽고 오시면 좋습니다.
👨‍💻HTML 편집 기능은 웹사이트의 모든 페이지에 적용됩니다. 만약 특정 페이지에만 적용하고 싶은 부분이 있다면 페이지 별 HTML 코드 블럭을 사용하세요!
HTML 코드 블럭?
노션에서 제공하는 코드 블럭 중, 아래와 같은 HTML 타입의 코드 블럭을 만들어 주세요.
<head></head> <body></body>
HTML
해당 코드 블럭이 페이지의 가장 맨 위에 (공백 라인도 안됩니다) 위치해 있다면, Oopy 는 그 코드 블럭을 다음과 같이 특수 처리합니다.
1.
페이지를 그릴 때 해당 블럭을 지웁니다.
2.
대신, 해당 블럭의 내용을 Oopy 가 소화합니다.
이 페이지 아래에 있는 버튼이 보이시나요? 바로 페이지별 HTML 코드 블럭을 사용해서 그린 버튼이에요! 아래 코드를 확인해 보세요.
<head> <style>.cta{position: fixed; bottom: 16px; left: 0; right: 0; margin: 0 auto; display: flex; align-self: center; align-items: center; justify-content: center; width: 88%; max-width: 708px; height: 48px; background-color: powderblue; color: #0d0d0d; z-index: 999999999; text-decoration: none; border-radius: 8px; font-weight: bold; font-size: 16px; transition: 300ms; -webkit-box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); -moz-box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); box-shadow: 0px 0px 4px 2px rgba(55, 53, 47, 0.4); font-family: 'inter', sans-serif;cursor: pointer;}.cta:hover{filter: brightness(88%);}</style> <script> function handleClick() { window.alert("Hi!"); } </script> </head> <body> <div class="cta" onclick='handleClick()'>I'm button!</div> </body>
HTML
HTML이 너무 길어서 노션에서 보기 불편해요!
그럴 땐 아래 링크의 HTML minifer를 이용해 보세요. 긴 HTML을 1줄로 줄여준답니다 😎
PREV
Made with 💕 and Oopy
TOP