마크다운 & 태그 어디까지 해봤니? #2 - 잡지같이 포스팅해보자

in kr •  7 years ago  (edited)


*오늘은 이미지가 있는 글 양식입니다.
이런 편집도 가능하구나 하고 봐주셨으면 좋겠어요.
모두가 이런 덕질을 할 필요는 없다는 말입니다ㅋㅋ
참고로 아래 텍스트는 모두 허구입니다.






내 가 좋 아 하 는  전 세 계 의  카 페

M Y  F A V O R I T E  C A F E



Danang, Vietnam, 2017




1

2

3


4








1. Blue bottle, Tokyo
여전히 핫한 오모테산도의 블루바틀.


2. Stumptown Coffee, USA
한 집 건너 유명한 커피라는 포틀랜드에 있는 카페
스텀프타운 본사에가면 여러가지 커피 테이스팅도 가능하다고 한다.


3. La minata
코스타리카에 있는 커피 농장. 이름부터 너무 예쁘다.
여기에 가면 이른 아침에 상쾌한 공기와 함께 농장의 최상급 생두로 만든 코스타리가 모닝커피를 마실 수 있다고한다.


4. Starbucks, USA
시애틀 스타벅스 1호점은 커피 좋아하는 사람들은 누구나 들리고픈 장소.




오늘의 편집이야기

잡지의 느낌을 내보고 싶었어요.

사진이 있는 포스팅이라면 시도해볼만한 포맷이라고 생각합니다.

스팀잇에 아름다운 글들이 더 많아지길 바라며 공유합니다.

오늘의 편집포맷은 여기에서 확인하실 수 있습니다.

코드복사하셔서 따라해보시고 응용해보세요 :-)

어렵다는 분들이 있어서 기초 마크다운부터 익히시라고 링크공유합니다.


기초 마크다운 익히기

이지스팀잇-마크다운을 알아보자1
이지스팀잇-마크다운을 알아보자2

고급 마크다운 익히기

낸드님의 마크다운 심화와 태그
Slay님의 왼쪽 및 오른쪽 정렬하는 법과 이미지 옆에 문단을 정렬시키는 방법


지난글
#1 - 티져 (feat.글자반 여백반)

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

어디까지 갈런지... 정말 기대가 됩니다.^^

음..저도 잘 모르겠어요ㅋㅋ 떠오를때마다 하나씩 만들어보죠 뭐!ㅎㅎ

고급지네요! 다낭의 저 까페도 너무 가고싶고, 씨애틀의 스타벅스 1호점도 너무 가보고싶어요. 와... 전세계에 몇 개의 스타벅스가 있을까요? 제가 사는 요 조그만 동네에 두개나 있어요ㅜ

저도 가보고 싶은 카페들을 다 적긴했는데ㅋ 이미지는 다 가짜에요!ㅎㅎ
언젠가 가봅시다 시애틀 스타벅스ㅠㅜ!!

오오! 진짜 잡지 느낌 물씬 나는데요?? :)

오..성공했따!!ㅋㅋ

전 게을러서 아마 못하겠지만ㅠ(사진 위주도 아니고) 넘 이쁘네요. ㅎㅎ

감사해여 제이미님ㅎ 다음편은..시, 소설, 일기 같은 것들로 해보려구요ㅎ

뉴비분들에게 전해지라고 리스팀합니다~~

어머 스맛컴님 오랜만이에요!ㅎ
리스팀 감사합니다!! 저도 놀러갈께요!ㅎㅎ

저도 이렇게 하고 싶어요 그런데 힘들어요...ㅎㅎㅎ

충분히 하실 수 있어요! 코드 복사하셔서 따라해보세요ㅎㅎ

오! 완전 꿀자료네요~~ 감사합니다^^

복사하셔서 응용해보세요!ㅎ
div 의 경우엔 br 때문에 밀리거나 하는 경우가 많아서, 직접 해보셔야 감을 익히게 된답니당 :-)

우와 이렇게 멋지게도 가능하군요
복사해다가 저장해놔야겠네요 ㅋㅋ

