이런 레이아웃 어떻게 만듭니까?
본문
특성은 그림에 써놓은것과 같습니다.
현재는 wrap을 만들어서 wrap에 table속성을 주고
left와 right 각각에 table-cell 속성을 주어서 만들었으나 구버전 ie와 파폭에서 문제가 있어서
다시좀 만드려고 합니다.
left는 right의 유무에 따라 가변적으로 가로길이가 100%였다가 100%-300px(right 가로길이)
였다가 하는걸로
right는 자바스크립트로 토글시켜서 있었다가 없었다가 하게 하려고 합니다.
right가 left위에 떠서 가리는게 아니라 left가 right만큼 작아졌다 커졋다 하는겁니다.
조언좀 구합니다.
답변 4
반응형 으로 작업하시면됩니다.
<style type="text/css">
.div1 { position: relative; width:calc(100% - 200px); height:100px; float:left; }
.div2 { position: relative; width:200px; height:100px; float:right;}
/* 1200 이상일 경우 */
@media all and (min-width:1200px) {
}
/* 1199 ~ 992 일때 */
@media all and (max-width:1199px) and (min-width:992px) {
}
/* 991 ~ 768 일때 */
@media all and (max-width:991px) and (min-width:768px) {
}
</style>
<div class="div1"></div>
<div class="div2"></div>
<div style="clear: both;"></div><!-- float 초기화 -->
각 브라우저 사이즈에 맞도록 @media 를 활용하셔서 css 를 변동시켜주시면되겠습니다.
@media 를 활용하시면 브라우저 사이즈에 맞는 유동적인 스타일을 주실수 있습니다.
죄송하지만 무슨말씀인지 이해가 안가네요.
미디어 쿼리로 어떻게 left의 길이를 right가 있었다 없었다 하는걸로 변동시킬 수 있는지?
right가 없어졌다고 해서 창의 가로길이가 변하는건 아닌데
잘 모르겠네요.
혹시 이런건가요?
https://magnets.jp/demo/urakawa/drawer/
https://magnets.jp/web_design/4946/
설명이 일본어로 되어있긴한데 코드만 보면 되니까요 ㅡ,. ㅡ ㅋ
죄송합니다. 올려주신 링크도 아니네요. 비슷하긴한데 사이드 메뉴만큼 주 컨텐츠 공간이 밀리네요.
주 컨텐츠 공간은 고정된상태로 우측의 길이만 변화되는겁니다.
http://twitch.tv
트위치 아시겠지만 이 사이트에서 방송하나 보시면 우측에 채팅창이 있고 상단쪽에 화살표아이콘으로
토글할 수 있도록 되있습니다. 없어지면 가운데 컨텐츠 공간이 그만큼 늘어나죠.
이건 url 을 올려주셔야 정확한 답변이 될듯하네요
뒤늦게 조언주신걸 봤습니다. 감사합니다. 다른방법으로 같은 레이아웃을 구현했는데 파폭에서 이상하게 되서 포기했었는데 알려주신방법이면 잘 될것같습니다. 혹시 있었다가 없어지는것에 애니메이션 기능을 추가하려면 어떻게 할까요? 제가 제이쿼리를 잘 몰라서 어렵네요.
