[이지스팀잇] 마크다운, 태그 '고오급' 편집팁 !! (1)

마 크 다 운 & 태 그

고 급 편 집 팁

안녕하세요, @kyunga 입니다. 스팀잇에서 글을 써보신적이 있다면, 글을 꾸미거나 편집하기가 정말 힘들다는 것을 잘 아실꺼에요. 오늘은 다양한 레이아웃으로 편집을 가능하게 하는 '고급편집팁'을 총정리 해보겠습니다.

우선 팁을 공유하기전에, 레이아웃에 대해 간단히 설명하고자 합니다. 기존에 알고있는 마크다운을 이용해서 편집을 하고 있다면 대부분이 아래와 같은 레이아웃일 것입니다. 읽기에는 편하지만, 보는사람이 지루할 수 있다는 단점이 있습니다. 저도 포스팅이 100개가 넘어가면서 새로운 편집을 해보고 싶다는 생각이 들었거든요.

마크다운을 이용한 기본적인 레이아웃
가장 일반적인 왼쪽정렬 레이아웃
시선의 흐름을 따라 읽기 편하지만, 자칫 지루해질 수도 있음

특히 타 블로그에서 제공하는 레이아웃처럼 글 편집해보고 싶었던 적 있으셨죠? 바로 아래와 같은 레이아웃으로 말이죠.

편집 디자인에서 쓰이는 다양한 레이아웃들
다단편집은 내용에 맞게 사용하면 1단 편집보다 내용의 전달이 효과적일 수 있음

스팀잇에서도 마크다운외에 적용되는 태그들을 조합하면 위와같은 레이아웃으로 편집이 가능합니다. 핵심이 되는 태그인 정렬에 관련된 태그만 잘 이해하시면 됩니다. 가운데, 왼쪽, 오른쪽 정렬을 할 수 있고, 이를 응용해서 새로운 레이아웃을 만들 수도 있습니다. 우선 정렬에 관련된 4가지 태그부터 알아보겠습니다.

정렬에 관련된 4가지 태그

가운데 정렬

Text Text Text Text Text Text
Text Text Text Text Text Text
Text Text Text Text Text Text

<center>Text Text Text Text Text Text<br>Text Text Text Text Text Text<br>Text Text Text Text Text Text</center>

왼쪽 정렬

Text Text Text Text Text Text
Text Text Text Text Text Text
Text Text Text Text Text Text

<div class=pull-left>Text Text Text Text Text Text<br>Text Text Text Text Text Text<br>Text Text Text Text Text Text</div>

오른쪽 정렬

Text Text Text Text Text Text
Text Text Text Text Text Text
Text Text Text Text Text Text

<div class=text-right>Text Text Text Text Text Text<br>Text Text Text Text Text Text<br>Text Text Text Text Text Text</div>

양끝 정렬 : 양쪽끝을 딱 맞춰주는 정렬, 텍스트양이 어느정도 될 때 사용하시면 효과적입니다.

<div class=text-justify>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text  Text</div>

이미지 + 텍스트로 응용해보기

이제 위에 소개한 정렬에 관련된 태그를 응용해서 레이아웃을 만들어 보겠습니다. 태그로 여러 단의 레이아웃을 만들 수 있지만, 모바일에서의 가독성을 위해서는 이미지 + 텍스트 조합일 경우 2단을 추천드립니다. 이미지만 들어가는 경우에는 4단까지도 괜찮은 것 같습니다.

1단 정렬 응용 (이미지 사이즈 50%)

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

<div class="text-justify">
<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
</div>
<div class="pull-right">
</div>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

2단 정렬 응용 (이미지 사이즈 25%)

<div class="text-justify">
<div class="pull-left">
<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
</div>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<div class="pull-right">
</div>
</div>
<div class="pull-right">
<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
</div>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
<div class="pull-right">
</div>
</div>
</div>

2단 기본 정렬

COLUMN 1

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

COLUMN 2

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><h4>COLUMN 1</h4></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</div>

<div class="pull-right">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><h4>COLUMN 2</h4></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</div>

3단 정렬 _{(현재 스팀잇에서는 Div 사이즈를 조절할 수 없어서 3단을 균일하게 적용할 수는 없습니다.)}

COLUMN 1

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

COLUMN 2

COLUMN 3

<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<br>
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<br>
<center><h4>COLUMN 1</h4></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</div>

<div class="pull-left">
<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><h4>COLUMN 2</h4></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</div>