복사하셔서 응용해보세요!ㅎ
div 의 경우엔 br 때문에 밀리거나 하는 경우가 많아서, 직접 해보셔야 감을 익히게 된답니당 :-)

경아님하시는거보고 저도 공부좀 해야겠어요.:) 마크다운땜에 올릴때마다 머리거 지진나다보니 매일 같은 양식으로 올리게되요.

지금 편집도 좋아요!!ㅋㅋ 지겨우시다면 조금 변화를 줘보는것도 좋겠네요!
혹여 저 땜에 다들 편집에 시간 뺏기시는것은 아닐까하는 생각이 드네요ㅋㅋ

경아님하시는거보고 저도 공부좀 해야겠어요.:) 마크다운땜에 올릴때마다 머리거 지진나다보니 매일 같은 양식으로 올리게되요.

보기도 좋고 예뻐요!!

감사합니다 디디엘엘님 :-)
가봅시다 어디까지 할 수 있는지ㅋㅋ

감각적이에요^^
심플하면서도 깔끔한(쓰고 보니 같은 말..) 디자인 좋아요~

ㅋㅋ 모든 형용사를 다 꺼내시는듯한 한줄평 감사합니다!!

댓글 달기도 쉽지 않아요. 국어사전을 공부해야 하나.. --;

아뇨!ㅎ 댓글은 그냥 떠오르는대로 적어야 제맛이져!ㅋ
제가 찰떡같이 알아들을께여ㅎㅎ

감사합니다 ㅡㅜ
글씨 굵기는 어찌해야하나 답답했는데
한방에 해결해 주셨네요^^
즐거운 저녁되세요^^

기초 마크다운을 익히시면 하실 수 있는게 많아지실꺼에요!ㅎㅎ
글 하단에 링크 참조해주세요~!

정말 엄청 깔끔하네요. 차원이 다릅니다. ㅎㅎ

윤님 감사합니다!ㅎ
스팀잇에 예쁜 글들이 많아지면 좋겠어요ㅎㅎ

경아님 제 마음을 읽으셨군요^^
마크다운과 편집에서 늘 헤매고 있었는데 감사합니다!
스텀타운과 스타벅스1호점은 버킷리스트에 있었고, 작년에 다녀왔는데 여기서 보니 신기하네요!

헤매신다고 하기에는 보얀님 글 양식 너무 예쁜걸요?ㅎ
사진은 해당카페 사진은 아니에요ㅎ 제가 가고싶었던 카페 목록을 가상으로 적어보았답니당!ㅎㅎ

오호 busy에 북마크해보고 다음에 글 쓸 때 활용해야겠어요.
고맙습니다!

@eternalight 님 오랜만이에요!ㅎㅎ
북마크 하신다니 영광입니다~!

스텀프타운커피는 사랑..❤️

언제가보려나요!! 미쿡가서 커퓌를 마시고 싶다아아아!!!ㅋㅋㅋ

아 대단하다... 역시 장인은 도구를 탓하지 않는군요

😘 😘 😘 😘 😘 😘 😘

오~^^ 항상 마크다운이 궁굼했는데, 좋은정보 감사합니다ㅎㅎ

감사합니다ㅎㅎ 또 재미있는 양식 만들어서 공유 드릴께요~!!

  ·  7 years ago (edited)

코드 보고 필요한 부분 저장해놨어요. ㅋㅋㅋ 정말 좋은 팁이네요. 덕분에 낸드와 슬레이님의 고급 마크다운 팁도 잘 읽었어요 :)

결국 창의성을 얼마나 발휘하느냐에 따라 마크다운이라는 건 얼마든지 다양하게 활용될 수 있는 것 같아요. 저는 그저 깔끔한 레이아웃 정도가 최선이라고 생각했는데 말이죠- 리스팀 뿅!

네 맞아요ㅋ 이제 기술 다 익혔으면 그때부턴 갬성입니돠!ㅋㅋ
리스팀 감사해여 :-)

어머나 헤드라인 부분이 특히 너무 예뻐요! 폰트도 달리 쓸 수 있는 건가요?

