CSS (20) 썸네일형 리스트형 [CSS3] 2D Transform 2D Transform 이동(translate), 회전(rotate), 크기변경(scale), 기울임(skew)등의 효과를 줄 수 있다. h1{ width:300px; height:300px; margin:20px; padding:20px; border:1px solid #dddddd; } .transformTest_translate{ background:#e8e8e8; transform : translate(500px, -360px); -moz-transform : translate(500px, -360px); -webkit-transform : translate(500px, -360px); -ms-transform : translate(500px, -360px); -o-transform : trans.. [CSS3] box-sizing:borderbox, content-box CSS .boxMenu{width:100%; padding:0;} .boxMenu::after{content:""; display:block; clear:both;} .boxMenu li{list-style-type: none; float:left; width:50%; text-align:center; padding:20px; background:#f8f8f8; border:10px solid #dddddd; } .bBox li{ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .cBox li{ box-sizing:content-box; -moz-box-sizing:content-box; -webkit-.. [CSS3] 컬럼 나누기 colume-count, column-gap, column-rule CSS .multipleColume{ background:#ffffe6; width:768px; height:768px; padding:20px; text-align: justify; column-count:3; /*박스의 내용을 3단으로 */ column-gap:40px;/*각 단의 간격 */ column-rule:2px dotted #000000; /* 단과 단사이에 구분선 */ } See the Pen CSS3 column example by daeyun (@daeyun) on CodePen. [CSS3] Animation CSS p.test { animation:myfirst 5s infinite; -moz-animation:myfirst 5s infinite; -webkit-animation:myfirst 5s infinite; -o-animation:myfirst 5s infinite; } @keyframes myfirst { 0% {background:#ffffff; width:150px; height:150px; } 25%{background:#ffff66; width:175px; height:175px; } 50%{background:#ffaa00; width:200px; height:200px; } 75%{background:#ff6600; width:225px; height:225px; } 100%{backg.. 이전 1 2 3 다음