반응형 이미지 사이즈 자동변경!

반응형 이미지 사이즈 자동변경!

반응형 블로그에서 이미지와 동영상의 사이즈를 자동으로 변경하려면 어떻게 해야할까?

여럿 전문가들의 스킨을 요목조목 분석하고 정리하면서 나에게 맞는 스킨을 찾았다?
그런데 동영상하고, 이미지의 크기는 변하지 않네 ㅠㅠ 아이고 대략난감
그래서 제이쿼리(jQuery) 를 사용해서 하는 법도 응용을 해보고 이래저래 CSS도 수정해 보았으나~ 도무지 머리만 아프고, 정작 해결되지 않는 이 문제를
생각보다 간단히 해결 할 수 있었다.

아놔~ 뭐야~ 티스토리 모바일앱 출시 기념으로 포스팅을 하고나서 폰에서 확인하니까 이상하게 이미지가 너무 크게 보이길래.. 컴퓨터 익스플러로 봤더니만 역시나 큼직하니~ 보기싫네~ 에레이!

 

아참, 깨알 정보
이제 막 티스토리에 재미를 붙인 블로거들은 다소 불편하게 skin.html 이나 style.css 의 소스를 변경하고 저장하고 그렇게 왔다 갔다 하면서 붙여넣고 또다시 지우고 반복하는 불편함을 겪었을 것이다.

웹 문서(코딩) 속에서 주석처리 하는 방법은 모두 다르다.

아, 주석은 설명글로 이해하면 빠른데~ 태그 수정이나 타인이 이해하기 쉽게 설명을 달아놓는 글이다.
주석은 화면에 보이지 않는다.

 

HTML과 CSS, 자바스크립트는 주석 처리는 다르다.
html 주석 표기 방식
<!--샬라샬라-->

JavaScript(자바스크립트) 주석 표기 방식
한 줄 전체이면 //샬라샬라
한 줄 이상이면 /*샬라샬라*/

css 주석 표기 방식
/*샬라샬라*/

생각보다 설명이 길었다.

img {
    display: inline-block;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}

원래 위의 소스처럼 하는게 정석인데 익스플로 ie8 에서는

적용이 안되기 때문에 아래처럼 강제 소스 삽입으로 대체한다

 

img {
    display: inline-block;
    width: auto\9 !important; /* ie8 */
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}

 

관리자 모드 / 꾸미기 / HTML/CSS편집에서

티스토리 style.css 삽입!!

짜잔! 이제야 제대로 보인다!

도움이 되셨으면 좋겠네요

 

뭔가 반말로 시작했다가.. 존칭으로?

ㅋㅋㅋㅋㅋㅋ