달리 쓴다기 보다는요ㅎㅎ
영문기준으로 했을때, h1같은 헤드라인용 태그를 쓰면 고딕체로 적용되고요,
본문체는 명조체인것 같아요ㅎ
코드 카피해서 응용해보시고 차이를 느껴보세요~!

경아님! 무척이나 깔끔하고 감각적인 편집입니다!
저도 살짝쿵 적용해서 글 써봤는데 만족스럽네요 :)
친절하게 편집포맷까지 공개해주셔서 감사합니다. ^^

올리아님 포스팅 봤어요! 예쁘게 써주셔서 감사합니다ㅎㅎ

이리하니 정말 잡지처럼 고급지네요:)

감사합니다 씨네님!
영화리뷰를 위한 포맷도 연구해볼께요!ㅎㅎ

아. 문득 전자책 편집에 대한 이야기를 말씀드려야 할 것 같아서 댓글 남겨요. 제가 만드는 전자책은 epub 이라는 파일형식이고요 기본적으로 html & css 를 사용할 수 있습니다. 하지만 보여지는 모니터에 따라서 텍스트가 변화하기 때문에 모바일에서 보여지는 모습을 기준으로 잡고 편집하는게 가독성 측면에서 좋아요.

제가 만들 때는 제가 편집디자이너는 아니기 때문에 아주 기본적으로 제목 크게, 본문 글자 작게 정도로 (보통 소설책처럼) 만들어요. 곧 출간할 전자책에도 뭔가 디자인 적인 요소를 넣고 싶으시다면 같이 협의해서 만들어나가면 좋겠습니다. :)

솔나무님 감사합니다ㅋ 아 그렇군용!ㅎ
네네 좋아요!ㅎㅎ CSS 로 할 수 있는건 CSS 로 적용하고, 특정 이미지 필요한게 있으면 제가 만들어서 전달 드리면 되겠네요ㅎ 언젠간 여쭤봐야지 했는데 꿰뚫고 계셨군여ㅋㅋ 다음 제작기에 반영하겠습니다 :-)

  ·  7 years ago (edited)

저도 전자책 여쭤볼게 있어욥! @solnamu님~ 사진이 많이 들어가는 디자인북의 경우나 웹툰같은 경우도 그럴 것 같다는 느낌을 받았습니다만. 기타 전공서적류들은 본문과 주석배치 등이 편집형식때로 고정되어야 하고, 또 페이지가 고정되어야 인용할 경우 쪽수를 적을 수 있는 문제점들이 있어서 PDF형식으로 나오는 경우가 많던데용~ 혹시 솔나무님께서 출판하시는 양식도 PDF방식으로도 하고계시거나 혹 가능하신지요?

저는 epub을 제작하고 있어요. 대학교재는 말씀하신데로 PDF 로 유통하는게 더 편하지요. :) 다이피아라는 전문 전자책 제작업체에서는 대학교재도 EPUB 으로 제작하는데, 아마 제작단위가 큰걸로 알고 있어요. 전문가는 주석배치나 페이지고정도 구현 가능합니다.

우와~~ 답 주셔서 감사해요^^ 나중에 또 차차 이것저것 좀 여쭤볼게용^^ 고맙습니당~

네! 무엇이든 물어보세요! +_+

오늘도 도전 성공!!! ㅎㅎㅎㅎ 곧 따라해볼게요. 요즘 @thewriting 포스팅도 분위기 좋던데요. 부럽네요. 두분 ㅎㅎㅎ

경아님은 마크다운계 저의 롤모델 이십니다 ㅋㅋㅋ

어머 이런 영광스러운 댓글을 달아주시다니ㅋㅋㅋ
다음은 소설, 일상글 같이 글이 어느정도 있는걸 기준으로 만들어볼께요ㅎ
@energizer000님과 @thewriting 님을 위해서 :-)

우와, 감사합니닷!!

오오 스팀잇에서도 이런 느낌의 포스팅이 가능하네요
다음에 한번 따라서 만들어 봐야겠네요
아 그리고 프로필 배경 관련 포스팅 하신거 잘봤어요 :) 덕분에 싹 바꿔봤네요
행복하세요~

