Download - HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기
![Page 1: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/1.jpg)
HTML5 & CSS3오늘 구현하는 내일의 웹 표준
4 장 CSS3 으로 더 나은 사용자 인터페이스 만들기
아꿈사http://cafe.naver.com/architect1
![Page 2: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/2.jpg)
알고가요 CSS Example Syntax Selector What's New In CSS3?예제 Tip 7 가상 클래스로 테이블에 스타일 주기 Tip 8 링크주소프린트 :after, content
Tip 9 다단 레이아웃 만들기 Tip 10 미디어 쿼리를 이용해 모바일 인터페이스 만들기가 뭐의 약자임 ?
![Page 3: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/3.jpg)
알고가요 CSS Example Syntax Selector What's New In CSS3?예제 Tip 7 가상 클래스로 테이블에 스타일 주기 Tip 8 링크주소프린트 :after, content
Tip 9 다단 레이아웃 만들기 Tip 10 미디어 쿼리를 이용해 모바일 인터페이스 만들기
![Page 4: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/4.jpg)
Cascading Style Sheet웹문서에 스타일을 지정해주는 언어
![Page 5: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/5.jpg)
CSS Example HTML 로만 작성했을 때
![Page 6: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/6.jpg)
CSS Example CSS 로 스타일을 줬을 때
![Page 7: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/7.jpg)
CSS Syntax
http://www.w3schools.com/css/css_syntax.asp
![Page 8: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/8.jpg)
Selector 좀더 자세히
![Page 9: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/9.jpg)
table, td 처럼element tag 로 하는 것은
기본 Selector
![Page 10: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/10.jpg)
#id Selector
![Page 11: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/11.jpg)
.class Selector
![Page 12: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/12.jpg)
알고가요 CSS Example Syntax Selector What's New In CSS3?예제 Tip 7 가상 클래스로 테이블에 스타일 주기 Tip 8 링크주소프린트 :after, content
Tip 9 다단 레이아웃 만들기 Tip 10 미디어 쿼리를 이용해 모바일 인터페이스 만들기
![Page 13: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/13.jpg)
SelectorsBox ModelBackgrounds and BordersText Effects2D/3D TransformationsAnimationsMultiple Column LayoutUser Interface
What's New In CSS3?
![Page 14: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/14.jpg)
SelectorsBox ModelBackgrounds and BordersText Effects2D/3D TransformationsAnimationsMultiple Column LayoutUser Interface
Pseudo-class Selectors :nth-child(n) :nth-of-type(n) :last-child
Column Property column-count
What's New In CSS3?4 장 발표에서 살펴볼 것들
![Page 15: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/15.jpg)
알고가요 CSS Example Syntax Selector What's New In CSS3?예제 Tip 7 가상 클래스로 테이블에 스타일 주기 Tip 8 링크주소프린트 :after, content
Tip 9 다단 레이아웃 만들기 Tip 10 미디어 쿼리를 이용해 모바일 인터페이스 만들기
![Page 16: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/16.jpg)
Pseudo-class Selector 만 제거한 표
![Page 17: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/17.jpg)
첫행을 제외한짝수행과 홀수행의 색상을 지정
![Page 18: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/18.jpg)
2 번째 열부터는우측정렬
![Page 19: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/19.jpg)
마지막 행은 굵게
![Page 20: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/20.jpg)
Internet Explorer 는 지원안되어javascript 를 이용한 처리가 필요함 .
![Page 21: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/21.jpg)
알고가요 CSS Example Syntax Selector What's New In CSS3?예제 Tip 7 가상 클래스로 테이블에 스타일 주기 Tip 8 링크주소프린트 :after, content
Tip 9 다단 레이아웃 만들기 Tip 10 미디어 쿼리를 이용해 모바일 인터페이스 만들기
![Page 22: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/22.jpg)
프린터기로 출력했을 때 링크도 같이 출력하고 싶다 .
![Page 23: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/23.jpg)
print 용 css 를 지정
after 로 content 뒤에 링크 URL 붙이기
![Page 24: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/24.jpg)
알고가요 CSS Example Syntax Selector What's New In CSS3?예제 Tip 7 가상 클래스로 테이블에 스타일 주기 Tip 8 링크주소프린트 :after, content
Tip 9 다단 레이아웃 만들기 Tip 10 미디어 쿼리를 이용해 모바일 인터페이스 만들기
![Page 25: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/25.jpg)
다단 미적용 다단 적용
newsletter ID 가 부여된 내용들을 2 단으로 나누기 .
근데 -webkit?
![Page 26: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/26.jpg)
http://www.w3schools.com/cssref/css3_pr_column-count.asp
아직은 Opera 만 지원크롬은 웹킷을 사용해서 구현
![Page 27: HTML5 & CSS3 - 4장 CSS3으로 더 나은 사용자 인터페이스 만들기](https://reader033.vdocuments.mx/reader033/viewer/2022061213/5497361db479596a4d8b5143/html5/thumbnails/27.jpg)
감사합니다 . :D