WEB87

• 

  [CSS] ch05-07. transition2 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; } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-06. transition 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; } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-04. skew 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); } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-03. rotate 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); } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-02. scale 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); } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch05-01. translate 첫번째 사진 링크: 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.. WEB/CSS 2017. 8. 28.

• 

  [CSS] ch04-22. tb4 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.. WEB/CSS 2017. 8. 28.

• 

  [CSS] ch04-21. tb3 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; } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch04-20. tb2 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; }.. WEB/CSS 2017. 8. 28.

• 

  [CSS] ch04-19. tb 19_tb.html table layout CONSTRAINT_VALIDATION table layout을 이용한 셀 너비 조절 19_tb.css @CHARSET "UTF-8"; #tb1{ width: 300px;/*테이블 크기 가로*/ table-layout: fixed;/*fixed: 셀 너비 고정, auto: 셀 너비 자동 조정(기본값)*/ word-break: break-all;/*단어를 너비에 맞춰서 쪼개기*/ height:auto;/*테이블 크기 세로*/ /*위치를 나타내는 값은 position// left top*/ } th,td{ border: 1px solid black; padding: 5px; } WEB/CSS 2017. 8. 28.

• 

  [CSS] ch04-18. column 18_column.html Joandora 가장 제주다운 수산리집 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다 성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다. 오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다. 내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. 그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열.. WEB/CSS 2017. 8. 28.

• 

  [CSS] ch04-17. clear 17_clear.html 예약 방법 및 요금 ¤ 예약 방법 요안도라 예약의 가장 빠른 방법은 인터넷 전화 070.4529.8743으로 직접 통화하시거나 문자를 남기시는 것입니다. 인터넷 전화라 시외전화 요금이 부과되지 않습니다. 제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라 Copyright ⓒ. All rights reserved. 17_clear.css @CHARSET "UTF-8"; .content{ float: left; } aside{ float: right; } footer{ clear: both; } WEB/CSS 2017. 8. 28.