<!DOCTYPE html><htmllang="ko"><head><metacharSet="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><title>Pages and Styles · Docusaurus</title><metaname="viewport"content="width=device-width"/><metaname="generator"content="Docusaurus"/><metaname="description"content="Docusaurus provides support for writing pages as React components inside the `website/pages` directory which will share the same header, footer, and styles as the rest of the site."/><metaname="docsearch:version"content="1.13.0"/><metaname="docsearch:language"content="ko"/><metaproperty="og:title"content="Pages and Styles · Docusaurus"/><metaproperty="og:type"content="website"/><metaproperty="og:url"content="https://docusaurus.io/"/><metaproperty="og:description"content="Docusaurus provides support for writing pages as React components inside the `website/pages` directory which will share the same header, footer, and styles as the rest of the site."/><metaproperty="og:image"content="https://docusaurus.io/img/docusaurus.png"/><metaname="twitter:card"content="summary"/><metaname="twitter:image"content="https://docusaurus.io/img/docusaurus.png"/><linkrel="shortcut icon"href="/img/docusaurus.ico"/><linkrel="stylesheet"href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><linkrel="stylesheet"href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><linkrel="alternate"type="application/atom+xml"href="https://docusaurus.io/blog/atom.xml"title="Docusaurus Blog ATOM Feed"/><linkrel="alternate"type="application/rss+xml"href="https://docusaurus.io/blog/feed.xml"title="Docusaurus Blog RSS Feed"/><script>
</script></nav></div><divclass="container mainContainer"><divclass="wrapper"><divclass="post"><headerclass="postHeader"><aclass="edit-page-link button"href="https://crowdin.com/project/docusaurus/ko"target="_blank"rel="noreferrer noopener">Translate</a><h1class="postHeaderTitle">Pages and Styles</h1></header><article><div><span><p>Docusaurus provides support for writing pages as React components inside the <code>website/pages</code> directory which will share the same header, footer, and styles as the rest of the site.</p>
<p>Docusaurus provides your <ahref="/docs/ko/site-config">siteConfig.js</a> as a <code>config</code> props. Hence, you can access <code>baseUrl</code> or <code>title</code> through this props.</p>
<p>Any <code>.js</code> files in <code>website/pages</code> will be rendered to static HTML using the path of the file after <code>pages</code>. Files in <code>website/pages/en</code> will also get copied out into <code>pages</code> and will OVERRIDE any files of the same name in <code>pages</code>. For example, the page for the <code>website/pages/en/help.js</code> file will be found at the URL <code>${baseUrl}en/help.js</code> as well as the URL <code>${baseUrl}help.js</code>, where <code>${baseUrl}</code> is the <code>baseUrl</code> fieldset in your <ahref="/docs/ko/site-config">siteConfig.js file</a>.</p>
<p>By default, the title of your page is <code><title> • <tagline></code> where <code>title</code> and <code>tagline</code> fields are set in <ahref="/docs/ko/site-config"><code>siteConfig.js</code></a>. You can exclude the tagline in the title by setting <code>disableTitleTagline</code> to <code>true</code>. If you want to set a specific title for your custom pages, add a <code>title</code> class property on your exported React component.</p>
<p>By default, the description your page is <code>tagline</code> set in <ahref="/docs/ko/site-config"><code>siteConfig.js</code></a>. If you want to set a specific description for your custom pages, add a <code>description</code> class property on your exported React component.</p>
<p>Docusaurus provides a few useful React components for users to write their own pages, found in the <code>CompLibrary</code> module. This module is provided as part of Docusaurus in <code>node_modules/docusaurus</code>, so to access it, pages in the <code>pages</code> directory are temporarily copied into <code>node_modules/docusaurus</code> when rendering to static HTML. As seen in the example files, this means that a user page at <code>pages/en/index.js</code> uses a require path to <code>'../../core/CompLibrary.js'</code> to import the provided components.</p>
<p>What this means to the user is that if you wish to use the <code>CompLibrary</code> module, make sure the require path is set correctly. For example, a page at <code>page/mypage.js</code> would use a path <code>'../core/CompLibrary.js'</code>.</p>
<p>If you wish to use your own components inside the website directory, use <code>process.cwd()</code> which will refer to the <code>website</code> directory to construct require paths. For example, if you add a component to <code>website/core/mycomponent.js</code>, you can use the require path, <code>'process.cwd() + /core/mycomponent.js'</code>.</p>
<tr><td><code>padding</code></td><td>Array of <code>'all'</code>, <code>'bottom'</code>, <code>'left'</code>, <code>'right'</code>, <code>'top'</code></td><td><code>[]</code></td><td>Positions of the padding.</td></tr>
<tr><td><code>background</code></td><td>One of <code>'dark'</code>, <code>'highlight'</code>, <code>'light'</code></td><td><code>null</code></td><td>Background styling of the element.</td></tr>
<tr><td><code>className</code></td><td>String</td><td>-</td><td>Custom class to add to the element.</td></tr>
<tr><td><code>align</code></td><td>One of <code>'left'</code>, <code>'center'</code>, <code>'right'</code></td><td><code>'left'</code></td><td>Text alignment of content.</td></tr>
<tr><td><code>layout</code></td><td>One of <code>'twoColumn'</code>, <code>'threeColumn'</code>, <code>'fourColumn'</code></td><td><code>'twoColumn'</code></td><td>Number of column sections in the <code>GridBlock</code>.</td></tr>
<tr><td><code>className</code></td><td>String</td><td>-</td><td>Custom class to add to the element.</td></tr>
<tr><td><code>contents</code></td><td>Array of content objects</td><td><code>[]</code></td><td>Contents of each section of the GridBlock. Refer to the next table for the fields available on a content object.</td></tr>
<tr><td><code>title</code></td><td>String</td><td>-</td><td>The display title of this section, which is parsed using Markdown</td></tr>
<tr><td><code>content</code></td><td>String</td><td>-</td><td>The text of this section, which is parsed using Markdown</td></tr>
<tr><td><code>image</code></td><td>String</td><td>-</td><td>The path of the display image</td></tr>
<tr><td><code>imageAlt</code></td><td>String</td><td>-</td><td>The text that will be shown in case the image is not available</td></tr>
<tr><td><code>imageAlign</code></td><td>One of <code>'top'</code>, <code>'left'</code>, <code>'bottom'</code>, <code>'right'</code></td><td><code>'left'</code></td><td>Image alignment relative to the text</td></tr>
<tr><td><code>imageLink</code></td><td>String</td><td>-</td><td>Link destination from clicking the image</td></tr>
content<spanclass="token punctuation">:</span><spanclass="token string">'Questions gathered from the community'</span><spanclass="token punctuation">,</span>
content<spanclass="token punctuation">:</span><spanclass="token string">'Lots of documentation is on this site'</span><spanclass="token punctuation">,</span>
<p>More examples of how these components are used can be found in the <ahref="/docs/ko/site-preparation">generated example files</a> as well as in Docusaurus' own repository for its website set-up.</p>
<p>When translations are enabled, any pages inside <code>website/pages/en</code> will be translated for all enabled languages. URLs for non-English pages will use their language tags as specified in the <code>languages.js</code> file. E.g. The URL for a French page of <code>website/pages/en/help.js</code> would be found at <code>${baseUrl}fr/help.html</code>.</p>
<p>When writing pages that you wish to translate, wrap any strings to be translated inside a <code><translate></code> tag. 아래와 같이 적용할 수 있습니다.</p>
<spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>translate</span><spanclass="token attr-name">desc</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>Footer link to page referring to community GitHub and Slack<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<p>Note that this path is valid for files inside <code>pages/en</code> and should be adjusted accordingly if files are in different locations, as discussed <ahref="#page-require-paths">above</a>.</p>
<p>Static assets should be placed into the <code>website/static</code> directory. They can be accessed by their paths, excluding <code>static</code>. For example, if the site's <code>baseUrl</code> is <code>/docusaurus/</code>, an image in <code>website/static/img/logo.png</code> is available at <code>/docusaurus/img/logo.png</code>.</p>
<p>You should configure your site's primary, secondary, and code block colors using the <code>colors</code> field in <code>siteConfig</code> as specified <ahref="/docs/ko/site-config">here</a>. You can also configure other colors in the same way as described in the <code>siteConfig</code> doc.</p>
<p>There are several ways to access the default styles provided for your site. If you have started developing your website and executed the <code>docusaurus-init</code> or <code>yarn install</code> command, your default styles can be found at <code>website/node_modules/docusaurus/lib/static/css/main.css</code>. Alternatively, the <code>main.css</code> file may be inspected directly at the <ahref="https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-1.x/lib/static/css/main.css">Docusarus GitHub repository</a>.</p>
<p>You can provide your own custom styles by adding them anywhere in the <code>website/static</code> directory. Any <code>.css</code> files you provide in the <code>static</code> directory will get concatenated to the end of Docusaurus' provided styles, allowing you to add to or override Docusaurus default styles as you wish.</p>
<p>An easy way to figure out what classes you wish to override or add to is to <ahref="/docs/ko/commands">start your server locally</a> and use your browser's inspect element tool.</p>
</span></div></article></div><divclass="docs-prevnext"><aclass="docs-prev button"href="/docs/ko/doc-markdown"><spanclass="arrow-prev">← </span><span>Markdown 기능</span></a><aclass="docs-next button"href="/docs/ko/site-config"><spanclass="function-name-prevnext">siteConfig.js</span><spanclass="arrow-next"> →</span></a></div></div></div><navclass="onPageNav"><ulclass="toc-headings"><li><ahref="#provided-props">Provided Props</a></li><li><ahref="#urls-for-pages">URLs for Pages</a></li><li><ahref="#titles-for-pages">Titles for Pages</a></li><li><ahref="#description-for-pages">Description for Pages</a></li><li><ahref="#page-require-paths">Page Require Paths</a></li><li><ahref="#provided-components">Provided Components</a><ulclass="toc-headings"><li><ahref="#complibrarymarkdownblock"><code>CompLibrary.MarkdownBlock</code></a></li><li><ahref="#complibrarycontainer"><code>CompLibrary.Container</code></a></li><li><ahref="#complibrarygridblock"><code>CompLibrary.GridBlock</code></a></li></ul></li><li><ahref="#translating-strings">Translating Strings</a></li><li><ahref="#using-static-assets">Using Static Assets</a></li><li><ahref="#styles">Styles</a></li></ul></nav></div><footerclass="nav-footer"id="footer"><sectionclass="sitemap"><ahref="/"class="nav-home"><imgsrc="/img/docusaurus_monochrome.svg"alt="Docusaurus"width="66"height="58"/></a><divclass="footerSection"><h5>Docs</h5><ahref="
