cleanUrl: /ko/guides/head-html-code-block

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

<aside> 💡 HTML 에 익숙치 않다면 이 내용은 건너 뛰어주세요. 먼저 HTML 편집 을 읽고 오시면 좋습니다.

</aside>

HTML 편집 기능은 웹사이트의 모든 페이지에 적용됩니다. 만약 특정 페이지에만 적용하고 싶은 부분이 있다면 페이지 별 HTML 코드 블럭을 사용하세요!

HTML 코드 블럭?

노션에서 제공하는 코드 블럭 중, 아래와 같은 HTML 타입의 코드 블럭을 만들어 주세요.

<head></head>
<body></body>

해당 코드 블럭이 페이지의 가장 맨 위에 (공백 라인도 안됩니다) 위치해 있다면, Oopy 는 그 코드 블럭을 다음과 같이 특수 처리합니다.

페이지를 그릴 때 해당 블럭을 지웁니다.
대신, 해당 블럭의 내용을 Oopy 가 소화합니다.

아래 영상을 확인해 주세요! 👇

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b9d46a0f-d9ee-42c6-a77b-31ba70c72eda/__2021-02-23__10.31.07.mov

이 페이지 아래에 있는 버튼이 보이시나요? 바로 페이지별 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>

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

아래와 같이 적용하시면 됩니다.