03. 마크다운 KGOV 웹 렌더링
공문서 스타일시트
HTML 제목 태그와 목록 태그를 공문서 스타일로 렌더링 하는 스타일시트(CSS)
/* 헤드라인M은 G마켓산스, 휴먼명조는 나눔명조로 갈음함 */
@font-face {
font-family: 'GMarketSans';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
font-weight: 700;
font-display: swap;
}
@import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
/* 출력용 */
/* 15pt=21px, 16pt=22px */
.kgov_p h1 { font-size: 22px; font-face: GMarketSans; font-weight: 700; }
.kgov_p ul { list-style-type: '□ '; padding-left: 1em; font-size: 21px; font-family: 'Nanum Myeongjo', serif; }
.kgov_p ul ul { list-style-type: '○ '; }
.kgov_p ul ul ul { list-style-type: '- '; }
.kgov_p ul ul ul ul { list-style-type: '⋅ '; }
/* 화면표시용 */
.kgov_s h1 { }
.kgov_s ul { list-style-type: '□ '; padding-left: 1em; }
.kgov_s ul ul { list-style-type: '○ '; }
.kgov_s ul ul ul { list-style-type: '- '; }
.kgov_s ul ul ul ul { list-style-type: '⋅ '; }
렌더링 예제
| 마크다운 | HTML 코드 | HTML 표시 (인쇄용) | HTML 표시 (화면표시용) |
|---|---|---|---|
# 제목 1단계
* 목록 1단계
- 목록 2단계
+ 목록 3단계
* 목록 4단계
마크다운 목록에서 | <div class='kgov'>
<h1>제목 1단계</h1>
<ul><li>목록 1단계
<ul><li>목록 2단계
<ul><li>목록 3단계
<ul><li>목록 4단계
</li></ul>
</li></ul>
</li></ul>
</li></ul>
</div>
HTML 코드에는 서체, 크기 등 문서에 선언한 스타일시트가 일괄 적용됨 | 제목 1단계
출력물에 바로 활용할 수 있는 | 제목 1단계
모니터에서 작업할 때 사용 |