NotionNext 문서

Appearance

NotionNext에서 설정으로 스타일 조정하기 ​

이전 문서: NotionNext에서 설정으로 스타일 조정하기 게시일: 2024-3-2 마지막 수정: 2024-9-29 원래 분류: ⌨ 개발 튜토리얼 태그: NotionNext 요약: React, Next.js, webpack, Tailwind CSS를 몰라도 스타일을 조정하는 방법입니다.

기술 개발 기초가 없다면 배경색, 글자 크기, 레이아웃 같은 페이지 스타일을 어떻게 커스터마이징할 수 있을까요? 이 글은 순수 CSS 방식으로 사이트를 커스터마이징하는 방법을 소개합니다. 초보자에게 비교적 친화적인 방식입니다.

머리말 ​

NotionNext는 4.2 버전 이후 Notion에서 CSS와 JS 스크립트를 직접 편집해 웹페이지 스타일을 실시간으로 수정할 수 있습니다. 이 방식은 소스 코드에 침투하지 않는 스타일 조정 방식입니다. 다시 말해 GitHub 코드를 열지 않아도 Notion 노트에 몇 가지 지시문을 작성하는 것만으로 웹페이지 효과를 조정할 수 있습니다.

효과 ​

Notion에 다음 설정을 추가했습니다.

Untitled

웹페이지를 새로고침하면 즉시 다음 효과가 나타납니다.

Untitled

단계 소개 ​

전체적으로는 두 단계만으로 스타일을 조정할 수 있습니다.

  1. 사이트에서 수정할 요소의 소스 코드를 찾고, 해당 요소의 selector를 얻습니다.

💡 selector는 선택자를 뜻합니다. CSS에 어떤 요소에 스타일을 적용할지 알려 주는, 지리 좌표와 비슷한 스크립트입니다. 예를 들어 Asia -> Korea -> Seoul -> Gangnam 같은 식의 위치 지정이 지리 선택자라면, 웹페이지에서는 페이지 태그 요소를 기준으로 #header > .clazzname > div 같은 CSS selector를 사용합니다. CSS 선택자에 관심이 있다면 다음 글을 참고하세요.

CSS 선택자 | Runoob

CSS 선택자는 스타일을 적용할 HTML 요소를 선택하는 패턴입니다. CSS1, CSS2, CSS3는 Cascading Style Sheets의 서로 다른 버전이며, 각 버전은 웹페이지 스타일 제어와 디자인을 개선하기 위한 기능을 추가했습니다.

  1. Notion 노트의 NotionConfig에 CSS 스타일을 작성합니다.

💡 NotionConfig는 Notion 노트 데이터베이스 안에서 유형이 CONFIG이고 이름이 설정 센터인 페이지를 의미합니다. 이 페이지의 표로 사이트 정보를 설정할 수 있습니다.

작업 예시 ​

이제 Hexo 테마의 홈 제목 글꼴을 키우고 빨간색으로 조정하는 과정을 보여 드리겠습니다. 다른 스타일 수정도 방식은 비슷합니다.

1. 수정할 요소의 selector 얻기 ​

  1. 브라우저에서 이미 배포된 사이트를 엽니다. 예를 들어 제 사이트 /user-guide/intro를 열었습니다.

  2. 키보드에서 F12를 눌러 개발자 도구를 엽니다. Untitled

💡 개발자 도구 오른쪽 위의 점 세 개 메뉴에서 개발자 도구를 어느 위치에 고정할지 설정할 수 있습니다. 요소를 가리지 않도록 원하는 위치에 배치하세요.

  1. 개발자 도구 왼쪽 위의 선택기를 클릭해 선택 모드로 들어갑니다. Untitled 선택기 모드에 들어가면 이 버튼이 파란색으로 바뀝니다. 그리고 마우스가 가리키는 요소가 파란색 오버레이로 강조되며, 현재 요소 정보를 보여 주는 플로팅 박스가 나타납니다. Untitled

  2. 소스 코드에서 해당 요소를 찾습니다. 대상 객체를 한 번 클릭하면 개발자 도구에서 해당 객체의 소스 코드가 자동으로 파란색 선택 상태가 됩니다. 이것이 우리가 찾으려는 코드 요소입니다. Untitled

💡 클릭하면 선택기 모드에서 빠져나옵니다.

  1. selector는 어떻게 얻나요? 파란색으로 선택된 소스 코드를 오른쪽 클릭한 뒤 Copy -> Copy selector를 차례로 클릭하면 됩니다. Untitled

💡 이때 시스템 클립보드 내용은 다음과 같습니다.

#header > div > ``[div.font-black.text-4xl.md](http://div.font-black.text-4xl.md/)``\:text-5xl.shadow-text

추가 설명: 이 명령은 지리 좌표와 비슷합니다. id가 header인 요소 아래의 div 태그 요소 아래에서, class가 [.font-black.text-4xl.md](http://div.font-black.text-4xl.md/)``\:text-5xl.shadow-text인 div 요소를 찾습니다.

2. CSS 스타일 작성 ​

  1. 목표는 글꼴을 키우고 색상을 빨간색으로 바꾸는 것입니다. CSS는 어떻게 작성할까요? Untitled 여기 예시의 요소는 p입니다. 웹페이지의 모든 p 요소를 큰 글자와 빨간색으로 조정한다는 뜻입니다. 따라서 CSS는 다음처럼 작성할 수 있습니다.
CSS
#header > div > [div.font-black.text-4xl.md](http://div.font-black.text-4xl.md/)\:text-5xl.shadow-text{
    font-size: 5rem; /* Make the font size slightly larger */
    color: red; /* Set the font color to red */
}

⚠️ CSS 코드를 입력할 때는 미리 입력기를 영어로 전환하세요. 전각 문장 부호나 공백 때문에 코드 컴파일 오류가 생기는 것을 막기 위해서입니다.

  1. Notion에서 편집합니다.

CONFIG 설정 센터를 열고 GLOBAL_CSS 설정을 추가합니다. 내용은 위 CSS 스타일입니다.

Untitled

⚠️ 주의: 설정을 활성화하려면 체크해야 합니다. 그렇지 않으면 적용되지 않습니다. 여러 스타일을 설정하려면 줄바꿈 후 계속 붙여 넣으면 됩니다.

Untitled

  1. 웹페이지를 새로고침해 효과를 미리 봅니다.

이후 필요에 따라 조금씩 디버깅하면 됩니다.

Untitled

마지막 ​

CSS로 페이지 스타일을 조정하는 소개는 여기까지입니다. NotionNext 자체는 React와 Tailwind CSS 같은 프레임워크 기술을 사용하므로, 순수 CSS 방식으로 구현할 수 있는 기능에는 한계가 있습니다. 레이아웃 조정처럼 더 깊은 수정이 필요하다면 더 전문적인 개발 작업이 필요합니다.

원문 링크 ​

https://docs.tangly1024.com/article/custom-your-style