<div class="pull-right">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><h4>COLUMN 3</h4></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</div>
</div>

4단 정렬

COLUMN 1

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

COLUMN 2

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

COLUMN 3

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

COLUMN 4

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

- 4단 정렬

<div class="pull-left">
<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><h4>COLUMN 1</h4></center>
<br>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</div>
<div class="pull-right">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><h4>COLUMN 2</h4></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</div>
</div>
<div class="pull-right">
<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><h4>COLUMN 3</h4></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</div>
<div class="pull-right">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><h4>COLUMN 4</h4></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText.
</div>
</div>

`<Div>`태그 사용 편집시 주의사항

어떤가요? 약간의 공이 들어가긴 하지만, 생각보다 다양한 편집이 가능합니다. 다만, <div>가 들어간 태그 사용시 일부 마크다운 코드가 먹지 않을때가 있을 수 있습니다. 이 때는 같은 효과를 주는 HTML 태그를 사용해주어야 합니다.

효과	마크다운	Html 태그	결과
글자두껍게			Text
링크			Image or Text
헤더(제목)			Text Text Text Text Text Text
구분선
인용문			Text

Reference
w3schools - Basic Html code
Github-Markdown Cheatsheet

그 밖에 적용가능한 태그

그 밖에 스팀잇 글쓰기에 알아두면 좋을 태그들입니다. 위에서 알려드린 여러 단을 만드는 방법들과 함께 사용해보세요. 자신의 글에 어울리는 멋진 레이아웃을 만들어보는 시간을 가져보셨으면 좋겠습니다.

윗첨자

Text^Suptext

<center>Text<sup> Suptext</sup></center>

아래첨자

Text_Subtext

<center>Text<sub> Subtext</sub></center>

띄어쓰기

T e x t

<center>T&nbsp;&nbsp;&nbsp;e&nbsp;&nbsp;&nbsp;x&nbsp;&nbsp;&nbsp;t</center>

따옴표 : <q></q>를 쓰면 더 예쁜 따옴표를 쓰실 수 있어요.

Text

<center><q> Text </q></center>

카피라이트 표기

©Text

<center>&copy;Text</center>

영문체 변경 _{(*<pre>태그는 지정된 Monospace 서체로 변경되는 태그입니다.)}

Text

<center><pre>Text</pre></center>

Sort:

Trending

There are 2 pages

Pages

[-]

kyu0325 (25) 7 years ago

유용한정보 감사합니다

$0.00

2 votes

bluengel (71) 7 years ago

캬~! 멋지십니다~!
감사합니다 ^^

1 vote

ohnanana (56) 7 years ago

고오오오오오오급 포스팅 도전해보겠습니다 ><

golbang (65) 7 years ago

마크다운 고오오오오오급 예제 감사합니다.

bujacar12 (48) 7 years ago

감사드립니다ㅎ

autokjk70 (66) 7 years ago

감사히 잘 쓰겠습니다.
내 것으로 만들려면 연습이 필요하겠네요.ㅎ

orange5008 (59) 7 years ago

연습 좀 해봐야겠어요^^

captainstar (54) 7 years ago

오! 도전!

mashirable (42) 7 years ago

뉴비라서 아직 글 쓸때마다 마크다운 찾아보면서 하는 중입니다. ㅋㅋㅋ
자꾸 잊어버리는데 리스팀해두고 참고해야겠어요 +_+
감사합니다~!

haboyo (52) 7 years ago

좋은 정보 감사합니다^^

afinesword (62) 7 years ago

요런 글은 리스팀 필수

djent (49) 7 years ago

우와 스팀잇 처음들어와서 배우고 있는 저같은 초보한테 정말 필요한 정보네요 감사해요^^

ganzi (62) 7 years ago

개꿀팁... 리스팀하고감다

hwoong (40) 7 years ago

감사해요!!!!!

glorias (52) 7 years ago

우왕

hyominute (53) 7 years ago

다 좋은데.. 으아.... 언젠가는 필요한 것들을 프리셋으로 만들어두고 써야되겠군요^^
한 번 날잡아야할 것 같네요

jjy (73) 7 years ago

마크다운 고오급
정말 고오급 스럽게 사용하고 싶어요.
감사합니다.

onehand (64) 7 years ago

마크다운 고급버전 감사합니다. :D

ninehnineb (40) 7 years ago

포스팅할때 엄청 유용할 거 같아요~ 도즈언~

oming2 (48) 7 years ago

정성 및 꿀팁글은 보팅 및 리스팀하라 배웠습니다. 감사합니다.

