jQuery Responsive Web: Making Width same as Height / 반응형웹 가로 세로 높이 같게 만드는 제이쿼리

jQuery Responsive Web: Making Width same as Height

<script>
/*반응형 가로 세로 높이 같게 만들기*/
$(window).resize(function(){
var divWidth = $('ul li').width();
$('ul li').height(divWidth);
});
</script>

댓글

댓글 쓰기

이 블로그의 인기 게시물

Accordion Menu in jQuery / 제이쿼리로 아코디언 메뉴 만들기

<div class="menu">menu01</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <div class="menu">menu02</div> <ul class="accordion"> <li>list01</li> <li>list02</li> <li>list03</li> </ul> <style> .accordion {display:none;} .menu.on {color:red;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ /*메뉴 아코디언*/   $('.accordion').hide();   $('.menu').click(function(){ $(this).toggleClass('on')         $(this).next().slideToggle();   }); }); </script>
자세한 내용 보기

Flip Card in pure CSS / CSS만으로 카드 뒤집기

  <style> .container {position: relative;   -webkit-perspective: 1000;   -moz-perspective: 1000;   -ms-perspective: 1000;   -o-perspective: 1000; } .card { width: 200px; height: 200px;margin: 0 auto; position: relative;   -webkit-transform-style: preserve-3d;   -webkit-transition: 0.5s;   -moz-transform-style: preserve-3d;   -moz-transition: 0.5s;   -ms-transform-style: preserve-3d;   -ms-transition: 0.5s;   -o-transform-style: preserve-3d;   -o-transition: 0.5s;   transition: 0.5s; } .face {position: absolute; backface-visibility: hidden; width: 100%; height: 100%; color: white; line-height: 200px; text-align: center;   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -ms-backface-visibility: hidden;   -o-backface-visibility: hidden;  } .front {background: skyblue; z-index: 10;} .back {background: pink;   -webkit-transform: rotateY(180deg);   -mo...
자세한 내용 보기

Flip Card in pure javascript / 순수 자바스크립트만으로 카드 뒤집기

<!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <title>Document</title>   <style> #card{position:relative; width:200px; height:200px; margin:0 auto; } #front{position:absolute; top:0; left:0; color:white; font-size: 30px; text-align:center; line-height:200px;background-color: skyblue; width:100%;}   </style>  </head>  <body> <div id="card" onclick="flip()">  <div id="front" > Front content  </div> </div> <script>   var k = 0;   function flip() {     var card = document.getElementById("card");     k += 180;     card.style.transform = "rotatey(" + k + "deg)";     card.style.transitionDuration = "0.5s";   } </script>  </body> </html> ------------------------------------------------------------------------------- ...
자세한 내용 보기