마크다운 소개

53
Markdown 빠르고 간편한 문서작성하기 [email protected]

Upload: sejong-park

Post on 26-May-2015

609 views

Category:

Software


0 download

DESCRIPTION

자바카페 내부 세미나 발표 슬라이드입니다.

TRANSCRIPT

Page 1: 마크다운 소개

Markdown 빠르고 간편한 문서작성하기

[email protected]

Page 2: 마크다운 소개

마크다운??이게 뭔가요… 먹는건가요??

Page 3: 마크다운 소개

Text만 으로 구조적인 글을작성하는 문법

Page 4: 마크다운 소개

# A First Level Header!## A Second Level Header!Now is the time for all good men to come tothe aid of their country. This is just aregular paragraph.!The quick brown fox jumped over the lazydog's back.!### Header 3!> This is a blockquote.> > This is the second paragraph in the blockquote.>> ## This is an H2 in a blockquote

마크다운 문법으로 글을 작성하면..

Page 5: 마크다운 소개

<h1>A First Level Header</h1>!<h2>A Second Level Header</h2>!<p>Now is the time for all good men to come tothe aid of their country. This is just aregular paragraph.</p>!<p>The quick brown fox jumped over the lazydog's back.</p>!<h3>Header 3</h3>!<blockquote> <p>This is a blockquote.</p>! <p>This is the second paragraph in the blockquote.</p>! <h2>This is an H2 in a blockquote</h2></blockquote>

문법에 따라 HTML로 변환

Page 6: 마크다운 소개

브라우저(뷰어)에서는 요렇게 출력됩니다.

Page 7: 마크다운 소개

에게… 이게 뭐가 좋나요??

Page 8: 마크다운 소개

마우스가 없어도 문서 작성이 가능해요

MS office word

Naver smart editor

Page 9: 마크다운 소개

“ 글자크기나 모양을 지정해 주지 않아도 중요한 것을 표시하면서 글을 써나갈 수 있었다. 글의 논리만을 생각하면서 글을 써갈 수 있었고, 내용에만 집중할 수 있었다.

” 마우스가 없어도 문서 작성이 가능해요

Page 10: 마크다운 소개

마크다운����������� ������������������  문법����������� ������������������  ����������� ������������������  제목����������� ������������������  

마우스가 없어도 문서 작성이 가능해요

Page 11: 마크다운 소개

마크다운����������� ������������������  문법����������� ������������������  리스트����������� ������������������  

마우스가 없어도 문서 작성이 가능해요

Page 12: 마크다운 소개

마크다운����������� ������������������  문법����������� ������������������  강조����������� ������������������  

마우스가 없어도 문서 작성이 가능해요

Page 13: 마크다운 소개

마크다운����������� ������������������  문법����������� ������������������  링크,����������� ������������������  그림����������� ������������������  

마우스가 없어도 문서 작성이 가능해요

Page 14: 마크다운 소개

문서형식을 쉽게지정할 수 있어요.

Page 15: 마크다운 소개

CSS 기반 문서 형식 지정

문서형식을 쉽게지정할 수 있어요.

Page 16: 마크다운 소개

문서형식을 쉽게지정할 수 있어요.

Page 17: 마크다운 소개

문서형식을 쉽게지정할 수 있어요.

Page 18: 마크다운 소개

문서형식을 쉽게지정할 수 있어요.

Page 19: 마크다운 소개

문서형식을 쉽게지정할 수 있어요.

Page 20: 마크다운 소개

어디서나 편집, 어디서나 볼 수 있어요

일주일전.. 사내 문서 요청. 오피스를 다운받고 (₩169,000!!? torrent?) 맥에 설치를 하고 (최소 2Gb) 문서를 열었는데, 폰트가..ㅠㅜ

Page 21: 마크다운 소개

어디서나 편집, 어디서나 볼 수 있어요

마크다운은 순수한 텍스트 글자를 편집할 수 있는 모든툴에서 문서편집이 가능

Page 22: 마크다운 소개

어디서나 편집, 어디서나 볼 수 있어요

마크다운은 HTML로 변환. 모든 브라우저에서 문서를 볼 수 있다.

Page 23: 마크다운 소개

어디서나 편집, 어디서나 볼 수 있어요

Page 24: 마크다운 소개

어디서나 편집, 어디서나 볼 수 있어요

