axure tutorial file description in korean / 액슈어 튜토리얼 파일 해설







































댓글

댓글 쓰기

이 블로그의 인기 게시물

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...
자세한 내용 보기

Make Triangle by using Border Property in CSS / CSS의 보더속성 이용하여 삼각형 만들기

이미지
<div class="triangle"></div> <div class="triangle01"></div> <div class="triangle02"></div> <div class="triangle03"></div> <style> .triangle { width:0; height:0; border-left:200px solid pink; border-right:200px solid yellow; border-top:200px solid orange; border-bottom:200px solid skyblue; float:left; } .triangle01 { width:0; height:0; border-left:200px solid pink; border-right:200px solid transparent; border-top:200px solid transparent; border-bottom:200px solid transparent; float:left; } .triangle02 { width:0; height:0; border-left:200px solid pink; border-right:200px solid transparent; border-top:0 solid transparent; border-bottom:200px solid transparent; float:left; } .triangle03 { width:0; height:0; border-left:400px solid pink; border-right:0px solid transparent; border-top:200px solid transparent; border-bottom:200px solid transparent; float:left;...
자세한 내용 보기