max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기 IT 이야기/블로그 & HTML2009/04/01 22:55
블로그 스킨을 변경하다 보면, 글을 올리는 영역의 크기가 천차만별입니다. 이미지 업로드시, 글쓰기 영역의 폭에 그 크기를 맞춘 경우에, 좁은 스킨을 이용하다가 넓은 걸로 바꾸는 경우는 문제가 되지 않지만, 그 반대의 경우는 그림이 잘리는 문제가 발생하게 되죠.
본 블로그도 여러번 스킨을 바꾸면서 이런 문제가 발생을 하더라구요. 이럴때, 유용하게 활용할 수 있는 팁 하나 올립니다.
max-width 속성
예전에 max-width에 관한 글을 올린적이 있습니다.
간단하게 말해서, 개체의 폭의 최대 값을 정해놓고, 개체가 이 값보다 큰 경우 크기를 맞쳐주는 역할을 합니다. 유사한 속성으로는 max-height, min-width, min-height 가 있습니다.
스타일 설정하기
블로그 본문에 보여지는 이미지에 대해 CSS를 이용하여 max-width를 설정해 둡니다. 그리고, height는 자동으로 조절되도록 설정합니다.
.imageblock img{
max-width: 680px;
height: auto;
}
티스토리 에디터를 이용해서 이미지를 올린 경우에는 imageblock 이라는 DIV 안에 이미지가 들어가게 됩니다. 그래서 위와 같이 설정해 두면 해당 이미지에 대해, 폭의 최대값은 680px가 되고 높이는 자동으로 설정됩니다.
범용으로 적용하려면 스킨의 구조를 적절히 활용하여 적용하고 싶은 이미지 클래스를 설정하면 될 듯 합니다. 또, 스타일이 중첩되어서 제대로 적용이 되지 않는다면, 속성값 뒤에 !important를 넣어서 강제로 적용 시키는 방법도 있습니다.
결과보기
 적용 전 |  적용 후 |
적용 전에는 화면에서 사진이 잘린걸 볼 수 있지만, 적용 후에는 정상적으로 보여지는 걸 알 수 있습니다.
나머지
max-width 속성은 인터넷익스플로러 6 (IE6)에서는 지원되지 않습니다. 현재 크롬과 파이어폭스, 인터넷익스플로러 7, 8 (IE7, IE8)에서는 정상적으로 동작하는 걸로 확인되었습니다.
'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글
| 블로그에 LaTeX 수식 입력하기 (6) | 2009/04/24 |
|---|---|
| 새 파비콘(favicon)과 블로그이미지, 대표이미지 (6) | 2009/04/09 |
| max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기 (17) | 2009/04/01 |
| 태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... } (2) | 2009/03/30 |
| 한RSS 디렉토리 등록 (2) | 2009/03/27 |
| 내 블로그가 추천블로그 + 다음 블로그 지표보기 (12) | 2009/03/12 |
TRACKBACK | http://www.crazybar.net/trackback/867
-
SUBJECT CSS - 가로사진 & 세로사진 구분없이 정사각형 안으로 쏙 들어오는 썸네일 만들기
2009/04/01 23:01 TRACKED FROM Crazy Life on Net 삭제테터데스크 사용중에 보면 썸네일 크기를 조정하기가 쉽지 않다. 보통은 가로나 세로 기준 하나만 적용해서 이미지 크기를 조정하게 되므로 사진의 위아래나 좌우가 잘리기 마련이다. 이때 사용하면 좋은 CSS 스타일이 바로 max-width와 max-height. 영어단어에서 유추할 수 있듯이, 최대 높이와 최대 너비를 지정해 주는 구문인데, 이를 이용하면 이미지의 최대 크기가 제약되므로, 화면상의 이미지는 내가 지정해둔 공간 안으로 쏙 들어오게 된다. 정..
댓글을 달아 주세요
(우선 전 완전 초짜입니다. 따라만 할뿐 ㅠ.ㅠ)
제 스킨 css를 보니 이미지블럭이란 부분이
.imageblock {border:none; padding:0; margin:5px 0;}
요렇게 되어있는데...위에 까만바탕에 써주신 것처럼 괄호안에 넣으면 되나요? 전 적용이 잘 안되네요.
저의 경우에는 어떻게 수정해야 하는지요?
어렵게 생각하실 것 없습니다.
말씀하신 .imageblock { .... } 아랫줄에 위 내용을 추가하시면 됩니다.
.imageblock { .... } 는 .imageblock 자체에 대한 속성이고, 위 내용은 .imageblock에 속해 있는 img 에 대해서만 적용이 됩니다.
그럼 성공하시길~~
오호 이런 것도 있는거군요!
호아범님한테 많이 배우고 있습니다 ㅎㅎㅎ 저도 적용을 함 해놔봐야 겠어용.
감사합니다~
아이쿠... 초간단 허접팁인걸요.
그냥, 자꾸 잊어버려서 기억해 두려고 정리했을 뿐입니다요.. ^^
좋은 팁인데요.
한수 배우고 갑니다. ^^*
감사합니다. ^^
넘 간단한거라 좀 쑥스럽네요.. ㅎㅎ
너무 좋은요..바로 적용해야겠어요..ㅋㅋ
꼭 성공하시길 바랍니다. ^^
css에 .imageblock {border:none; padding:0; margin:5px 0;} 아래에
.imageblock img{ max-width: 680px; height: auto; } 추가하고
사진을 넣어봤는데..적용되지 않네요
사진이 700 사이즈로 ..에궁
올리는 단계에서는 블로그 스킨에 설정된 값으로 적용이 되구요.
화면에 뿌려지는 시점에서 위 값이 적용 됩니다.
그리고, 혹시 IE6 쓰시는 건 아니시죠? ^^
IE8로 확인해 본 결과 스타일이 적용되고 있습니다.
혹시, 큰 사이즈 그림이 올려진 글이 있나요?
나중에 스킨 바꿀때 도움을 받을 수 있겠군요~~ ^^
네.. 스킨마다 글영역의 폭이 다른데, 그럴때 알고 있으면 유용할 것 같습니다. ^^
오 걱정거리였는데 감사합니다
도움이 되셨다니 저도 기쁩니다. ^^
css스타일에 max-widh를 정의해 둔 것을 보고 의미가 무언가 싶어서 검색하다가 님 블로그에 들어와서 유용한 정보를 얻고 가네요. 감사합니다.
아주 간단한 팁일 뿐인걸요 뭘.. ^^
방문 감사드립니다.