활용 사례
home
회사 브랜딩
home
🎾

페이지별 HTML 코드 블럭

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
복사

metatag를 변경하려면 어떻게 하나요?

아래와 같이 적용하시면 됩니다.
<head> <title>커스텀 제목</title> <meta name="description" content="커스텀 description" /> </head>
HTML
복사

HTML이 너무 길어서 노션에서 보기 불편해요!

그럴 땐 아래 링크의 HTML minifer를 이용해 보세요. 긴 HTML을 1줄로 줄여준답니다

이전