도움됐다니 기쁘네요!ㅎㅎ
기초 마크다운 익히시고 코드를 보시면 더 많은게 보이실꺼에요~!!

경아님이 올려주신 글의 구성이 너무 이뻐서 따라해 보고 싶은데 생각보다 마크다운이 어렵네요. 정말 공부 좀 더 해야할것 같아요..

코드복사하셔서 따라해보세요ㅎ
기본적인것만 익히면 그때부턴 응용이라 생각합니다!ㅎㅎ

짱이에요! 이건 꼭 따라해 볼 거예요~
사진부터 몇 장 골라야겠어요 ㅎㅎ

추가팁을 드리자면, 같은 선상에 놓이는 이미지들끼리 비율이 같아야해요ㅎ (예를들어 1,2)
높이가 같아야 딱 맞아보이는 레이아웃이거든요! 응용하시는거 기대할께요!!ㅎㅎ

좋은 글 감사합니다. 마크다운 문법 익혀서 저도 포스팅할 때 응용을 좀 해봐야겠내요^^

반갑습니다! 위에 링크 걸어둔 기초부터 익혀보시길 추천드립니다!ㅎㅎ

자주 들여다 보려고 리스팀 했습니다. 좋은 자료 감사드립니다. ^^

리스팀 감사합니다ㅎㅎ 앞으로도 계속 업데이트 해볼께요~!!

새로운 레이이아웃이네요
쌍큼하고 보기좋습니다.
사진도 엄청감각적이네요!

사실 제가 글양식이 너무 지겨워져서 말이죱!!ㅋㅋ
근데 필요하셨던분들이 많았던거 같아요ㅎㅎ
코드보시고 응용해보세요 :-)

정말 잡지 느낌 물씬 나네요. 좋은 정보 보고 따라해 봐야겠어요. 고맙습니다~~ 팔로 보팅하고 가요^^

반갑습니다! 위에 링크 걸어둔 기초부터 익혀보시길 추천드립니다!ㅎㅎ

감사합니다. 리스팀 해두었다가 찬찬히 공부하려구요. 스팀잇에서 이런게 가능한줄은 정말 몰랐네요!

가능하지 않은것들을 가능하게 하려고 연구중입니다!ㅎㅎ
코드보시고 한 번 응용해보세요~!!

네^^ 더 예쁜 포스팅을 위해! 공부할게 많은데, 재미있어서 그런지 짐스럽지 않네요. 감사합니다!

나중에 꼭 한번 제대로 된 마크다운 활용해보겠습니다 ㅠ 늘 아침애 출근해서 화장실에서 핸드폰으로 포스팅을 하다보니... 언젠가 맘 잡고 노트북으로 한번 해봐야겠습니다. 좋은 소스 감사해요 ㅠㅠㅠ

반님은 사진리뷰를 많이 올리시니까 이 포맷이 도움이 될꺼 같아요ㅎㅎ
근데 저 스팀잇 날 것으로의 매력도 충분히 매력있다고 생각합니다ㅋ
기존 포맷이 지겨우실때 한번 시도해보세요~!

와.. 좋은내용과 사진!! 팔로우 하고 가요!!

반갑습니다! 위에 링크 걸어둔 기초부터 익혀보시길 추천드립니다!ㅎㅎ

html 뒤적이고 있었는데 고맙습니다!
덕분에 한결 수월해졌어요!

티가든님 다음에 글이 어느정도 될 때의 포맷도 만들어볼께요.
제가 공유드리는것들이 도움되셨으면 좋겠네요 :-)

열심히 보고 적용하기 여념이 없습니다.
말씀만으로도 매우 감사드려요.ㅠ

코딩하는 디자이너의 끝없는 매력...

개(발도 초큼은 아는)디자이너...가 되고싶습니다...ㅋㅋㅋㅋㅋ

와 경아님.......! 진짜 잡지 느낌 물씬나요. 저도 마크다운은 좀 익혔다고 생각했는데 경아님 포스팅 보니 완전 새발의 피였네요.....또르륵...... 편집 포맷 보러 갑니다 총총 ♥

