css (72) 썸네일형 리스트형 11장 예제 - rotate()함수 1. 함수를 사용해 2차원에서 회전하기 DOCTYPE html> Transform:rotate #container{ width:800px; margin:20px auto; } .origin { width: 100px; height: 100px; float: left; margin: 40px; } #rotate1:hover { transform: rotate(40deg); /* 시계 방향(오른쪽)으로 40도 회전 */ } #rotate2:hover { transform: rotate(-40deg); /* 시계 반대 방향(왼쪽)으로 40도 회전 */ } 2. 이미지를 회전하며 원근감 주기 DOCTYPE html> 이미지 회전하며 원근감 주기 .origin { width:300px; height:180px; .. 11장 예제 scale()함수를 사용해 확대.축소하기 DOCTYPE html> scale()함수를 사용해 확대.축소하기 #container { width:800px; margin:20px auto; } .origin { width:100px; height:100px; border:1px solid black; float:left; margin:40px; } .origin > div { width:100px; height:100px; background-color:orange; } #scalex:hover{ /*x축으로 2배 확대 */ transform:scaleX(2); } #scaley:hover{ /*y축으로 1.5배 확대 */ transform:scaleY(1.5); } #scale:hover{ /*x,y축으로 0.7배 확대 */ transform:s.. 11장 예제 - translate() 함수를 사용해 웹 요소 이동하기 DOCTYPE html> translate()함수를 사용해 웹 요소 이동하기 #container { width:800px; height:200px; margin:20px auto; } .origin { width:100px; height:100px; border:1px solid black; float:left; margin:40px; } .origin > div { width:100px; height:100px; background-color:orange; } #movex:hover { transform:translateX(50px); }/*x축으로 50px 이동 */ #movey:hover { transform:translateY(20px);} /*y축으로 20px 이동 */ #movexy:hover.. 10장 마무리 문제 2 DOCTYPE html> 마무리 문제 2 * { box-sizing:border-box; /*테두리까지 포함해서 너빗값 지정*/ } .top-menu { margin:50px auto; padding:0; list-style:none; width:605px; height:35px; box-shadow:0 3px 4px #8b8b8b; background-color:#dadada; } .top-menu li { float:left; border-right:1px solid #929292; } .top-menu li a:link { /*방문하지 않은 링크에 스타일 적용*/ color:black; text-decoration:none; text-align:center; display:block; width:1.. 10장 마무리 문제 1 DOCTYPE html> 연습문제 1 img { margin-right:50px; border:1px solid #ccc; box-shadow: 2px 2px 5px #ccc; } img:first-of-type { border: 2px solid #f00; } 10장 실습 3 DOCTYPE html> 가상 선택자를 사용해 폼 꾸미기 * { margin:0; padding:0; } body { background:#ccc; padding:20px; } #signup { background:#fff; border:1px solid #222; border-radius:5px; padding:20px; width:400px; margin:30px auto; } #signup fieldset { border:1px solid #ccc; margin-bottom:30px; } #signup legend { font-size:16px; font-weight:bold; padding-left:5px; padding-bottom:10px; } #signup ul li { line-height.. 10장 예제 - 가상요소를 사용해 스타일 적용하기 DOCTYPE html> 가상 요소를 사용해 스타일 적용하기 li.new::after { content:"NEW!!"; font-size:x-small; padding :2px 4px; margin:0 10px; border-radius:2px; background:#f00; color:#fff; } .container { width:960px; margin:0 auto; } ul li { margin:15px; } 제품 목록 제품 A 제품 B 제품 C 제품 D 10장 예제 - 열에 번갈아 가며 배경색 적용하기 DOCTYPE html> 열에 번갈아 가며 배경색 적용하기 #container { text-align:center; color:#2b2b2b; } table, tb, th { border:1px solid #ccc; } table { width:200px; margin:0 auto; border-collapse:collapse; /*표와 셀의 테두리를 합쳐 하나로 표시 */ } td { text-align:left; padding:10px; padding-left:20px; } table tr:nth-of-type(2n+1) { /* 홀수 번째 열에만 스타일 적용 */ background:lightgray; color:black; } 웹 개발 HTML CSS Javascirpt React node.js 이전 1 2 3 4 5 6 7 ··· 9 다음
