[이지스팀잇] 마크타운, 고오급 편집팁 (2) - 템플릿 대방출

in #kr6 years ago (edited)

안녕하세요, @kyunga 입니다.
그 동안 6개월 정도 스팀잇에서 글쓰며 편집과 씨름한 결과...!
바쁘고 응용을 힘들어하는 여러분을 위해, 글 종류에 맞는 템플릿을 만들어보았습니다.
지난 번 고오급편집 1편 보다 훨씬 더 따라하기 쉽습니다. 아래에서 마음에 드시는 템플릿의 코드를 복사하셔서 내용만 적어넣으시면 됩니다.

스타일은 총 6가지로 북리뷰, 여행리뷰, 뉴스레터, 이미지 갤러리, 레시피, 에세이를 생각하며 만들었습니다만, 구성요소를 응용하셔서 새로운 스타일을 만들어보셔도 좋을 것 같습니다. 그럼 저는...이 템플릿을 마지막으로 이만 하산하도록 하겠습니다ㅋㅋ 나머지는 여러분의 손에 맡기겠습니다! 예쁘게 응용해주세요!

*아래 템플릿들은 Steemit.com 기준으로 작업되어있습니다.
Busy 또는 타 브라우저에서 수정이 필요할 수 있습니다.




Template 01


Boor review


<center><h3>01</h3>https://steemitimages.com/80x0/https://cdn.steemitimages.com/DQmeBM8uYHoA6vNfhKWffgTb2GsuB4iBZwWWV4hESwi4gTg/border_05.png
BEST</center>
<br>


<center><h2>Book Title</h2></center>

<br>
<br>

<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><sub>Description</sub></center>
<br>
</div>

<div class="pull-right">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><sub>Description</sub></center>
<br>
</div>

<br>
Text area Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area Text area Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area Text area Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area 

<center>
https://cdn.steemitimages.com/DQmY8UA7YC68Lhh6cLFzdAESxuG8eaonPdPwKcVyEBieXK5/border_06.png
<q> An impressive sentence in the book</q>
https://cdn.steemitimages.com/DQmY8UA7YC68Lhh6cLFzdAESxuG8eaonPdPwKcVyEBieXK5/border_06.png
</center>

Text area Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area Text area Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area Text area Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area 

<br>

<h4>Latest Book review</h4>

---
<div class=pull-left>
https://steemitimages.com/150x0/https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
</div>