아, 그리고 @segyepark님이 개발하신 스팀툴(https://tool.steem.world/Post/Content) 활용하시면 마크다운이나 HTML을 더 쉽게 볼 수 있습니닷 :D

경아님 대박! ㅎㅎㅎ 제가 스팀잇으로 여러 편집을 찾아보았지만 이처럼 잘된건 처음보네요. 염치불구하고 또 몇번 따라할지 모르겠네요. 뉴욕 베스트 카페 글을 이걸로 도전해 볼게요... ㅎ

뉴욕 베스트 카페글이라닛 듣기만 해도 설레요ㅋㅋ
핀터레스트 스타일도 올려봤어요 구경오세용!ㅎㅎ

저도 좀 더 보기 좋은 글을 위해 마크다운 활용법을 생각해보고 있는데 큰 도움이 되네요 ^^

조르바님 안녕하세요!ㅎㅎ
도움되셨다니 기뻐요! 덕질을 이어나가 보겠습니다ㅋㅋ

오@@ 이런 좋은 자료가 감사합니다. !!!

기초편부터 찬찬히 살펴보시고 코드복사해서 응용해보세요!ㅎㅎ
예쁜 포스팅 기대하겠습니다 :-)

div 태그에 class 까지 지정할 수 있는건 몰랐네요.
좀 자세하게 봐야 겠습니다.^^
오늘 올려주신 2탄은 사진이 주가 되는 포스팅에 아주 좋겠네요^^
감사합니다.^^

호돌박님 안녕하세요ㅎㅎ
class 지정되는게 left/right/justify 3가지 인거 같네요ㅎ
코드 복사하셔서 응용해보세요~!!

포스팅 납치해갑니다 후후 이 포스팅은 멋진 포스팅 라이프를 꿈꾸며 '꼭 이런 포스팅을 해야지'란 생각만 하게 한 후 구석에 박혀 단 한번도 찾지 않은 채 먼지가 쌓여갈 예정입니다!!!!

르캉님 안녕하세요ㅋㅋㅋ
먼지 쌓이기전에 포스팅에 응용해주세여ㅋㅋㅋ

마크다운이 스스로 놀라겠어요.ㅋㅋ

키위님 안녕하세요ㅋ 스칸님 글에서 봤어요!ㅎㅎ
팔로했습니다 자주 봐요~~

너무 보기 좋습니다!
옛날에 다른곳에 쓰던 태그를 써 봤는데 잘 안된네요...
다시 공부좀 해야겠습니다

네네ㅎ 한번 이것저것 시도해보세요.
별 거 없긴한데 응용하다보니 할 수 있는게 있긴 있더라구요!ㅎㅎ

헐! 말도 안돼욥! 이런 포맷이 나오다니 역시 @kynga님! 고맙습니당~~~

꺍 수수님이다!!
3편 구경하러 오세용ㅋㅋ >_<

3편 오디오디 저 완전 기달리고 있었어요 3편! 바로 갑니다~

경아님 너무 예뻐요. +_+
이렇게 꼭 한번 포스팅해보고싶어지네요 :)🖒

라라님 감사해요!ㅎ 3편이 제작되었습니다ㅋㅋ 이름하야 핀터레스트 스타일!ㅋ 구경오세요!!ㅋㅋ

이쁘네요~
공부 좀 해야겠네요.
감사합니다^^

나는 네 블로그가 마음에 들어. 너의 친구가되고 싶다.

제가 찾던 내용이에요. 감사합니다. ^^

와... 돌아다니다가 19일 전 글을 이제야 봤네요. 늘 경아님의 마크다운 글은 잘 보고 있었는데 이건 너무 예뻐서 댓글을 달 수 밖에 없는 ㅠㅠ 저 같은 사람은 죽어도 못할 것 같습니다만 글을 이렇게 예쁘게 꾸며보고 싶은 욕심이 드네요+_+

이제서야 이걸 보다니 ㅠㅜ
정말 잡지를 보는 듯한 포스팅이에요!
진짜 멋져요 +_+
저도 한번 따라해보겠습니다.

아 ....마크다운 너무 이뻐요ㅠㅠ!!!