DevSite 페이지의 최상위 제목은 <h1>이어야 합니다. 시각적이지 않은 브라우저가 혼동되지 않도록 페이지 본문에 다른 <h1>가 포함되어서는 안 됩니다.
nbgenerate 도구는 DevSite HTML 및 Markdown 콘텐츠와 템플릿을 Colab 호환 Jupyter 노트북으로 변환합니다.
크기
제목 1
제목 2
제목 3
제목 4
제목 5
제목 6
HTML
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
마크다운
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
목차
DevSite에서 <h2> 및 <h3>는 '이 페이지' 목차 (ToC)에 자동으로 추가됩니다.
목차에서 제목 숨기기
제목이 추가되지 않도록 하려면 (예: 위 섹션의 '제목 2' 및 '제목 3'은 목차에 표시되지 않음) class="hide-from-toc"를 적용합니다.
제목 2
제목 3
HTML
<h2 class="hide-from-toc">Heading 2</h2>
<h3 class="hide-from-toc">Heading 3</h3>
마크다운
## Heading 2 {:.hide-from-toc}
### Heading 3 {:.hide-from-toc}
목차의 제목 텍스트 맞춤설정
목차의 텍스트가 실제 제목과 다르게 표시되도록 하려면 (예: 이 섹션) 제목에 data-text 속성을 설정하세요.
제목 2
HTML
<h2 data-text="Custom text for the ToC">Heading 2</h2>
마크다운
## Heading 2 {: data-text='Custom text for the ToC'}
목차의 표 내에 제목 포함
테이블 헤더 (<th>) 내에 <h2> 또는 <h3>를 배치하여 테이블을 목차에 강제로 추가할 수도 있습니다. 표 헤더 내에서 <h2> 및 <h3>는 일반 텍스트와 같은 스타일이므로 독자는 구분할 수 없습니다.
클릭하여 복사 링크
문서 페이지 (대부분의 방문 페이지와 같은 '전체 너비' 페이지가 아님)에서는 <h1> 이외의 제목에도 링크를 복사하는 버튼이 표시되며, 이 버튼은 제목 위로 마우스를 가져가야만 표시됩니다.
특정 제목에 이 버튼을 사용 중지하려면 제목에 class="no-link"를 적용합니다.
제목 4
제목 5
HTML
<h4 class="no-link">Heading 4</h4>
<h5 class="no-link">Heading 5</h5>
마크다운
## Heading 4 {:.no-link}
### Heading 5 {:.no-link}
링크 버튼이 표시되지 않는 제목 (예: <h1> 또는 전체 너비 페이지의 제목)에 링크 버튼을 강제로 표시하려면 제목에 class="add-link"를 추가합니다.
제목 1
HTML
<h1 class="add-link">Heading 1</h1>
마크다운
# Heading 1 {:.add-link}
번호 매기기 제목
복잡한 콘텐츠가 포함된 섹션을 여러 단계의 프로세스에서 고유한 단계로 지정하기 위해 <h2> 제목 앞에 순차 번호를 추가하려면 각 제목에 번호가 지정된 클래스를 추가합니다.
첫 번째 번호가 매겨진 제목
단락, 목록, 표, 이미지, 동영상, 위젯으로 구성된 복잡한 콘텐츠입니다.
번호가 매겨진 두 번째 제목
단락, 목록, 표, 이미지, 동영상, 위젯으로 구성된 복잡한 콘텐츠입니다.
번호가 매겨진 세 번째 제목
단락, 목록, 표, 이미지, 동영상, 위젯으로 구성된 복잡한 콘텐츠입니다.
HTML
<h2 class="numbered">First numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Second numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h2 class="numbered">Third numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
마크다운
## First numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Second numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
## Third numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
번호가 매겨진 부제목
<h2> 제목 뒤에 오는 <h3> 제목 앞에 순차 번호를 추가하려면 각 <h3> 제목에 번호가 지정된 클래스를 추가합니다.
HTML
<h2 class="numbered">Numbered heading</h2>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
<h3 class="numbered">Numbered subheading</h3>
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
마크다운
## Numbered heading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
### Numbered subheading {:.numbered}
Complex content composed of paragraphs, lists, tables, images, videos, widgets.
번호 매기기 제목
단락, 목록, 표, 이미지, 동영상, 위젯으로 구성된 복잡한 콘텐츠입니다.
번호가 매겨진 부제목
단락, 목록, 표, 이미지, 동영상, 위젯으로 구성된 복잡한 콘텐츠입니다.
번호가 매겨진 부제목
단락, 목록, 표, 이미지, 동영상, 위젯으로 구성된 복잡한 콘텐츠입니다.
번호가 매겨진 부제목
단락, 목록, 표, 이미지, 동영상, 위젯으로 구성된 복잡한 콘텐츠입니다.