콘텐츠 작성

마크다운 및 HTML 형식 지정

DevSite의 대부분의 콘텐츠는 마크다운으로 작성됩니다. 마크다운은 일반 텍스트의 단순성과 가독성을 위해 설계된 작성 형식입니다. DevSite는 웹에 표시하기 위해 마크다운을 HTML로 자동 변환합니다.

일반적인 HTML 요소의 Google 전용 Markdown에 대해 알아보려면 go/g3mark-cheat의 치트 시트를 사용하세요. CommonMark라고도 하는 Google의 마크다운에 관한 전체 문서는 여기에서 확인할 수 있습니다.

예를 들면 다음과 같습니다.

HTML 마크다운
<b>bold text</b>
<strong>bold text</strong>		 **bold text**
<i>italic text</i>
<em>italic text</em>		 *italic text*
<h2>Heading 2</h2>
<h3>Heading 3</h3>		 ## Heading 2
### Heading 3
<a href="url.com">Link</a> [Link](url.com)
<p>paragraph</p> Paragraph
<ol>
  <li>Ordered list first item</li>
  <li>Second item</li>
</ol>		 1. Ordered list first item
1. Second item
1. Third item
<ul>
<li>Unordered list first item</li>
  <ul>
    <li>Nested list item</li>
  </ul>
<li>Second item</li>
</ul>		 * Unordered list first item
    * Nested item (indent 4-spaces)
* Second item

마크다운 대신 HTML을 사용해야 하는 경우

다음과 같은 항목은 마크다운을 사용하여 작성하지 않습니다.

  • 포함 파일: 모든 포함 파일은 HTML 파일이어야 하므로 마크다운으로 작성된 요소는 포함하면 안 됩니다. 포함 파일 만들기에 관한 안내는 페이지 간 콘텐츠 재사용을 참고하세요.

  • 표: 마크다운 표는 형식을 지정하고 유지하기 어려우므로 마크다운 파일에서도 표에 HTML을 사용합니다.

  • 이미지: 이미지에 HTML을 사용하면 이미지 형식과 배치에 더 많은 유연성을 부여할 수 있습니다. 이미지는 DevSite 게시 가이드를 참고하세요.

  • 지피: Devsite에서 확장 가능한 위젯으로 알려진 지피는 HTML로 되어 있어야 하며 <div> 태그로 래핑되어야 합니다.

일반적인 콘텐츠 형식

동일한 탭에서 링크를 열지 새 탭에서 링크를 열지 결정할 때는 링크 가이드라인을 따르세요. 새 탭에서 링크를 열어야 하는 경우 다음과 같은 방법으로 링크를 서식 지정할 수 있습니다.

마크다운

[Accessible content](/style/accessibility){:target="_blank"}

HTML

<a href="/style/accessibility" target="_blank">Accessible content</a>

테이블

Devsite에서 제공하는 표 유형과 해당 HTML은 DevSite 게시 가이드의 표를 참고하세요.

도움말:

  • 테이블에 테두리가 없어야 하는 경우 class="columns"를 사용하세요.

  • 표에 패딩과 구분선이 필요한 경우 (예: 이 페이지) class="columns extra-padding"를 사용하고 콘텐츠 행 사이의 별도 행에 <hr> 태그를 사용합니다.

확장 가능한 섹션

Workspace에서는 arrow-icon 클래스를 사용하여 zippy의 스타일을 지정합니다. 다음은 Workspace의 지피 (확장 가능한 위젯)의 예입니다.

<div>
  <devsite-expandable class="arrow-icon" id="UNIQUE_ZIPPY_ID">
    <h4 class="showalways">ZIPPY_HEADING</h4>
    <div>
      YOUR_CONTENT
    </div>
  </devsite-expandable>
</div>

이 샘플을 사용하려면 다음 변수를 바꿉니다.

  • UNIQUE_ZIPPY_ID: zippy를 직접 가리킬 수 있도록 설명이 포함된 고유 ID를 입력합니다(예: direct-admin-access).
  • ZIPPY_HEADING: 사용자가 지피를 펼치기 전에 표시해야 하는 텍스트를 입력합니다.
  • YOUR_CONTENT: 지피가 펼쳐질 때 사용자에게 표시될 콘텐츠를 입력합니다.

DevSite의 확장 가능한 위젯에 관한 자세한 내용은 DevSite 게시 가이드의 위젯: 확장 가능을 참고하세요.

공유 콘텐츠 포함

여러 페이지에서 콘텐츠를 재사용하려면 Composer에서 여러 도움말에 스니펫을 사용하는 DevSite 버전인 인클루드를 사용하면 됩니다.

콘텐츠에서 include 파일을 만들고 사용하는 방법에 관한 안내는 페이지 간 콘텐츠 재사용을 참고하세요.

제목에 맞춤 앵커 추가

DevSite는 모든 헤더에 HTML ID 속성을 만듭니다. 제목이 변경될 경우 일관성을 유지하려면 제목 텍스트 옆에 {:#your-id}를 추가하여 제목에 맞춤 앵커 ID를 추가하면 됩니다. 예를 들면 다음과 같습니다.

## Apply filters to your search results {:#apply-filters}

도움말: 파일의 모든 제목에 맞춤 앵커 ID를 자동으로 만들려면 Command (\⌘) + H (Windows의 경우 Ctrl + H)를 누릅니다. 기존 맞춤 앵커 ID는 변경되지 않습니다.

자세한 내용은 헤더 ID에 관한 DevSite 게시 가이드를 참고하세요.