CSS 구조 및 스타일링 가이드

Notionpresso은 유연하고 확장 가능한 CSS 구조를 제공합니다. 이 섹션에서는 CSS 변수 시스템, 주요 스타일링 포인트, 그리고 Indent 적용 원리에 대해 설명합니다.

CSS 변수 시스템

Notionpresso은 CSS 변수를 사용하여 전역 스타일을 정의합니다. 이를 통해 테마 변경이나 전체적인 스타일 조정을 쉽게 할 수 있습니다.

주요 CSS 변수들은 다음과 같습니다:

.notion {
  --notion-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
    "Segoe UI Emoji", "Segoe UI Symbol";
  --notion-max-width: 720px;
  --notion-header-height: 45px;
  --notion-indent: 27px;

  /* 색상 변수 */
  --fg-color: rgb(55, 53, 47);
  --fg-color-0: rgba(55, 53, 47, 0.09);
  --fg-color-1: rgba(55, 53, 47, 0.16);
  --fg-color-2: rgba(55, 53, 47, 0.4);
  --fg-color-3: rgba(55, 53, 47, 0.6);
  --fg-color-4: #000;
  --fg-color-5: rgb(233, 233, 231);
  --fg-color-6: rgba(55, 53, 47, 0.8);
  --fg-color-icon: var(--fg-color);

  --bg-color: #fff;
  --bg-color-0: rgba(135, 131, 120, 0.15);
  --bg-color-1: rgb(247, 246, 243);
  --bg-color-2: rgba(135, 131, 120, 0.15);

  --select-color-0: rgb(46, 170, 220);
  --select-color-1: rgba(35, 131, 226, 0.28);
  --select-color-2: #d9eff8;
}

이러한 변수들을 재정의하여 전체적인 스타일을 쉽게 변경할 수 있습니다.

주요 스타일링 포인트

클래스 네이밍 규칙: 모든 클래스는 notion-으로 시작합니다. 이는 스타일 충돌을 방지합니다.

예: .notion-block, .notion-h1, .notion-toggle
블록 레벨 스타일: 모든 블록 레벨 요소에는 notion-block 클래스가 적용됩니다.
```
.notion-block {
  display: block;
}
```
색상 적용: 색상은 CSS 변수를 통해 적용됩니다.
```
.notion-text {
  color: var(--fg-color);
}
```

반응형 디자인: --notion-max-width 변수를 활용하여 반응형 레이아웃을 구현합니다.

.notion-body {
  width: 100%;
  max-width: var(--notion-max-width);
  margin: 0 auto;
}

Indent 적용 원리

Notionpresso은 재귀적인 구조를 통해 들여쓰기를 구현합니다. 이는 CSS에서 다음과 같이 처리됩니다:

.notion-block > .notion-block {
  margin-left: var(--notion-indent);
}

.notion-block > .notion-display-contents > .notion-block {
  margin-left: var(--notion-indent);
}

이 CSS 규칙은 중첩된 블록에 대해 자동으로 들여쓰기를 적용합니다. --notion-indent 변수를 조정하여 들여쓰기 정도를 쉽게 변경할 수 있습니다.

다크 모드 및 커스텀 테마

Notionpresso은 기본적으로 다크 모드를 지원합니다. 다크 모드는 다음과 같이 구현되어 있습니다:

[data-theme="dark"] .notion {
  --fg-color: rgba(255, 255, 255, 0.9);
  --bg-color: #2f3437;
  /* 기타 다크 모드 관련 변수들... */
}

또한, 커스텀 테마를 쉽게 적용할 수 있습니다. data-theme 속성을 사용하여 원하는 테마를 적용할 수 있습니다:

<Notion data-theme="custom">{/* Notion 컨텐츠 */}</Notion>

그리고 CSS에서 다음과 같이 스타일을 정의할 수 있습니다:

.notion[data-theme="custom"] {
  --fg-color: #333;
  --bg-color: #f4f4f4;
  /* 기타 커스텀 테마 관련 변수들... */
}

이 방식을 사용하면 선택자 우선순위를 활용하여 기본 스타일을 쉽게 오버라이딩할 수 있습니다.

스타일 커스터마이징 예시

글로벌 폰트 변경:

.notion[data-theme="custom"] {
  --notion-font: "Roboto", sans-serif;
}

헤딩 스타일 변경:

.notion[data-theme="custom"] .notion-h1 {
  font-size: 2.5em;
  color: var(--select-color-0);
  border-bottom: 2px solid var(--fg-color-1);
}

들여쓰기 조정:

.notion[data-theme="custom"] {
  --notion-indent: 20px;
}

다크 모드 구현:

[data-theme="dark"] .notion[data-theme="custom"] {
  --fg-color: rgba(255, 255, 255, 0.9);
  --bg-color: #2f3437;
  /* 다른 색상 변수들도 적절히 조정 */
}

이러한 CSS 구조와 스타일링 가이드를 따르면, Notionpresso을 사용하여 일관성 있고 유지보수가 쉬운 스타일을 구현할 수 있습니다. 또한, 필요에 따라 세부적인 커스터마이징도 가능합니다.