Tiny Logs 

레이아웃 깨짐 방지 CSS 팁

타이니 | 2013.07.18 01:30 | 조회 9,252
카테고리분류 : 기타 항목
En clases HTML y CSS

레이아웃을 깨트리는 요소가 이미지 뿐만아니라 게시글에 삽입한 테이블이 될 수도 있겠고 html 안의 모든 태그가 대상이 될 수 있습니다. width가 강제지정 되어 있다면요. 아예 width 지정이 안 되어 있다면 div 블록안인 경우 알아서 줄어듭니다.

문제가 되는 경우는, 사이트 (자료가 아주 많이 이미 올라와있는)의 레이아웃을 변경하시거나 다른 솔루션 또는 구 버전에서 디비 데이터 옮겨오는 마이그레이션 하실때요. 새로운 사이트의 컨텐츠 영역이 과거보다 더 작다면 레이아웃이 깨지게 되겠죠.

정석은.
디비의 내용 중 게시글 안에 img 태그의 width 부분이나 인라인 스타일의 width 부분을 레이아웃 안깨지게 일괄수정하고, 게시글이 아닌 생성 페이지 등도 찾아 수정하는 겁니다.

이게 좀 까다로우니 좀더 쉽고 간편하고 모바일이라든가 모든 곳에서도 한두줄 추가로 싹 다 해결되는 팁이 되겄습니다.

요점은...

게시글 보기 부분의 레이아웃 php 또는 게시판 모듈 테마의 view 부분에 스타일로 원하는 요소의 max-width 를 지정해 주는 것입니다. 더불어 width가 줄어들면서 세로길이도 비율에 맞추어 자동 조정되게 하고요.

<img> 가 될수도 있겠고 <table> 태그가 될 수도 있겠고요.
!important 요 부분이 중요한데요. 가령...

<style type="text/css">
<!--
#vContent img {max-width: 100% !important; height: auto !important;}
-->
</style>

위에서 $vContent 아이디는 킴스큐 기본게시판테마의 view 부분의 본문 영역을 감싸고 있는 div 의 아이디입니다.
만약 다른 아이디라면 그에 맞추셔야겠고요. 게시판이 아니라 페이지들 이라면 레이아웃 소스에서 컨텐츠를 담고 있는 div 의 아이디를 찾아 응용하십시오.

이렇게 추가한다면 vContent 아이디를 쓰는 요소(div라든가) 안의 이미지 전체에 대해 img 태그에 width='900' 뭐 이런식으로 되어 있더라도 무시하고 상위 요소의 레이아웃을 깨트리지 않고 알아서 이미지가 줄어듭니다.
(IE8 이상에서 작동함)

이걸 응용하면 전에 홈피 레이아웃에서 삽입한 이미지나 테이블표 등이 새 레이아웃에 적용했을때 너무 커서 디자인이 깨져보이지 않게 할 수 있겠죠. 더불어 모바일 등에도 안 깨지고요.

문제 생기셨을 때 table 태그 div 태그 등등 가로길이 강제지정된 것들이 너무 많아 골치 아플 때 응용 하십시오.
크리에이티브 커먼즈 라이선스
22개(1/3페이지) rss


많이 본 글최근 90일내 많이 본 글입니다.
댓글 많은 글최근 90일내 댓글 많은 글입니다.
Tag Cloud
등록된 태그가 없습니다.

Visits Counter
  • 34오늘 방문
  • 96어제 방문
  • 34오늘 페이지뷰
  • 97어제 페이지뷰
  • 2,624이번 달 방문
  • 2,247지난 달 방문