마크다운 & 태그 어디까지 해봤니? #4 - 세로로 된 타이틀이 적힌 양식
#4 - 세로로 된 타이틀이 적힌 양식
명언 또는 시, 짧은 글에 어울리는 레이아웃을 만들어봤어요.
아 이번껀 정말 마음에 드네요..!!
이 양식은 시를 사랑하시는 분들을 생각하며 만들었습니다.
*PC 에서 보았을때 가장 예쁩니다.
모바일은 가로로 봐야 블럭들이 밀리지 않아요.
(Div 코드 썼을 때 모바일에서 블럭들이 밀리지않는 레이아웃 연구중입니다..!)
프리뷰
글 올리기전에 미리보기에서는 이런 레이아웃이었는데,
포스팅후에 div 블럭들이 밀리면서 글 수정 30번 이상 했습니다...
하얗게 불태웠습니다...
Style 1 : 이미지, 타이틀, 본문
아
름
다
운
순
간
에
는
아름다운 순간이 오면,
카메라로 방해하고 싶지 않아.
그저 그 순간 속에 머물고 싶지.
그래 바로 저기 그리고 여기.
영화 '월터미티의 상상은 현실이 된다' 중
숀펜이 눈표범을 발견한 순간.
Style 2 : 이미지, 본문
어떤때는 안찍어.
아름다운 순간이 오면,
카메라로 방해하고 싶지 않아.
그저 그 순간 속에 머물고 싶지.
그래 바로 저기 그리고 여기.
영화 '월터미티의 상상은 현실이 된다' 중
숀펜이 눈표범을 발견한 순간.
Style 3 : 이미지 없는 스타일
이렇게도 응용가능!
아
름
다
운
순
간
이
오
면
어떤때는 안찍어.
아름다운 순간이 오면,
카메라로 방해하고 싶지 않아.
그저 그 순간 속에 머물고 싶지.
그래 바로 저기 그리고 여기.
영화 '월터미티의 상상은 현실이 된다' 중
숀펜이 눈표범을 발견한 순간.
어떤때는 안찍어.
아름다운 순간이 오면,
카메라로 방해하고 싶지 않아.
그저 그 순간 속에 머물고 싶지.
그래 바로 저기 그리고 여기.
영화 '월터미티의 상상은 현실이 된다' 중
숀펜이 눈표범을 발견한 순간.
한줄요약 : 오늘꺼 넘 맘에 들지만 글 올리고 틀어져서 30번 이상 수정함ㅋㅋ
이번 레이아웃에는 투명이미지 와 br을 이용해 세로글쓰기를 해보았어요. 야매지만 이런 코드를 이용해서 Y축도 사용할 수 있다는 것을 확인했습니다! 제가 퍼블리셔도 아닌지라 div 블럭들이 밀리기 시작하면 코드를 수동으로 수정합니다. 노가다 코드들이라 죄송합니다..ㅋㅋㅋ
스팀잇에 올라온 마크다운 팁, 트릭은 왠만한건 다 읽어봤는데, 더 이상 새로운 코드가 없네요. 저는 기술이 할 수 없는 ‘감성’을 전하고 싶고, 기존의 양식을 깨고 싶고, 스팀잇에서도 다른 블로그에서 쓰는 양식들을 만들 수 있다는걸 증명하고 싶어요.근데 제일 문제가 되는게, 웹페이지가 기기에 따라 비율이 바뀌기 때문에 그 부분은 아직 해결하지 못했네요ㅎ 어쨌든 제가 재미있는한 이 실험을 계속 될 예정입니다ㅋㅋ
코드보기전에
기초 마크다운 팁
이지스팀잇-마크다운을 알아보자1
이지스팀잇-마크다운을 알아보자2
고급 마크다운 팁
낸드님 -마크다운 심화와 태그
Slay님 - 왼쪽 및 오른쪽 정렬하는 법과 이미지 옆에 문단을 정렬시키는 방법
이 글의 소스코드는
세계님이 만들어주신,스팀툴 에서 보실 수 있습니다.
[마크다운 & 태그 어디까지 해봤니?] 지난글
#1 - 티져 (feat.글자반 여백반)
#2 - 잡지같이 포스팅해보자
#3 - 핀터레스트 스타일로 포스팅해보자
먼지같은 보팅파워로 응원하러 갈께요 :-)
오! 좋은 글 감사합니다! 덕분에 마크다운 문법에 흥미를 가지고 조금씩 배우고 있습니다.!
재미있는 실험들입니다!
감사합니다ㅋ 오전에 코드고치느라 영혼이 날라가는줄 알았어요ㅋ
빨리 따라 해봐야 하는데...
언제 저는 이렇게 산뜻하게 올려보나..
감사합니다. 많은분들 배워보시라 리스팀 합니다!
리스팀 감사해여ㅋ 어제 댓글 달아주실때쯤 div 블럭들이 너무 밀려서 엉망이었을꺼에요..ㅋㅋ
지금은 다 수정했습니다!
감사합니다!!
좋은 내용 매번 감사히 보고 있어요. 마크다운을 활용한 편집의 묘미가 나름 재밌어요. 핀터레스트는 어떻게 활용할까 하다가 어제 재밌는 사연하날 활용해보자란 생각이 들어 조만간 활용할 것 같습니다. 가장 첫번째 이미지가 가장 제 취향이네요. 연구하시는 자세 본받고 싶어집니다. 좋은 하루 되시길 바라봅니다.
원래 첫번째 이미지대로 딱 되었었는데, 업로드 하고나서의 변수가 있었네요ㅋ
좋은글에 어울리는 편집양식을 만들고싶어서 만드는건데 도움이 되셨다니 정말 감사해여ㅎㅎ
우와~ 정말 대단하네요. 저도 한번 도전해봐야겟어요.
감사합니다.
마크다운으로 양식을 한 번 만들어두면 편하더라구요.ㅎ
우와...저는 글만 쓰는것도 머리가 아픈데..=_+ㅋㅋ
좀 배워봐야겠다는 생각이 ^^ㅋㅋ
잘 보고 갑니다. ~!
; )
ㅜㅜ 감동이네요. 역시 대단하십니다. 가져가서 활용해도 될까요? ㅋ 리스팀 할께요!!
당연하죠! 근데 이번 레이아웃이 좀만 틀어져도 밀려서 자신있게 써보시라고 말하기가 힘드네요ㅋ
ㅋㅋ 그럼 제가 쓰기엔 좀 어려울수도 있겠네요.. 이쪽은 완전 잼병인 제가 경아님 덕분에 코딩이라는 걸 배우고 있네요. 글쓰는 것만으로도 어렵긴 하지만 더 돋보이도록 만들어주는 좋은 레이아웃들을 공유해주셔서 정말 감사합니다~!
마크다운도 이렇게되는군요ㅎ 전 마크다운에디터가 아직도 적응이안됩니다...ㅜㅜ