메인 컨텐츠로 이동
Version: 2.0.0-beta.5 🚧

스타일과 레이아웃

전통적인 CSS#

@docusaurus/preset-classic을 사용하는 경우 CSS 파일(/src/css/custom.css)을 직접 만들어서 옵션 형태로 프리셋으로 설정하고 사이트 내에서 사용할 수 있습니다.

docusaurus.config.js
module.exports = {  // ...  presets: [    [      '@docusaurus/preset-classic',      {        theme: {          customCss: [require.resolve('./src/css/custom.css')],        },      },    ],  ],};

작성한 CSS는 사이트 전체에 반영되며 문자열 리터럴을 사용해 직접 참조할 수 있습니다. 이런 방식은 CSS를 사용하는 전통적인 방식이며 사용자 정의가 별로 없는 작은 규모의 웹 사이트에 적절한 방식입니다.

인피마(Infima)를 사용해 사이트에 스타일 적용하기#

@docusaurus/preset-classic은 인피마(Infima)를 기본 스타일 프레임워크로 사용합니다. 인피마는 콘텐츠 중심 웹 사이트(블로그, 문서, 랜딩 페이지)에 적합한 유연한 레이아웃과 공통 UI 구성 요소에 대한 스타일을 지원합니다. 좀 더 자세한 사항은 인피마 웹 사이트를 참고하세요.

도큐사우루스 2 프로젝트는 init 처리 시 기본 인피마 스타일시트와 기본 스타일 속성을 적용해 웹 사이트를 생성합니다. 스타일 수정이 필요한 경우 /src/css/custom.css 파일을 편집할 수 있습니다.

/src/css/custom.css
/** * 기본 인피마 변수 설정을 재설정할 수 있습니다. * 참고: 아래 목록이 --ifm- 변수의 전체 목록은 아닙니다. */:root {  --ifm-color-primary: #25c2a0;  --ifm-color-primary-dark: rgb(33, 175, 144);  --ifm-color-primary-darker: rgb(31, 165, 136);  --ifm-color-primary-darkest: rgb(26, 136, 112);  --ifm-color-primary-light: rgb(70, 203, 174);  --ifm-color-primary-lighter: rgb(102, 212, 189);  --ifm-color-primary-lightest: rgb(146, 224, 208);  --ifm-code-font-size: 95%;}

인피마에서는 각 색상에 7가지 음영 단계를 적용합니다. 여러분이 원하는 색상의 음영 단계를 선택하려고 할 때 ColorBox를 사용하면 좀 더 쉽게 색상을 선택할 수 있습니다.

아니면 다른 도구를 사용해 웹 사이트에 필요한 음영 색상을 생성하고 이를 복사해 /src/css/custom.css 파일에 직접 반영할 수 있습니다.

CSS Variable NameHexAdjustment
--ifm-color-primary-lightest#80aaef
--ifm-color-primary-lighter#5a91ea
--ifm-color-primary-light#4e89e8
--ifm-color-primary#3578e50
--ifm-color-primary-dark#1d68e1
--ifm-color-primary-darker#1b62d4
--ifm-color-primary-darkest#1751af

Replace the variables in src/css/custom.css with these new variables.

--ifm-color-primary: #3578e5;--ifm-color-primary-dark: #1d68e1;--ifm-color-primary-darker: #1b62d4;--ifm-color-primary-darkest: #1751af;--ifm-color-primary-light: #4e89e8;--ifm-color-primary-lighter: #5a91ea;--ifm-color-primary-lightest: #80aaef;

어두운 모드(Dark Mode)#

src/css/custom.css 파일에 어두운 모드를 적용하기 위한 인피마 변수 설정을 아래와 같이 추가할 수 있습니다.

/src/css/custom.css
html[data-theme='dark'] {  --ifm-color-primary: #4e89e8;  --ifm-color-primary-dark: #5a91ea;  /* 원하는 색상으로 설정합니다. */}

스타일 접근 방식#

도큐사우루스 사이트는 단일 페이지 리액트 애플리케이션입니다. 여러분은 리액트 앱에 스타일을 적용하는 것처럼 도큐사우루스 사이트의 스타일을 지정할 수 있습니다.

기본 설정과 만들고자 하는 웹 사이트 유형에 따라 몇 가지 접근 방식과 프레임워크가 있습니다. 사용자와 상호 작용이 필요하고 웹 앱처럼 동작하는 웹 사이트는 스타일 설정을 컴포넌트와 함께 배치하는 현대적인 스타일 접근 방식을 활용할 수 있습니다. 컴포넌트에 스타일을 적용하는 방식은 컴포넌트를 수정하거나 다른 컴포넌트로 대체하는 경우 특히 유용합니다.

전역 스타일#

이 방식은 대부분의 개발자(프론트엔드 개발자가 아니더라도)에게 가장 익숙한 전통적인 스타일 적용 방식입니다.

@docusaurus/preset-classic을 사용하고 /src/css/custom.css 파일이 프리셋 설정에 반영된 경우에는 해당 파일에서 설정한 스타일을 사이트 내에서 사용할 수 있습니다.

/src/css/custom.css
.purple-text {  color: rebeccapurple;}
function MyComponent() {  return (    <main>      <h1 className="purple-text">Purple Heading!</h1>    </main>  );}

테마 클래스 이름#

개발자가 도큐사우루스에서 전역적으로 페이지의 스타일 레이아웃을 처리할 수 있도록 사전 정의된 CSS 클래스 이름을 제공합니다. 사용자 지정 CSS가 적용되는 모든 테마에서 안정적으로 클래스 이름을 사용할 수 있습니다.

export const ThemeClassNames = {  page: {    blogListPage: 'blog-list-page',    blogPostPage: 'blog-post-page',    blogTagsListPage: 'blog-tags-list-page',    blogTagsPostPage: 'blog-tags-post-page',    docPage: 'doc-page',    mdxPage: 'mdx-page',  },  wrapper: {    main: 'main-wrapper',    blogPages: 'blog-wrapper',    docPages: 'docs-wrapper',    mdxPages: 'mdx-wrapper',  },};

CSS 모듈#

CSS 모듈을 사용해 스타일을 적용하려면 스타일 시트 파일명을 .module.css 확장자로 설정해야 합니다(welcome.module.css). 웹팩에서는 해당 확장자로 설정한 CSS 파일을 로드하고 여러분은 가져온 CSS 모듈에서 클래스 이름(일반 문자열을 사용하지 않고)을 참조해야 합니다. 리액트 앱 만들기 가이드에서 사용하는 방법과 비슷한 명명 규칙입니다.

styles.module.css
.main {  padding: 12px;}
.heading {  font-weight: bold;}
.contents {  color: #ccc;}
import styles from './styles.module.css';
function MyComponent() {  return (    <main className={styles.main}>      <h1 className={styles.heading}>Hello!</h1>      <article className={styles.contents}>Lorem Ipsum</article>    </main>  );}

클래스 이름은 웹팩에서 빌드 시 전역에서 유일한 클래스 이름으로 처리됩니다.

자바스크립트로 CSS 작성하기#

caution

Lifecycle API는 아직 개발 진행중입니다. Welcoming PRs.

Sass/SCSS#

CSS 전처리를 위해 Sass/SCSS를 사용하고 싶다면 비공식 플러그인 docusaurus-plugin-sass를 설치해야 합니다. 해당 플러그인은 전역 스타일이나 CSS 모듈 접근 모두 잘 동작합니다.

  1. docusaurus-plugin-sass를 설치합니다.
npm install --save docusaurus-plugin-sass sass
  1. 플러그인 항목을 docusaurus.config.js 파일에 추가 설정합니다.
docusaurus.config.js
module.exports = {  // ...  plugins: ['docusaurus-plugin-sass'],  // ...};
  1. Sass/SCSS에서 스타일시트를 작성하고 가져옵니다.

Sass/SCSS을 사용해 전역 스타일 설정하기#

@docusaurus/preset-classic의 customCss 속성에서 Sass/SCSS 파일을 설정할 수 있습니다.

docusaurus.config.js
module.exports = {  presets: [    [      '@docusaurus/preset-classic',      {        // ...        theme: {          customCss: [require.resolve('./src/css/custom.scss')],        },        // ...      },    ],  ],};

Sass/SCSS을 모듈로 사용하기#

스타일 시트 파일명을 .css 확장자 대신 .module.scss 확장자로 설정(welcome.module.scss)합니다. 웹팩에서 sass-loader를 사용해 여러분이 만든 스타일 시트를 전처리하고 CSS 모듈처럼 파일을 로드합니다.

styles.module.scss
.main {  padding: 12px;
  article {    color: #ccc;  }}
import styles from './styles.module.scss';
function MyComponent() {  return (    <main className={styles.main}>      <article>Lorem Ipsum</article>    </main>  );}