Misun's Archive

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

<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;*/ }

Change color of radio button in CSS CSS로 라디오버튼 색상변경(순수 CSS 이용 or 이미지 사용) /*radio 버튼 색상변경 */ input[type='radio'] { -webkit-appearance:none; width:16px; height:16px; border:1px solid darkgray; border-radius:50%; outline:none; background:#e6e6e6; } input[type='radio']:before { content:''; display:block; width:60%; height:60%; margin: 20% auto;   border-radius:50%;   } input[type='radio']:checked:before { background:#008675; } /*라디오버튼 색상변경 이미지로*/ input[type='radio']:before { content:''; position:absolute; top:-3px; left:3px; width:16px; height:16px; background:url('../img/radio_unchkd.png')no-repeat; } input[type='radio']:checked:before { content:''; position:absolute; top:-3px; left:3px; width:16px; height:16px; background:url('../img/radio_chkd.png')no-repeat; }

change color of placeholder in CSS    /* select placeholder 색상 변경 */ .boxTxtW .acoTxt {font-size:15px; color:#454545; .boxTxtW  input[type="text"].acoTxt::-webkit-input-placeholder {color: #bdbdbd;;} .boxTxtW  input[type="text"].acoTxt::-moz-placeholder {color: #bdbdbd;;} .boxTxtW  input[type="text"].acoTxt:-ms-input-placeholder {color: #bdbdbd;;} .boxTxtW  input[type="text"].acoTxt:-moz-placeholder {color: #bdbdbd;;} } /* snsTxt input placeholder 색상 변경*/ .borderB input.snsTxt::-webkit-input-placeholder { /* Chrome */color:#454545;} .borderB input.snsTxt:-ms-input-placeholder { /* IE 10+ */color:#454545;} .borderB input.snsTxt::-moz-placeholder { /* Firefox 19+ */color:#454545; opacity: 1;} .borderB input.snsTxt:-moz-placeholder { /* Firefox 4 - 18 */color:#454545; opacity: 1;}

CSS의 float 속성 float 속성을 주면 height 값이 없어진다. 즉 부모요소가 자식요소의 영역을 못잡아 주게 된다. 영역을 잡아주려면 float 처리된 자식요소의 부모에 overflow:hidden을 주던지, 아니면 부모요소 다음요소인 div에 clear 해주면된다. 보통 부모div에 클래스를 .clearfix로 주고 .clearfix {content:""; display:table; clear:both;}를 줘서 다음 div를 clear 시켜준다. 이렇게 하면 float처리된 요소들이 영역을 잡고 있게 된다.