필요성
사내에서 세미나를 준비해야하는 상황이 있었고, 매번 PPT(.pptx)로 작업하던 발표자료 방식에 변화를 주고 싶었습니다. 때마침 Markdown을 활용한 Marp(Markdown Presentation Ecosystem)를 사용해 발표자료를 만들고자 목표를 세웠습니다. 아래 내용으로는 Marp를 이해하시는 데에 도움이 될 수 있도록 기본 코드 구성을 다뤄보겠습니다.
접근
1. VsCode 내 Markdown 파일(.md) 생성
2. Marp Extension 'Marp for VS code' 설치
3. Marp 기본 코드 다루기
방법
1. VsCode 내 Markdown 파일(.md) 생성
(1) Vscode (Visual Studio Code) 설치
Vscode (Visual Studio Code)를 설치해줍니다.
(설치버전은 최신버전도 좋겠지만, LTS버전을 추천드립니다.)
(2) 폴더 & Markdown 파일 (.md) 생성
- (좌측 사진과 같이) 탐색기를 열고, markdown 파일을 만들 폴더를 생성합니다.
(폴더를 생성함은 추후 marp 내에 사용될 resources 관리를 위함이 있습니다.)
- 폴더 내 희망 위치 우클릭 > "새파일"을 눌러 파일을 생성합니다.
- 파일명을 자유롭게 적되, 확장자를 "md" 형식으로 지정해줍니다.
- 생성된 파일은 "seminar.md"와 같이 markdown언어를 사용할 수 있게 됩니다.
(위의 방법 외에도 개인이 편한 방식을 이용하면 됩니다.)
2. Marp Extension 'Marp for VS code' 설치
- (좌측 사진과 같이) 확장(Extension) 탭을 클릭해줍니다.
- "marp" 를 검색하면, "Marp for VS Code" 확장이 조회됩니다.
- 조회된 확장(Extension)을 설치해줍니다.
- 이후, markdown HTML 작성이 가능해질 수 있도록 설정을 합니다.
- "Marp: Enable HTML" 설정을 활성화 시켜줍니다.
(후에 작성하게 될 md 파일에서 <HTML> 코드를 사용할 예정)
3. Marp 기본 코드 다루기
(1) marp 활성화
---
marp: true
---위 코드를 사용함으로써, marp를 활성화할 수 있게 됩니다.
더불어, 슬라이드 생성은 "---" 으로 이뤄집니다.
(2) 전역설정 (theme, paginate, header, footer...)
---
marp: true
theme: gaia
class: invert
paginate: true
header: header 작성을 여기에 해주세요.
footer: footer 작성을 여기에 해주세요.
---
- theme(테마)에는 uncover, gaia, default가 있습니다.
- class에는 invert(dark mode) 를 설정해줄 수 있습니다.
- paginate로는 슬라이드별 우측 하단에 paging 처리가 될 수 있도록 해줍니다.
- header/footer는 슬라이드별 상,하단에 위치할 문구를 설정해줄 수 있습니다.
(3) 기타 (강조, 기울이기, 취소선, 표)
---
# 강조
숫자 리스트 강조 : **글**
# 기울이기
_기울이기_
# 취소선
~~취소선~~
# 표 작업
|이런식의|표도|만들 수 있음|
| ------|----|-----------|
| 값1 | 값2| 값3 |
# 이모지
:rocket: (이모지)
---(4) 슬라이드별 개별 코드 작업
---
# 전역 설정 부분
marp: true
theme: gaia
class: invert
paginate: true
header: header 작성을 여기에 해주세요.
footer: footer 작성을 여기에 해주세요.
---
# 슬라이드별 개별 설정 가능 : <!-- --> 주석 사이 작성
<!--
_backgroundColor: "red"
_color: white
_paginate: false
_header: _Seminar For
_footer: "Copyright 2023"
-->
내용을 작성해주세요.
---(5) 추가 TIP (슬라이드 내 2개의 Column 구분)
---
# 전역 설정
# "Enable HTML" 을 활성화 해줬기에 가능
style: |
.columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
---
<div class="columns">
<div>
- a
- b
- c
</div>
<div>
- d
- e
- f
</div>
</div>
---
이외에도 슬라이드를 꾸밀 수 있는 수많은 방법들이 존재합니다.
추가적인 내용은 아래 링크를 참고하셔도 좋을 것 같습니다.
도움이 되셨다면 공감버튼 부탁드립니다!
감사합니다^^
댓글