Misun's Archive

<ul class="lnb"> <li class="on active"><a href="#">mouseover to slide right 01</a></li> <li><a href="#">mouseover to slide right 02</a></li> <li><a href="#">mouseover to slide right 03</a></li> <li><a href="#">mouseover to slide right 04</a></li> </ul> <style> a{color:inherit; width:100%;} ul.lnb {display:block; position:relative; border:1px solid #e6e6e6; margin:0; padding:0; width:300px; overflow:hidden;} ul.lnb > li {display:block; position:relative; color:#4d4d4d; text-indent:10px; font-size:13px; line-height:36px; border:1px solid #e6e6e6;} ul.lnb > li > a {display:block; position:relative; height:36px;} ul.lnb > li.on > a {background-color:#4d4d4d; color:#fff;} </style> <script> $( document ).ready(function() {     var lnb=$('.lnb > li...

<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;...

<img src="http://placehold.it/100x100"> <style> img { -webkit-transition: 1s linear; -moz-transition: 1s linear; -o-transition: 1s linear; -ms-transition: 1s linear; transition: 1s linear; } img:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } </style>

 Hide native arrows of IE 10, 11 in CSS /* IE 10, 11의 네이티브 화살표 숨기기 */ select::-ms-expand {   display: none; } /*select 태그 네이티브 화살표 숨기기*/ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } code practice ------------------------------------------------ <!DOCTYPE html> <html> <head> <style> /* IE 10, 11의 네이티브 화살표 숨기기 */ select::-ms-expand {display: none;} .favcity-wrapper {position:relative;} .visuallyhidden {  border: 0;  clip: rect(0 0 0 0);  height: 1px;  margin: -1px;  padding: 0;  position: absolute;  } select {  -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  border-radius: 0; width:100%;} label[for=favcity] {  position: relative;  display: block;  } label[for=favcity] select {  border: 5px solid #000;  background: white;  padding: 7px 20px 7px 20px;  width: 100%;  font-size: 16px; ...

<!DOCTYPE html> <html> <head> <style> i {   border: solid black;   border-width: 0 3px 3px 0;   display: inline-block;   padding: 3px; } .right {     transform: rotate(-45deg);     -webkit-transform: rotate(-45deg); } .left {     transform: rotate(135deg);     -webkit-transform: rotate(135deg); } .up {     transform: rotate(-135deg);     -webkit-transform: rotate(-135deg); } .down {     transform: rotate(45deg);     -webkit-transform: rotate(45deg); } </style> </head> <body> <h2>CSS Arrows</h2> <p>Right arrow: <i class="right"></i></p> <p>Left arrow: <i class="left"></i></p> <p>Up arrow: <i class="up"></i></p> <p>Down arrow: <i class="down"></i></p> </body> </html>

 CSS Vendor Prefix 벤더 프리픽스  CSS3의 기능을 지원하지 않는 브라우저들을 위해서 선언해줘야함. Firefox : -moz- Internet Explorer: -ms- ​Opera: -o- Safari: -webkit- iOS: -webkit- ​Android/Chrome: -web-kit​ -webkit- (Chrome, Safari, newer versions of Opera.) -moz- (Firefox) -o- (Old versions of Opera) -ms- (Internet Explorer) ex) select { display:block; border:1px solid #ccc; border-radius:0; width:130px; height:25px; text-indent:8px; /*padding-right:52px;*/ background:#fff url('../img/arSelect.png') no-repeat top 9px right 6px; background-size:10px 6px; -webkit-background-size:10px 6px; appearance: none; -webkit-appearance: none; -moz-appearance: none; /*direction:rtl;*/ }