마크다운 & 태그 어디까지 해봤니? #4 - 세로로 된 타이틀이 적힌 양식

in kr •  10 months ago

#4 - 세로로 된 타이틀이 적힌 양식

명언 또는 시, 짧은 글에 어울리는 레이아웃을 만들어봤어요.
아 이번껀 정말 마음에 드네요..!!
이 양식은 시를 사랑하시는 분들을 생각하며 만들었습니다.
*PC 에서 보았을때 가장 예쁩니다.
모바일은 가로로 봐야 블럭들이 밀리지 않아요.
(Div 코드 썼을 때 모바일에서 블럭들이 밀리지않는 레이아웃 연구중입니다..!)




detail.PNG

프리뷰
글 올리기전에 미리보기에서는 이런 레이아웃이었는데,
포스팅후에 div 블럭들이 밀리면서 글 수정 30번 이상 했습니다...
하얗게 불태웠습니다...




Style 1 : 이미지, 타이틀, 본문














  어떤때는 안찍어.

  아름다운 순간이 오면,


  카메라로 방해하고 싶지 않아.


  그저 그 순간 속에 머물고 싶지.


  그래 바로 저기 그리고 여기.




  영화 '월터미티의 상상은 현실이 된다' 중
  숀펜이 눈표범을 발견한 순간.








Style 2 : 이미지, 본문



  어떤때는 안찍어.

  아름다운 순간이 오면,


  카메라로 방해하고 싶지 않아.


  그저 그 순간 속에 머물고 싶지.


  그래 바로 저기 그리고 여기.



  영화 '월터미티의 상상은 현실이 된다' 중
  숀펜이 눈표범을 발견한 순간.





Style 3 : 이미지 없는 스타일
이렇게도 응용가능!







  어떤때는 안찍어.


  아름다운 순간이 오면,


  카메라로 방해하고 싶지 않아.


  그저 그 순간 속에 머물고 싶지.


  그래 바로 저기 그리고 여기.






  영화 '월터미티의 상상은 현실이 된다' 중
  숀펜이 눈표범을 발견한 순간.

  어떤때는 안찍어.


  아름다운 순간이 오면,


  카메라로 방해하고 싶지 않아.


  그저 그 순간 속에 머물고 싶지.


  그래 바로 저기 그리고 여기.






  영화 '월터미티의 상상은 현실이 된다' 중
  숀펜이 눈표범을 발견한 순간.








편집후기


한줄요약 : 오늘꺼 넘 맘에 들지만 글 올리고 틀어져서 30번 이상 수정함ㅋㅋ

이번 레이아웃에는 투명이미지br을 이용해 세로글쓰기를 해보았어요. 야매지만 이런 코드를 이용해서 Y축도 사용할 수 있다는 것을 확인했습니다! 제가 퍼블리셔도 아닌지라 div 블럭들이 밀리기 시작하면 코드를 수동으로 수정합니다. 노가다 코드들이라 죄송합니다..ㅋㅋㅋ

스팀잇에 올라온 마크다운 팁, 트릭은 왠만한건 다 읽어봤는데, 더 이상 새로운 코드가 없네요. 저는 기술이 할 수 없는 ‘감성’을 전하고 싶고, 기존의 양식을 깨고 싶고, 스팀잇에서도 다른 블로그에서 쓰는 양식들을 만들 수 있다는걸 증명하고 싶어요.근데 제일 문제가 되는게, 웹페이지가 기기에 따라 비율이 바뀌기 때문에 그 부분은 아직 해결하지 못했네요ㅎ 어쨌든 제가 재미있는한 이 실험을 계속 될 예정입니다ㅋㅋ




코드보기전에

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

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

이 글의 소스코드는
세계님이 만들어주신,스팀툴 에서 보실 수 있습니다.




[마크다운 & 태그 어디까지 해봤니?] 지난글

#1 - 티져 (feat.글자반 여백반)
#2 - 잡지같이 포스팅해보자
#3 - 핀터레스트 스타일로 포스팅해보자


코드 응용하셔서 포스팅하시고 저를 멘션하시면
먼지같은 보팅파워로 응원하러 갈께요 :-)

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:  

오! 좋은 글 감사합니다! 덕분에 마크다운 문법에 흥미를 가지고 조금씩 배우고 있습니다.!

재미있는 실험들입니다!

·

