nth-child (n번째부터 n번째까지 css적용) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 28 28 결과는?

09_ani.html 09_ani.css @CHARSET "UTF-8"; #myball{ position: relative; width:100px; height:100px; border-radius: 50px; border:2px solid black; background:url(../img/f1.png) no-repeat center center padding-box; animation:myani 3s infinite alternate; } @keyframes myani{ 0%{ left: 10px; } 50%{ background:url(../img/woman.png) no-repeat center center; } 100%{ background:url(../img/f2.png) no-repeat c..

08_timingFunction.html ease ease-in ease-out ease-in-out linear 08_timingFunction.css @CHARSET "UTF-8"; #ex div{ float: left; width: 100px; height: 50px; margin: 5px 10px; padding: 5px; color: white; background-color: #006aff; border-radius: 5px; text-align:center; font-weight: bold; } #ex:hover div{ height: 400px; } #ex .ease{ transition: 3s ease; /*같은 속도 유지*/ } #ex .ease-in{ transition: 3s eas..

07_transition.html 07_transition.css @CHARSET "UTF-8"; #ex div{ width: 100px; height: 100px; border-radius: 0px; border: 2px solid black; background: url(../img/f1.png) no-repeat center center padding-box;/*x축 중간(left), y축 중간(right)*/ transition: all 1s ease-in 0.3s; } #ex:hover div{ border-radius: 50px; border: 2px solid blue; background: url(../img/f2.png) no-repeat center center padding-box; }

06_transition.html 06_transition.css @CHARSET "UTF-8"; /*객체모양 변경*/ #ex div{ width: 100px; height: 100px; background-color: red; border-radius: 0px; transition-property: background-color, border-radius;/*해당하는 2가지 속성에 변형을 준다.*/ transition-duration: 1s; } #ex:hover div{ background-color: blue; border-radius: 50px; }

04_skew.html 04_skew.css @CHARSET "UTF-8"; div{ float: left; margin: 100px; width: 150px; height: 190px; background-color: rgba(0,0,255,0.3); perspective: 200px; } img{ border: 1px solid black; } #i1:hover{ transform: skew(45deg, 0deg); } #i2:hover{ transform: skew(0deg, 45deg); }

03_rotate.html 03_rotate.css @CHARSET "UTF-8"; div{ float: left; margin: 50px; width: 150px; height: 190px; background-color: rgba(0,0,255,0.3); perspective: 200px; } #i1:hover{ transform: rotateX(45deg); } #i2:hover{ transform: rotateY(45deg); } #i3:hover{ transform: rotate(45deg); }

02_scale.html 02_scale.css @CHARSET "UTF-8"; div{ margin: 50px; width: 150px; height: 190px; background-color: rgba(0,0,255,0.3); } img:hover{ transform: scale(0.7,1.2); }

첫번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99B88E3359A3842A36 두번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/9968863359A3842A24 세번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99CCF53359A3842A0F 네번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99C4A13359A3842A37 다섯번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/9995693359A3842A0A 여섯번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99DA9B3359A38..

22_tb.html 주요 국가 통화율 통화명 매매기준율 전일대비 등락률 미국(USD) 1,090,80 1.20 -0.11% 일본(JPY 100) 1,359.59 5.58 -0.41% 중국(CNY) 주요 국가 통화율 통화명 매매기준율 전일대비 등락률 미국(USD) 1,090,80 1.20 -0.11% 일본(JPY 100) 1,359.59 5.58 -0.41% 중국(CNY) 22_tb.css @CHARSET "UTF-8"; table{ border-collapse: seperate; margin-bottom: 20px; } #tb1 th, #tb1 td{ border: 1px solid black; empty-cells: show;/*빈칸의 값을 보여주곘다. 기본값*/ } #tb2 th, #tb2 td{ b..

21_tb.html 주요 국가 통화율 통화명 매매기준율 전일대비 등락률 미국(USD) 1,090,80 1.20 -0.11% 일본(JPY 100) 1,359.59 5.58 -0.41% 중국(CNY) 174.78 0.30 -0.17% 21_tb.css @CHARSET "UTF-8"; table{ border-collapse: seperate; /*기본값 //분리됨*/ border:outset 10px;/*inset:파이게 //outset:튀어나오게 선의 굵기*/ border-spacing:15px; } th,td{ border: inset 5px; }

20_tb.html 주요 국가 통화율 통화명 매매기준율 전일대비 등락률 미국(USD) 1,090,80 1.20 -0.11% 일본(JPY 100) 1,359.59 5.58 -0.41% 중국(CNY) 174.78 0.30 -0.17% 주요 국가 통화율 통화명 매매기준율 전일대비 등락률 미국(USD) 1,090,80 1.20 -0.11% 일본(JPY 100) 1,359.59 5.58 -0.41% 중국(CNY) 174.78 0.30 -0.17% 20_tb.css @CHARSET "UTF-8"; #tb1{ border:1px solid black; margin-bottom: 20px; } #tb2{ border-collapse: collapse; /*테두리 합침*/ border: 1px solid black; }..