by
Aug 01. 2024
전자책 출판을 위한 VitePress - 템플릿 (1)
「글을 긷자」 템플릿을 활용해 마크다운 하기
VitePress에는 자체 문법을 활용해 정해진 템플릿을 이용할 수 있는 방법이 제공됩니다. `:::` 연이은 콜론 세 개와 다음의 약속된 텍스트를 입력하는 것으로 특정 템플릿을 문서 내에 적용할 수 있습니다.
info
tip
warning
danger
details
본 프로젝트에서는 이를 확장하여 더욱 다양한 템플릿을 사용할 수 있도록 하는 방법이 준비될 예정입니다. 아래 내용은 실험적으로 제작된 템플릿과 이를 문서에 적용하는 법을 다룹니다.
적용된 결과는 아래 경로의 문서로 확인 가능합니다.
https://enchic.github.io/gitzza-plaza/templates.html
섹션 타이틀
UI 참고: 《Do it! 리액트 프로그래밍 정석》, 19쪽, 박호준 지음, 이지스퍼블리싱
입력 예
`section-header` 커스텀 컨테이너를 전달 인자와 함께 이용할 수 있습니다.
::: section-header `01` `바닥 점선 타이틀` `default`
:::
::: section-header `02` `라운드 박스 타이틀` `round`
:::
::: section-header `03` `아이콘 꾸밈 타이틀` `figured`
:::
::: section-header `null` `그러데이션이 들어간 타이틀` `gradient`
:::
추천사
UI 참고: 《Do it! 리액트 프로그래밍 정석》, 6쪽, 박호준 지음, 이지스퍼블리싱
입력 예
`section-recommendation` 커스텀 컨테이너를 전달 인자와 함께 이용할 수 있습니다.
::: section-recommendation `그사이가 그거다 집에 상황을 많이 운동은 대대적이지요 하다.` `홍길동(동에 번쩍 서에 번쩍)` `default`
때가 소리로 공익이던고 자식의 되며 발전에 울구는가. 웃다 묘사의, 통일의 감격이다 가니 데 지난 않은, 주가의 맛보지요. 성미가 나다 뿌리치고 어떤 바로 정권에 있게 도시를 하여 부른다. **세월에서 사고는 나라에서 보편적이 생각에 나와 밭이는 한 있다.** 조치까지 때문 대전이 제약을 성분과 있을 심해지다. 맑기 잘 똑같아 정무는 터진다, 싫다.
:::
대화 표현
웹소설에 사용될 수 있는 템플릿의 표현도 가능합니다.
범례
UI 참고: 《Do it! 리액트 프로그래밍 정석》, 19쪽, 박호준 지음, 이지스퍼블리싱
도움말
HTML 태그를 직접 사용해 템플릿을 꾸밀 수도 있습니다. 하지만, 이 또한 간편하게 사용할 수 있도록 개선이 가능합니다.
블록형의 모양과 입력 예
<div class="section-help block">
<div class="title">도움말 타이틀</div>
맑기 잘 똑같아 정무는 터진다, 싫다. 것 위기에 힝타기를, 사정이, 과학에서, 후를 새벽과, 되면서 있게 의하다.
</div>
툴팁형의 모양과 입력 예
<div class="section-help baloon">
맑기 잘 똑같아 정무는 터진다, 싫다. 것 위기에 힝타기를, 사정이, 과학에서, 후를 *새벽과, 되면서 있게 의하다. ~~하다 같이 본, 독자를 코브라나 넘습니다 안인 그대로 다니다.~~*
</div>
단 나누기
단 나누기를 위해 CSS가 어떻게 사용되고 있는지 확인할 수 있는 예입니다. 같은 내용의 문단을 `column-count` 속성의 값만 바꾸는 것으로 단 구성의 변경이 가능합니다.
2단의 모양과 입력 예
<div style="column-count: 2; text-align: justify;">
문단 내용
</div>
3단의 모양과 입력 예
<div style="column-count: 3; text-align: justify;">
문단 내용
</div>
찾아보기
단 나누기가 적용된 찾아보기 템플릿입니다.
UI 참고: 《Do it! 리액트 프로그래밍 정석》, 650쪽, 박호준 지음, 이지스퍼블리싱
함께 보기
VitePress > Writing > Markdown Extensions ↗
