PC와 모바일상에서 사진크기가 똑같이 보이는 것을 반응형으로 PC에서는 그대로 출력이 되지만 모바일에서는 모바일 크기에 맞추어서 출력되도록 하는 코딩을 알아보고자 합니다.
블로그로 돈벌기 위해서는 인터넷이 되는 컴퓨터만 있다면 충분히 가능합니다.
저는 티스토리로 돈벌기 위해서 즉 애드센스로 수익을 내기 위해서 지난 3년 넘게 제가 터득한 노하우들을 공개하려고 합니다.
하지만 애드센스 승인을 받았다고해서 당장에 수익이 발생하는 구조는 아니라는 것입니다.
매일 꾸준하게 1포씩 해나가다 보면 시간이 지나게 되면 유입=광고클릭=수익으로 이어지는 구조가 발생하게 되는 것입니다.
제가 포스팅한 글들을 제대로 읽으신다면 월 300만원의 수익은 아니더라도 꾸준하게 부업으로 수익이 발생하게 될 것입니다.
Html 편집이 아닌 CSS로 수정하여서 간혹 세로 사진이나 가로 사진일 경우 그대로 모바일상에도 그대로 출력이되는 것을 각자 화면에 맞게 출력하는 소스입니다.
위의 사진에 보이는 것이 바로 PC(피시)에서의 사진(이미지)출력화면입니다.
물론 어떤 분들은 각종 키워드에 따라서 세로로 길게하신분들도 있을것입니다.
이러한 것들이 한두개이면 비공개로 전환후에 수정을하고 나서 다시 공개로 돌리면 손쉽게 해결될 일이지만,그것은 어디까지나 포스팅이 적을때의 문제입니다.
포스팅의 수가 100개만 넘어가더라도 일일이 글들의 사진 크기를 수정하기란 참 귀찮고 또 어렵습니다.물론 아무리 반응형으로 출력이 된다고하지만,플러그인으로 문제를 수정한다고하더라도 쉽지가 않습니다.
아무리 수정을한다고 하더라도 피시에서 출력되던 이미지들이 모바일에서 그대로 출력이 되기 때문인데요.
위의 사진이 바로 모바일에서 반응형 CSS 이미지크기를 모바일에 맞게 설정하지 않았을때의 사진입니다.
보시면 아시겠지만 피시에서와 동일하게 출력이 되는 것을 보실수가 있을텐데요.
모바일상에서 이렇게 출력이 된다면 제대로 사진을 볼 수가 없답니다.왜냐면 가로로 이미지를 만들어서 이 사진이 무엇을 의미하는지 알수가 없기 때문입니다.
여기에서 이 사진을 모바일에서 보기 쉽게 이미지를 모바일 크기로 바꾸어 보겠습니다.
저는 사진크기 강제적용이라고 이름을 지어 보았습니다.
1.티스토리에서 스킨편집을 클릭하신 후에 html 편집을 클릭해 주세요.
2.html편집을 클릭하신 후에 CSS로 넘어가주세요.html에서 수정하거나 추가할 부분은 없답니다.
3.CSS 맨 밑으로 내려가서 /* 사진 반응형으로 */일단 이렇게 이것이 무엇을 의미하는 코드인지 표시를 합니다.
4..imageblock img라고 입력해 주시면 되는데요.
여기서 width:100%는 사진의 크기를 가로사이즈를 다 사용하겠다는 의미입니다.이것은 자신이 원하는 사진 크기인 90%,80% 이런식으로 수정하시면 됩니다.
그리고 max-width:800px라고 하는것은 자신의 본문너비를 감안하여서 너비를 수정하시면 되겠습니다.저같은 경우에 PC에서 800px을 주었을때에 사진이 가로전체를 차지하여서 800px를 준 것입니다.
그리고 height:auto 그대로의 값을 주게된다면 세로길이는 원본 사진 그대로의 세로 길이로 나타나게 될 것입니다.
auto 부분을 자신이 원하는 세로사이즈인 px로 수정을 해주시면 되겠습니다.
여기서 max-widht:800px를 주게되더라도 모바일상에서의 가로 길이는 보는 사람의 모바일에 맞게 출력이 됩니다.
저 같은 경우에는 보통 모바일 width의 경우에 300px이라고 가정을하여서 hedth는 230px를 선언하였습니다.
이 수치는 각각의 블로그에서 사용하는 스킨과 또 여러가지 변수가 있을수가 있어서 이부분만큼은 자신의 블로그에 맞는 크기를 적용하시면 되겠습니다.
위에 3번째 사진을 보시는바와 같이 적용시키고 나니 모바일 화면에 맞게 수정이 된것을 확인할수 있었습니다.
/* 사진크기 강제적용 */
.imageblock img
아 이미지는 제 블로그를 모바일에서 본것을 가로 이미지를 선호하기에 그에 알맞게 수정한것입니다.
P.s:세로형 이미지의 경우에는 사진을 출력하는데 걸리는 버퍼링으로 인해서 광고가 뜨지 않을수 있습니다.이는 자신의 컴퓨터나 스마트폰에서 그대로 출력된다고 하더라도 모든 pc와 모바일 환경이 다 다르기 때문입니다.