이런 레이아웃 어떻게 만듭니까? 채택완료
특성은 그림에 써놓은것과 같습니다.
현재는 wrap을 만들어서 wrap에 table속성을 주고
left와 right 각각에 table-cell 속성을 주어서 만들었으나 구버전 ie와 파폭에서 문제가 있어서
다시좀 만드려고 합니다.
left는 right의 유무에 따라 가변적으로 가로길이가 100%였다가 100%-300px(right 가로길이)
였다가 하는걸로
right는 자바스크립트로 토글시켜서 있었다가 없었다가 하게 하려고 합니다.
right가 left위에 떠서 가리는게 아니라 left가 right만큼 작아졌다 커졋다 하는겁니다.
조언좀 구합니다.
답변 4개
반응형 으로 작업하시면됩니다.
</p><p><style type="text/css">
.div1 { position: relative; width:calc(100% - 200px); height:100px; float:left; }
.div2 { position: relative; width:200px; height:100px; float:right;}</p><p> /* 1200 이상일 경우 */
@media all and (min-width:1200px) {
}</p><p> /* 1199 ~ 992 일때 */
@media all and (max-width:1199px) and (min-width:992px) {</p><p> }</p><p> /* 991 ~ 768 일때 */
@media all and (max-width:991px) and (min-width:768px) {</p><p> }</p><p></style>
<div class="div1"></div>
<div class="div2"></div>
<div style="clear: both;"></div><!-- float 초기화 --></p><p>
각 브라우저 사이즈에 맞도록 @media 를 활용하셔서 css 를 변동시켜주시면되겠습니다.
@media 를 활용하시면 브라우저 사이즈에 맞는 유동적인 스타일을 주실수 있습니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
http://minsup.kr/study/170612/index.html">http://minsup.kr/study/170612/index.html
https://www.youtube.com/watch?v=Oun-zovk5kQ&t=2320s">https://www.youtube.com/watch?v=Oun-zovk5kQ&t=2320s
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
혹시 이런건가요?
https://magnets.jp/demo/urakawa/drawer/">https://magnets.jp/demo/urakawa/drawer/
https://magnets.jp/web_design/4946/">https://magnets.jp/web_design/4946/
설명이 일본어로 되어있긴한데 코드만 보면 되니까요 ㅡ,. ㅡ ㅋ
답변에 대한 댓글 1개
주 컨텐츠 공간은 고정된상태로 우측의 길이만 변화되는겁니다.
http://twitch.tv
트위치 아시겠지만 이 사이트에서 방송하나 보시면 우측에 채팅창이 있고 상단쪽에 화살표아이콘으로
토글할 수 있도록 되있습니다. 없어지면 가운데 컨텐츠 공간이 그만큼 늘어나죠.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
미디어 쿼리로 어떻게 left의 길이를 right가 있었다 없었다 하는걸로 변동시킬 수 있는지?
right가 없어졌다고 해서 창의 가로길이가 변하는건 아닌데
잘 모르겠네요.