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

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

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

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

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

아
름
다
운

순
간
에
는

_{어떤때는 안찍어.}

_{아름다운 순간이 오면,}

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

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

_{그래 바로 저기 그리고 여기.}

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

Style 2 : 이미지, 본문

_{어떤때는 안찍어.}

_{아름다운 순간이 오면,}

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

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

_{그래 바로 저기 그리고 여기.}

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

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

아

름

다

운

순

간

이

오

면

_{어떤때는 안찍어.}

_{아름다운 순간이 오면,}

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

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

_{그래 바로 저기 그리고 여기.}

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

_{어떤때는 안찍어.}

_{아름다운 순간이 오면,}

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

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

_{그래 바로 저기 그리고 여기.}

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

편집후기

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

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

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

코드보기전에

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

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

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

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

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

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