레이블이 노션에서는 HTML 코드를 직접 삽입인 게시물을 표시합니다. 모든 게시물 표시
레이블이 노션에서는 HTML 코드를 직접 삽입인 게시물을 표시합니다. 모든 게시물 표시

2024년 9월 22일 일요일

노션에서는 HTML 코드를 직접 삽입하는 방법

By 

노션에서는 HTML 코드를 직접 삽입하는 방법

노션에서는 HTML 코드를 직접 삽입하여 웹 페이지를 만들 수는 없지만, 임베드 블록을 사용하여 외부 HTML 콘텐츠를 포함할 수 있습니다. 이를 위해 HTML 파일을 먼저 웹 호스팅 서비스에 업로드한 다음, 노션에서 해당 URL을 임베드 블록으로 추가하는 방법을 사용할 수 있습니다. 다음은 그 과정입니다:

1. HTML 파일 웹 호스팅

HTML 파일을 웹에 업로드하려면 GitHub Pages, Netlify, Vercel 등의 무료 웹 호스팅 서비스를 사용할 수 있습니다. 여기서는 GitHub Pages를 예로 들어 설명하겠습니다.

  1. GitHub에 가입 및 리포지토리 생성
    • GitHub에 가입하고 로그인합니다.
    • 새 리포지토리를 생성합니다. (리포지토리 이름은 username.github.io 형식으로 설정합니다.)


  1. HTML 파일 업로드
    • 리포지토리 내에서 Add file 버튼을 클릭하고 Create new file을 선택합니다.
    • 파일 이름을 index.html로 지정하고, 작성한 HTML 코드를 붙여넣습니다.
    • Commit new file을 클릭하여 파일을 저장합니다.
  2. GitHub Pages 활성화
    • 리포지토리 설정(Settings)으로 이동합니다.
    • Pages 탭에서 Branch를 main으로 설정하고, /root를 선택합니다.
    • Save 버튼을 클릭하면 리포지토리가 GitHub Pages를 통해 호스팅됩니다.
    • 몇 분 후 https://username.github.io 주소에서 웹 페이지를 확인할 수 있습니다.

2. 노션에서 HTML 웹 페이지 임베드

HTML 파일이 호스팅된 URL을 노션 페이지에 임베드하는 방법입니다.

  1. 노션 페이지 열기
    • 노션에서 원하는 페이지를 엽니다.
  2. 임베드 블록 추가
    • /를 입력하여 블록 추가 메뉴를 엽니다.
    • embed를 검색하여 선택합니다.
  3. URL 입력

이렇게 하면 노션 페이지 내에 HTML 웹 페이지가 임베드됩니다.

Share:  Facebook Twitter Google+
Read More