html5 & css3 - 4장 css3으로 더 나은 사용자 인터페이스 만들기

HTML5 & CSS3오늘 구현하는 내일의 웹 표준

4 장 CSS3 으로 더 나은 사용자 인터페이스 만들기

이영권[email protected]

아꿈사http://cafe.naver.com/architect1

알고가요 CSS Example Syntax Selector What's New In CSS3?예제 Tip 7 가상 클래스로 테이블에 스타일 주기 Tip 8 링크주소프린트 :after, content

Tip 9 다단 레이아웃 만들기 Tip 10 미디어 쿼리를 이용해 모바일 인터페이스 만들기가 뭐의 약자임 ?


Tip 9 다단 레이아웃 만들기 Tip 10 미디어 쿼리를 이용해 모바일 인터페이스 만들기

Cascading Style Sheet웹문서에 스타일을 지정해주는 언어

CSS Example HTML 로만 작성했을 때

CSS Example CSS 로 스타일을 줬을 때

CSS Syntax

http://www.w3schools.com/css/css_syntax.asp

Selector 좀더 자세히

table, td 처럼element tag 로 하는 것은

기본 Selector

#id Selector

.class Selector

SelectorsBox ModelBackgrounds and BordersText Effects2D/3D TransformationsAnimationsMultiple Column LayoutUser Interface

What's New In CSS3?

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 장 발표에서 살펴볼 것들

Pseudo-class Selector 만 제거한 표

첫행을 제외한짝수행과 홀수행의 색상을 지정

2 번째 열부터는우측정렬

마지막 행은 굵게

Internet Explorer 는 지원안되어javascript 를 이용한 처리가 필요함 .

프린터기로 출력했을 때 링크도 같이 출력하고 싶다 .

print 용 css 를 지정

after 로 content 뒤에 링크 URL 붙이기

다단 미적용 다단 적용

newsletter ID 가 부여된 내용들을 2 단으로 나누기 .

근데 -webkit?

http://www.w3schools.com/cssref/css3_pr_column-count.asp

아직은 Opera 만 지원크롬은 웹킷을 사용해서 구현

감사합니다 . :D

html5 & css3 - 4장 css3으로 더 나은 사용자 인터페이스 만들기

Documents