스터디나 모임에서 간단하게 발표할 일이 있으면 보통 마크다운으로 정리한 문서를 보면서 진행을 했는데 아무래도 PT형식이 가독성에 도움이 될 것 같아 찾아보던 중 마크다운 포맷으로 PT를 만드는 툴을 발견했다.
깃허브 링크 : https://github.com/gnab/remark
샘플 : https://remarkjs.com/#1
쉬운 이해를 위해 간단한 예제 코드를 보자.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body { font-family: 'Droid Serif'; }
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: normal;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
</head>
<body>
<textarea id="source">
# 슬라이드 제목1
첫번째 슬라이드입니다.
---
# 슬라이드 제목2
두번째 슬라이드입니다.
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
첫 예제 치고는 긴 편이지만 우선 이부분만 주목하면 된다.
<textarea id="source">
# Slide 1
첫번째 슬라이드입니다.
This is first slide.
---
# Slide 2
두번째 슬라이드입니다.
This is second slide.
</textarea>
<textarea id="source">
태그 안에 Remark
형식에 맞는 마크다운을 작성하고 html을 실행해 보면 다음과 같은 PT를 간단하게 얻을 수 있다.
당연히 마크다운의 헤더, 목록, 코드블럭 등을 사용할 수 있고 약간의 CSS만 사용하면 레이아웃도 나눌 수 있다.(Remark에서 공식적으로 지원하는 방법이 있는지는 아직 확인하지 못했다. 레이아웃을 나누는 방법은 다른 글에서 설명한다.)
그럼 다시 간단한 사용법을 알아보자
슬라이드는 ---
을 기준으로 나누어 진다. <hr />
이 아님에 유의하자.
# Slide 1
첫번째 슬라이드
---
# Slide 2
두번째 슬라이드
class
프로퍼티를 사용해 해당 슬라이드의 정렬 방법을 지정할 수 있다. 기본적으로 제공하는 클래스는 left
, center
, right
, top
, middle
, bottom
이 있다.
class: center
# Aligned Slide
이 슬라이드는 수평으로 중앙 정렬됩니다.
---
class: center, middle
# Aligned Slide
이 슬라이드는 수직, 수평으로 중앙 정렬됩니다.
Spring boot 프로젝트에서 여러개의 property 혹은 yml을 추가하며 겪은 문제와 해결방법을 공유해 보겠습니다. 프로젝트에 OAuth와 MailSender를 사용하기 위해 yml를 작성하던 중 Github에 올라가선 안될 ClientId나 Password를 숨기기 위해 yml을 분리하는 방법을 사용했습니다. 공개해도 괜찮은 설정은 appli...
Spring을 사용하면 입력값을 받을 때 @Valid를 사용해서 쉽게 검증을 할 수 있는데 기본적으로 반환하는 에러 메시지는 너무 길고 복잡해 필요에 따라 처리하는 방법을 알아보았습니다. 우선 간단한 POST 요청을 처리하는 과정을 살펴보겠습니다. 훨씬 간결해진 메시지를 볼 수 있습니다. 물론 이렇게 바꾸는 것이 정답이 아니니 필요에 따라 반환하는 ...
최근 세션 대신 사용자 인증에 주로 사용되는 JWT와 OAuth. 그 중 JWT에 대해 아주 기본적인 내용까지만 알아보도록 하겠습니다. 혹시 틀린 내용이 있다면 지적 부탁드립니다. JWT 란? Json Web Token의 줄임말로 JWT 라이브러리인 JJWT의 Docs에서는 다음과 같이 정의하고 있습니다. JWT is a means of t...
웹 프로그래밍을 하다 보면 자주 접하게 되는 쿠키, 세션, 웹 스토리지에 대해 간략히 정리해보았습니다. 쿠키, 세션, 웹 스토리지를 설명하기에 앞서 왜 사용하는지를 더 쉽게 이해하기 위해 HTTP 프로토콜의 특징을 알아보겠습니다. HTTP 프로토콜의 특징 - 비연결지향 (Connectionless): 클라이언트가 서버에게 Request를 보내고...
스터디나 모임에서 간단하게 발표할 일이 있으면 보통 마크다운으로 정리한 문서를 보면서 진행을 했는데 아무래도 PT형식이 가독성에 도움이 될 것 같아 찾아보던 중 마크다운 포맷으로 PT를 만드는 툴을 발견했다. Remark 깃허브 링크 : https://github.com/gnab/remark 샘플 : https://remarkjs.com/1 ...