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를 변경하려면 어떻게 하나요?
아래와 같이 적용하시면 됩니다.
잠깐, YAML 코드 블럭을 사용하면 더 쉽게 다양한 옵션을 페이지별로 적용할 수 있어요!
페이지별 YAML 코드 블럭 과 페이지별 YAML 코드 블럭 레퍼런스 에서 title, description을 설정하는 방법을 알아보세요!
페이지별 YAML 코드 블럭 과 페이지별 YAML 코드 블럭 레퍼런스 에서 title, description을 설정하는 방법을 알아보세요!<head>
<title>커스텀 제목</title>
<meta name="description" content="커스텀 description" />
</head>
HTML
복사
HTML이 너무 길어서 노션에서 보기 불편해요!
그럴 땐 아래 링크의 HTML minifer를 이용해 보세요.
긴 HTML을 1줄로 줄여준답니다