감사합니다ㅋ 오전에 코드고치느라 영혼이 날라가는줄 알았어요ㅋ

빨리 따라 해봐야 하는데...
언제 저는 이렇게 산뜻하게 올려보나..
감사합니다. 많은분들 배워보시라 리스팀 합니다!

·

리스팀 감사해여ㅋ 어제 댓글 달아주실때쯤 div 블럭들이 너무 밀려서 엉망이었을꺼에요..ㅋㅋ
지금은 다 수정했습니다!

·
·

감사합니다!!

좋은 내용 매번 감사히 보고 있어요. 마크다운을 활용한 편집의 묘미가 나름 재밌어요. 핀터레스트는 어떻게 활용할까 하다가 어제 재밌는 사연하날 활용해보자란 생각이 들어 조만간 활용할 것 같습니다. 가장 첫번째 이미지가 가장 제 취향이네요. 연구하시는 자세 본받고 싶어집니다. 좋은 하루 되시길 바라봅니다.

·

원래 첫번째 이미지대로 딱 되었었는데, 업로드 하고나서의 변수가 있었네요ㅋ
좋은글에 어울리는 편집양식을 만들고싶어서 만드는건데 도움이 되셨다니 정말 감사해여ㅎㅎ

우와~ 정말 대단하네요. 저도 한번 도전해봐야겟어요.
감사합니다.

마크다운으로 양식을 한 번 만들어두면 편하더라구요.ㅎ

우와...저는 글만 쓰는것도 머리가 아픈데..=_+ㅋㅋ
좀 배워봐야겠다는 생각이 ^^ㅋㅋ
잘 보고 갑니다. ~!

ㅜㅜ 감동이네요. 역시 대단하십니다. 가져가서 활용해도 될까요? ㅋ 리스팀 할께요!!

·

당연하죠! 근데 이번 레이아웃이 좀만 틀어져도 밀려서 자신있게 써보시라고 말하기가 힘드네요ㅋ

·
·

ㅋㅋ 그럼 제가 쓰기엔 좀 어려울수도 있겠네요.. 이쪽은 완전 잼병인 제가 경아님 덕분에 코딩이라는 걸 배우고 있네요. 글쓰는 것만으로도 어렵긴 하지만 더 돋보이도록 만들어주는 좋은 레이아웃들을 공유해주셔서 정말 감사합니다~!

마크다운도 이렇게되는군요ㅎ 전 마크다운에디터가 아직도 적응이안됩니다...ㅜㅜ

여러가지로 시도하고 계시군요! ㅎㅎ
잘보고 갑니당! 저도 한 번 알아봐야겠어요!

진짜 금손이십니다!!! 늘 많이 배우고 가요 💗

·

과찬이십니다ㅋ 자주 놀러오세요~!!ㅎ

완전 다른느낌 너무나 좋습니다

ヾ(๑╹◡╹)ノ" 아름다운 레이아웃이네요...👏👏👏👏👏

정말 애쓰신 흔적이 역력합니다!!

·

키위님 감사합니다!! 크립토 챌린지 낼 오전까지니까 참여해보세요! 저도 냅니당 :-)

이건 리스팀해놓고 시 올릴때 써 볼게요^^

·

보얀님 감사해요! 자꾸 div 가 밀려서 한 30번 고친거 같아여.
그래서 자신있게 권해드리기가ㅋㅋ 제 마음을 이해하시려면 복사해서 응용해보셔야 알 수 있으실꺼에요..ㅎㅎ

고생하셨어요. 경아님. :)
덕분에 많은 분들이 도움받고 있답니다. 물론 저 포함해서요. :D

·

초코님 감사해여ㅎ 좀 더 쉽게 따라할 수 있는 레이아웃을 만들어볼께요!!ㅎㅎ

이렇게 자유자재로 사용하는 분들보면 부럽지만... 전 귀차니즘이라...ㅋㅋ 다음에 저도 한번 해볼께요~ 경아님^^

우와.. 저는 디자인 정말 똥손인데 이런 거 볼때마다 시각적 쾌감을 느낍니다. 최고!!

멋진 강좌 잘 보고 갑니다...

오늘도 새로운 레이아웃이 탄생했네요+_+ 조만간 테스트겸 간단히 하나 들고 가볼게요 ㅎㅎ

·

네 기대할께요! 멋진 사진들 많으시니까 조금만 응용하시면 저보다 더 멋지게 만들어내실 수 있으실꺼에요!