Page 25: 마크다운 소개

Syntax Highlighting

```python def renderWave(): # A simple way to draw the wave noStroke() fill(255, 50) ellipseMode(CENTER) for x, v in enumerate(yvalues): ```

Page 26: 마크다운 소개

Syntax Highlighting

```언어 /** * The HelloWorldApp class implements an application that * simply displays "Hello World!" to the standard output. */ class HelloWorldApp { public static void main(String[] args) { System.out.println("Hello World!"); // Display the string. } }

```

Page 27: 마크다운 소개

Syntax Highlighting

Syntax highlighting 가능한 언어는 180 이상

https://github.com/github/linguist

Page 28: 마크다운 소개

마크다운 단점… 은총알은 없습니다.

Page 29: 마크다운 소개

문법이 너무 단순해요

markdown 표준 문법에는 표, 정렬, 각주, 색상변경, 글꼴 문법이 없습니다. HTML을 확장하여 사용하여야 합니다.

Page 30: 마크다운 소개

문법이 너무 단순해요

!• 깃헙(Github Flavored Markdown)

• 테이블을 제공 • 이탤릭 사용법중 하나가 불가능

• 하루패드 • 각주 제공 • 수학공식 제공

• MultiMarkdown • …

Page 31: 마크다운 소개

문법이 너무 단순해요

깃헙에서 테이블 사용하기

Page 32: 마크다운 소개

문법이 너무 단순해요

하루패드에서 수학공식 사용하기

Page 33: 마크다운 소개

멀티미디어삽입의 불편함

순수한 텍스트(최고!) 사진은 어떻게 올리죠?

Page 34: 마크다운 소개

어디에서 마크다운을 사용하나요?

Page 35: 마크다운 소개

마크다운, 어디에서 사용하나요?

깃헙

Page 36: 마크다운 소개

마크다운, 어디에서 사용하나요?

텀블러

Page 37: 마크다운 소개

ecogwiki

마크다운, 어디에서 사용하나요?

Page 38: 마크다운 소개

마크다운 편집기 추천해요!

Page 39: 마크다운 소개

하루패드

http://pad.haroopress.com/

Page 40: 마크다운 소개

Stackedit

v3 : https://stackedit.io/ v4 : https://stackedit-beta.herokuapp.com/

Page 41: 마크다운 소개

개인 프로젝트 소개합니다.

Page 42: 마크다운 소개

•버전관리! 과거내용 되살리기 •폴더 및 태그로 파일 분류하기 •마크다운 파일 내부 검색하기 •CSS없이 글자 크기, 폰트, 배경을 자유롭게 •사진을 쉽게 올릴수 있도록 하기 •회원간 파일 및 폴더 공유

왜 만드나요?

Page 43: 마크다운 소개

Markdown 편집기 +

Evernote 검색, 문서관리 +

git의 버전관리

무엇을 만드나요?

Page 44: 마크다운 소개

기반 기술?

API Server !

•JAVA 8 •RESTful API •spring boot •mariaDB

Front Server !

•Node.js •express •passport

Client !

•Angular.js •Ace Editor •bootstrap

Page 45: 마크다운 소개

기반 기술?

API Server !

•JAVA 8 •RESTful API •spring boot •mariaDB

Front Server !

•Node.js •express •passport

Client !

•Angular.js •Ace Editor •bootstrap

Page 46: 마크다운 소개

기반 기술?

API Server !

•JAVA 8 •RESTful API •spring boot •mariaDB

Front Server

WebBrowser

NodeWebkit 클라이언트

IOS, android 클라이언트

Page 47: 마크다운 소개

진행상태?

API Server !

•JAVA 8(✔) •RESTful API(✔) •spring boot(✔) •mariaDB(✔)

Front Server !

•Node.js(✔) •express(✔) •passport

Client !

•Angular.js •Ace Editor •bootstrap

Page 48: 마크다운 소개

조금씩…

Page 49: 마크다운 소개

현실은po야근wer

Page 50: 마크다운 소개

15일째 커밋이 없내요.

Page 51: 마크다운 소개

github

https://github.com/devsejong

Page 52: 마크다운 소개

질문 있으신가요??

Page 53: 마크다운 소개

끝!

[email protected] http://devsejong.bl.ee/ https://www.facebook.com/devsejong https://github.com/devsejong