cleanUrl: /ko/guides/oopy-html-code-block
oopy HTML 코드 블럭을 통해서 내가 원하는 위치에 원하는 HTML을 넣을 수 있습니다.
<style>
.hello-world {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
border: 2px solid;
font-weight: bold;
color: rgb(55,53,47);
background-color: white;
border-color: currentColor;
transition: 300ms;
}
.hello-world:hover {
color: white;
background-color: rgb(55,53,47);
border-color: currentColor;
}
</style>
<div class="hello-world">바로 이렇게요!</div>
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/384eaa53-3667-4447-a4cc-cf1af205af26/__2021-01-19__3.25.02.mov
이렇게 추가된 oopy HTML 코드 블럭은 내부의 HTML을 현재 위치에 그립니다 😎
<style>
.hello-world {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
border: 2px solid;
font-weight: bold;
color: #0356fc;
background-color: white;
border-color: currentColor;
transition: 300ms;
}
.hello-world:hover {
color: white;
background-color: #0356fc;
color: white;
}
</style>
<a class="hello-world" style="border-radius: 32px;" href="mailto:[email protected]">✉️ 이메일 보내기</a>
<style>
a.hello-world {
color: #0356fc;
}
a.hello-world:hover {
background-color: #0356fc;
color: white;
}
</style>
<a class="hello-world" style="border-radius: 32px;" href="mailto:[email protected]">✉️ 이메일 보내기</a>
약간의 코딩 지식이 필요하지만, 노션 페이지에 간단하게 원하는 부분을 만들어 삽입하실 수 있습니다 😊