정말 끝장나는군요.!!!
이정도면 마크다운 장인!!!

·

장인 시켜주시는 겁니꽈!!ㅋ 그러기엔 제 노가다 코드들이 넘 누추해여ㅋㅋ
누군가 레이아웃 포맷 에디터좀 만들어줬으면..ㅋㅋ

Hi love
I like you
Select me miss

이거 저번에 양식 만들어주신 뒤로 늘 궁금했던거에요!
공부해봐야 겠네요, 감사합니다.ㅎㅎ

오늘꺼 넘 맘에 들지만 글 올리고 틀어져서 30번 이상 수정함ㅋㅋ

웃고 계시지만 왠지 눈물이... ㅠㅠ
저는 경아님거 코드 보면서 따라하는 건데도 잘 안 되더라구요...-ㅁ-... 하아...
그런데 모바일과 피씨에 적합한 레이아웃이 서로 달라서 그 부분이 참 어려운 문제일 것 같긴 합니다.

·

넹ㅋ 항상 이미지가 문제에요ㅋㅋㅋ 눙물..

너무 부러워요.
당장 따라해보고 싶은데
일단 리스팀하고 어찌어찌 해 볼께요. ㅠㅠ

·

비슷한 글 양이면 어렵지 않게 하실 수 있을꺼에요!!ㅎㅎ
리스팀 감사합니다! 다음 레이아웃도 고민해보겠습니다! :-)

경아님!!!!!!!!!! 이번꺼 완전 제스타일이에요. 조만간 여행을 다녀올 예정인데, 포스팅에 경아님 마크다운을 한번 활용해봐야겠다고 다짐했습니다 +_+ 근데 수정을 30번 하셨다니............................. 크흡...................................
붓다의마음.gif

·

송이님!! 마크다운 덕질 해보아요!!ㅋㅋㅋㅋ
점점 빠져듭..때려쳤...빠져듭..니다!!ㅋㅋㅋ

짱짱짱짱 멋집니다.
원래 노가다성 코딩이 제일 어려운데 ㅠㅠ

예시를 보다

아름다운 순간이 오면,
카메라로 방해하고 싶지 않아.

이 문구가 탁하고 억하며 눈에 들어왔습니다.
맞아요.
공감합니다.

경아님 이번 레이아웃은 신선하고 단정한 느낌이 듭니다.
늘 감사합니다^^ 적용해서 글 올려볼게요^^

경아님 감사해요. 경아님 형식으로 한 번 써봐야겠어요!

넘ㅎ 이뻐요.
응용 욕구 풀이라 풀봇하고 가지고 가요.^^

좋은 정보 감사합니다~^^ 아직까지 저에겐 너무 어려운 마크다운이네요ㅎㅎ

이쁜데 잘못 쓰면 어떨지...음 그거 떠오른건 저뿐인가요? 나는 가끔 눈물을 흘린다ㅋㅋㅋ

·

그냥쓰느니만 못한 글들이 많아지면..그만할라고요 넘나 후회될듯..ㅋㅋㅋ

늘 경아님의 포스팅은 감탄을 하지 않을 수 없네요.
이번 것은 더 대단한 듯 합니다.
리스팀해놓고 저도 차근차근 공부해봐야겠습니다.^^
너무 감사합니다.

조만간 정독하겠습니다 ㅎㅎ

감사합니다. 그때 그때마다 찾았는데, 한번에 다 정리해주셨네요. 스티밋이 일주일 지나면 박제되니 코드를 다시 확인할수없고., 항상 삽질! 쇼텀메모리 탓하게 되네요. 요런건 리스팀해야죠. 물론 일주일이지만, 블로그에서 두구두구 욹어먹어야죠.

ps.기초 마크다운팁 두번째의 코드가 잘못된거 같아요.

·

피드백 감사합니다! 링크 수정했습니다ㅎㅎ
조금씩 응용하시다보면 금방 알게 되실꺼에요~!!ㅎ

경아님 덕분에 제 포스팅에 잘 활용했어요!
자꾸 밀리고, 조금만 다르게 해도 틀어지는 바람에 몇 시간동안 끙끙댔지만
해놓고 보니 뿌듯하네요ㅎㅎ 감사합니다 :)

좋은 정보 잘 보고갑니다!

와.. 정말 경아님.. 정말.. 크으.......