[#7 - Your latest post subject](Link)
<sub>Preview text area Preview text area Preview text area Preview text area Preview text area Preview text area Preview text area Preview text area Preview text area Preview text area Preview text...</sub>

<div class=text-right><sub>Editorial Design by @kyunga</sub></div>




Template 02


Travel


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

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

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



<br>
<br>
<br>
<center><h1>「 &nbsp;DAY 1  - City Tour &nbsp;」</h1>
<sup>| Coffee,  Opera House, Vondel Park |</sup></center>

<br>
<br>


---

<div class=pull-left>
<strong>01. TItle</strong>
</div>

<div class=text-right>
<sub>Address | Open Hour | etc
</sub>
</div>

---

<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</div>

<br>
<br>


---

<div class=pull-left>
<strong>02. TItle</strong>
</div>

<div class=text-right>
<sub>Address | Open Hour | etc
</sub>
</div>

---

<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</div>

<br>
<br>


---

<div class=pull-left>
<strong>03. TItle</strong>
</div>

<div class=text-right>
<sub>Address | Open Hour | etc
</sub>
</div>

---

<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</div>

<center>https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png</center>
<center><sup>Central station, 2018, Amsterdam</sup></center>

<div class=text-right><sub>Editorial Design by @kyunga</sub></div>




Template 03


Newsletter



<h2>News Letter 
</h2>https://cdn.steemitimages.com/DQma7Ek3vvV2NZ3veAx67AVeiq9gXAjvD415F4WsuNShGRY/border_06.png <div class=pull-left><sub>VOL.12</sub></div><div class=text-right><sub>Date | Written by @YourID</sub></div>https://cdn.steemitimages.com/DQmaZbTBYFYgwg6gGWgXj1btxbHFpfbFFSqcPXvurcbAEgF/border_05-long.png

<div class=text-justify>
<div class=pull-left><h4>&nbsp;&nbsp;&nbsp;&nbsp;Today's Issue&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;Today's Issue&nbsp;&nbsp;<br><br></h4></div>Text area  Text area  Text area  Text area </b>  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area Text area Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area  Text area 
</div>


<br>
<br>
<div class="pull-left">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><sub>Description</sub></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
<br>
<br>
<br>
<br>
</div>


<div class="pull-right">
https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<center><sub>Description</sub></center>
<br>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
<br>
<br>
<br>
<br>
</div>


<h4>Insight</h4>

---

- Text area Text area  Text area  Text area  Text area  Text area [^1]
- Text area Text area  Text area  Text area  Text area  Text area [^2]
- Text area Text area  Text area  Text area  Text area  Text area  Text area

<br>

<h4>Reference</h4>

[^1]:https://steemit.com/submit.html
[^2]:https://steemit.com/submit.html

<div class=text-right><sub>Editorial Design by @kyunga</sub></div>




Template 04


Gallery, Image Archive



https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png

<br>

<center>
<B>Image Archive</B>
https://steemitimages.com/DQmPhqdddLEUmxWmJaxHhQeX9NxKe2WKEXVjpuycwrELkVJ/border_02.png
<sub>2&nbsp;&nbsp;0&nbsp;&nbsp;1&nbsp;&nbsp;8</sub>
</center>

<br>
<br>
<div class="pull-left">
<div class="pull-left">
https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<a href=https://steemit.com/submit.html><h5>T I T L E</h5></a>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>

https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>



https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>
</div>

<div class="pull-right">
https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>

https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>



https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>
</div>
</div>

<div class="pull-right">
<div class="pull-left">
https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>

https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>



https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>
</div>
<div class="pull-right">
https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>

https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>



https://cdn.steemitimages.com/DQmSF2TFeK7SyKnXx3G63dgwvTqANF8eJWUhet9cocgKMuK/Img.png

<h5>T I T L E</h5>
<hr>
<sup>Text Text Text Text
Text Text Text Text</sup>

<br>
<br>
<br>
</div>
</div>


---
<div class=text-right><sub>Editorial Design by @kyunga</sub></div>




Template 05


Recipe



## Today's Recipe <div class=text-right><sub>🕑 30 min | 🍴 2 Persons</sub></div>https://cdn.steemitimages.com/DQmaZbTBYFYgwg6gGWgXj1btxbHFpfbFFSqcPXvurcbAEgF/border_05-long.png

<br>

##### Ingredient
---
- Text Text Text Text Text Text Text Text  Text Text Text Text
---
- Text Text Text Text Text Text Text Text  Text Text Text Text
---
- Text Text Text Text Text Text Text Text  Text Text Text Text
---

<br>

##### Recipe
---

<div class=pull-left>
<br>https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png
<br>
</div>

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

<hr>
<br>

https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png

➋
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text

<br>
<center>https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png</center>

➌
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text

<br>
<center>https://cdn.steemitimages.com/DQmatJC5B4ftEi4YLb1PTD6K6FYQ6bHqDGh3y7pDmLGTDch/example_3.png</center>

➍
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text  Text Text Text Text Text Text

---

>Number Dingbat font 1~10
➊➋➌➍➎➏➐➑➒➓

<div class=text-right><sub>Editorial Design by @kyunga</sub></div>




Template 06


Vintage style for Essay


<center>
https://cdn.steemitimages.com/DQmVUVxegmUjKVYgsL6F4h1mZzmpYtoRA9tZFT39zgLLoV8/border.png
<h3><pre>E S S A Y &nbsp;T I T L E</pre></h3><sub>S U B T I T L E</sub><br>
https://cdn.steemitimages.com/DQmUgbfHXWonFbFHYpjEejDkC1pfjvgkLXSKhCDddbRwY6X/border_2.png
</center>

<br>

<div class=text-justify>
<div class=pull-left><h4>&nbsp;&nbsp;&nbsp;&nbsp;First Word&nbsp;&nbsp;<br><br></h4></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>

<br>

<center>https://cdn.steemitimages.com/400x0/https://cdn.steemitimages.com/DQmUScNJSMXBLyHum3oCogqKZGsvSJ2WzobgnVmsQej3iQ8/border.png 
Quatation Sentence Quatation Sentence
Quatation Sentence Quatation Sentence
https://cdn.steemitimages.com/400x0/https://cdn.steemitimages.com/DQmUScNJSMXBLyHum3oCogqKZGsvSJ2WzobgnVmsQej3iQ8/border.png </center>

<br>

Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text
https://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png
Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text
https://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png
Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text
https://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png
Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text
https://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png
Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text
https://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png
Text Text  Text Text Text Text  Text Text Text Text  Text Text Text Text Text
https://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png

<br>
>https://cdn.steemitimages.com/DQmZEUJPaRc9RQZfqgPPR7gnABp618YHpcJ7QLY3AW6ynjf/comma_3.png
<h3>&nbsp;QUATATION</h3>https://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png
>&nbsp;Text area Text area  Text area  Text area  Text area  Text areahttps://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png
>&nbsp;Text area Text area  Text area  Text area  Text area  Text areahttps://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png
>&nbsp;Text area Text area  Text area  Text area  Text area  Text areahttps://cdn.steemitimages.com/DQmRe8vXZJBabSQ6UPbtZjrFEp89hV9Go2SP5cF5PduXoCi/border_long.png

<div class=text-right><sub>Editorial Design by @kyunga</sub></div>
Sort:  

감사합니다!!

완전 멋져용~! 감사합니다 ^^

대박입니다!!^^

대박... 정말 감사합니다 ㅠㅠ!!! 짱!!

스팀잇 글쓰기에 html 이 사용가능하군요

이 좋은걸 왜 ui로 구현을 안 해주는지 ㅠ 나중에 리스팀하러 다시 올게요. 너무 감사합니다.

잘 쓸게요! 경아님 최고!! :D

와 대박입니다!

고오급 마크다운 배우고갑니다!!!! 감사해요 +_+

최고입니다!! 와!!