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

Notion 문서 어디에서든 원하는 HTML을 적용해 보세요!

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>

어떻게 만드나요?

1. 코드 블럭을 아무 곳에나 추가하세요.
2. 언어를 HTML로 설정하세요. (마우스를 올리면 좌측 상단에 언어 선택이 있어요!)
3. 캡션에 oopy를 적어주세요. (공백이 있으면 안됩니다!)

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>

약간의 코딩 지식이 필요하지만, 노션 페이지에 간단하게 원하는 부분을 만들어 삽입하실 수 있습니다 😊