chrisjeong (56) 7 years ago

무조건 리스팀 가즈아!!!+_+

nhotaeryong (55) 7 years ago

좋은 정보 얻어갑니다 ^^

p-dok (48) 7 years ago

저 이지스팀잇 보고 입문했어요. 너무 감사합니다.

리스팀 팔로잉 할게요 가즈아~ 챙겨봐야 겠네요

dolcat (51) 7 years ago

와우 진짜 꿀팁입니다.+=+
잘 활용하겠습니다 ㅎㅎ

coffeenews (40) 7 years ago

와...정말 대단하세요.
아직은 조금 어렵지만
조금씩 노력해서 발전해갈게요.
많이 배우고 갑니다.

friiday (25) 7 years ago

마크다운 알면알수록 신기하네요 좋은정보 감사합니다.

dlektjs1122 (35) 7 years ago

이건 대박 꿀팁 입니다.
감사합니다. ~
항상 참고 할께요 ~

kikiko (28) 7 years ago

유용한 정보 감사합니다.~

junsol (32) 7 years ago

역시 고급글이라 어려워요ㅜㅜ

yangmok701 (63) 7 years ago

이런 방법도 있었군요, 좋은 팁 감사합니다

tk0319 (58) 7 years ago

아 아닛!!! 이건 풀 보팅이얌!! 감사합니다 완전 필요한 거였어요

dahun113 (56) 7 years ago

좋은정보 감사합니다

kohand (42) 7 years ago

좋은정보 감사해요~~

nhj12311 (64) 7 years ago

경아님은 마크다운의 끝을 보시는군요 ㅎㅎㅎ 대단합니다!

gamcho (50) 7 years ago

당장 활용해야겠습니다. 감사합니다!

thisisohs (42) 7 years ago

오호! 꼭 적용해봐야겠어요^^ 유용한 팁 감사합니다~

hyeseogi (36) 7 years ago

이제 막 가입해서 둘러보는 중인데 좋은 팁 감사합니다!

zzangingirl (49) 7 years ago

고오급 정보 감사해용~~

bluebirdkeeper (25) 7 years ago

등록 첫날이라 먼가 다른 세상에 온것 같습니다. 차분히 보면서 이해해봐야 겠습니다. 고맙습니다.

minstagram0629 (48) 7 years ago

다음 포스팅 때 참고해봐야겠어요! 유용한 정보 감사합니다. :)

donekim (77) 7 years ago

마크다운은 쓰면 쓸수록 어려운듯 쉽고 쉬운듯 어려운 아주 오묘한 존재인것 같아요 ㅠㅠ 그래도 조금이나마 퀄리티가 업그레이드 될 수 있도록 많은 것을 알려주시는 @kyunga님과 @easysteemit 덕분에 천천히 적응이 되어 가는 것 같습니다 :D 좋은 정보 감사드리며 리스팀해갑니당!! 연습 고고싱

henrydohson (25) 7 years ago

감사합니다!

yuknara (31) 7 years ago

스팀잇 초보자인데요. 활용하도록 하겠습니다. 감사합니다.

owenzzing (37) 7 years ago

감사합니다. 이제 스팀잇을 처음 시작하는 데 큰 도움이 되었습니다.

lee014278 (57) 7 years ago

이지 스팀잇 책을 보고 시작했음 덜어려웠을텐데 지금이라도 보고 공부하겠습니다

stylegold (63) 7 years ago

완전 좋은 정보 감사합니다.!!

minimal-life (27) 7 years ago

와.. 이제 막 시작해서 너무 어려운데요. 포스팅해주신 내용 보고 천천히 배워보겠습니다^^

koreabloger (45) 7 years ago

우오오 알고싶었던 정보에요 감사합니다.

나만 어려운가봐요...다들 쉽다는데..계속 보다보면 알게돼겠죠..정보 감사합니다

[이지스팀잇] 마크다운, 태그 '고오급' 편집팁 !! (1)

고 급 편 집 팁

정렬에 관련된 4가지 태그

이미지 + 텍스트로 응용해보기

COLUMN 1

COLUMN 2

COLUMN 1

COLUMN 2

COLUMN 3

COLUMN 1

COLUMN 2

COLUMN 3

COLUMN 4

<Div>태그 사용 편집시 주의사항

Text

Text

Text

Text

Text

Text

그 밖에 적용가능한 태그

무조건 리스팀 가즈아!!!+_+

`<Div>`태그 사용 편집시 주의사항