반응형을 위한 css팁입니다..ㅇㅅㅇ 정보
반응형을 위한 css팁입니다..ㅇㅅㅇ
본문
그냥 혼자 깔짝거리다가 생각해낸건데 간단하게 글로쓰겠음
특정영역을 제외하고 %로 맞추고싶을때가 있습니다.
뭐간단하게말하면
이렇게 하기를 원하실때 방법이 3가지있습니다.
1번방법은 table를 이용하는 방법입니다. table 전체사이즈값을 100%로 주고
자바스크립트를 이용해 브라우저사이즈를 비교해서 css에 값을 줘서 onload와 onresize시에 반응형사이즈를 작동시켜주는방법과
(지금까지 이방법써왔음...ㅎㄷ;)
그런데 오늘 간단한 방법이 떠올랐습니다.
#size {padding-right:50px; width:100%;}
.test1 { width:100%;}
.test2 { top:0px; right:0px; position:absolute; width:50px;}
<div id="size">
<div class="test1">100%-50px영역</div><div class="test2">50px영역</div></div>
이방법을 쓰고있습니다..ㅇㅅㅇ;
독자를 배려한 글이 아니라서 자게에 올립니다...-seuai-
특정영역을 제외하고 %로 맞추고싶을때가 있습니다.
뭐간단하게말하면
100%에서 50px를 제외한나머지영역 | 50px |
1번방법은 table를 이용하는 방법입니다. table 전체사이즈값을 100%로 주고
<table width="100%">
<tr><td><p>100%에서 50px를 제외한나머지영역</p></td>
<td width="50px"><p>50px</p></td>
</tr>
</table>
이런식으로 구성하는 방법입니다.그러나 웹표준에 어긋나는 방법이라서 <!DOCTYPE html>를 제거해야 작동합니다...;자바스크립트를 이용해 브라우저사이즈를 비교해서 css에 값을 줘서 onload와 onresize시에 반응형사이즈를 작동시켜주는방법과
(지금까지 이방법써왔음...ㅎㄷ;)
그런데 오늘 간단한 방법이 떠올랐습니다.
#size {padding-right:50px; width:100%;}
.test1 { width:100%;}
.test2 { top:0px; right:0px; position:absolute; width:50px;}
<div id="size">
<div class="test1">100%-50px영역</div><div class="test2">50px영역</div></div>
이방법을 쓰고있습니다..ㅇㅅㅇ;
독자를 배려한 글이 아니라서 자게에 올립니다...-seuai-
추천
0
0
댓글 3개
이건 팁일뿐 나머지는 본인이 알아서 써먹으세요..ㅇㅅㅇ;
(요거 그대로 박는다고 작동하는걸로 안보입니다.)
※높이사이즈도 지정안돼어있고 그냥 원리만설명한거임!!
(요거 그대로 박는다고 작동하는걸로 안보입니다.)
※높이사이즈도 지정안돼어있고 그냥 원리만설명한거임!!
#div1 {dsiplay:block;margin:0 50px 0 0;}
#div2 {dsiplay:block;position:absolute;right:0;width:50px;}
div1(유동너비) | div2(고정너비 50픽셀)
위 방식으로 사용하는데 제가 예전에 이것을 만들때
일반적으로 사용하는곳이 포털사이트의 검색창에서 사용했었습니다. 지금은 모르겠지만.
로고(고정너비) | input(유동너비) | button(고정너비)
#div2 {dsiplay:block;position:absolute;right:0;width:50px;}
div1(유동너비) | div2(고정너비 50픽셀)
위 방식으로 사용하는데 제가 예전에 이것을 만들때
일반적으로 사용하는곳이 포털사이트의 검색창에서 사용했었습니다. 지금은 모르겠지만.
로고(고정너비) | input(유동너비) | button(고정너비)
리좌님~ 팁게시판으로이동부탁해요~
