[Script] CSS3 Tutorial ( 기초강좌 )

CSS3 Tutorial ( 기초강좌 )

출처 : w3schools CSS3

CSS3 Introduction

CSS3 Module

- CSS3 은 module 로 나누어져 있다. 이전의 것들은 세분화되어 나누어지고, 새로운 것들도 추가되었다.

- CSS3의 중요한 모듈들은 다음과 같다.

1. Selector

2. Box Model

3. Backgrounds and Borders

4. Text Effects

5. 2D/3D Transformations

6. Animations

7. Multiple Column Layout

8. User Interface

CSS3 Recommendation

- CSS3의 스펙은 아직도 W3C에 의해 정의되고 있지만, 대부분의 최신 브라우저에서는 많은 CSS3 속성들을 지원하고 있다.

CSS Borders

CSS3 Borders

- border-radius

- box-shadow

- border-image

CSS3 Rounded Corners

{border-radius:25px} // 큰 값일수록 더 둥글어진다.

CSS3 Box Shadow

{box-shadow: 10px 10px 5px #888888; }

- 순서대로 x좌표, y좌표, opacity, color ( opacity 는 값이 클수록 그림자가 희미하며 멀리 퍼진다. )

CSS3 Border Image

- 사각형의 이미지를 넣는다.

{border-image:url(border.png) 30 30 round;}

- 순서대로 souce, slice, width, outset, repeat

New Border Properties

- border-image

- border-radius

- border-shadow

CSS Backgrounds

CSS3 Backgrounds

- background-size

- background-origin

CSS3 The background-size Property

- background image 의 size 를 결정한다. 이전 버전에서 background image는 실제 사이즈를 사용하도록 되어 있었는데, CSS3에서는 bg size 를 정할 수 있다. 여러곳에서 한 이미지를 사용할 수도 있다.

- pixel로도 percentage로도 설정할 수 있다. percentage는 parent element에 대응한 퍼센트이다.

{
background:url(img-flower.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

CSS3 The background-origin Property

- background-origin 은 bg image의 positioning을 담당한다.

- bg image는 content-box, padding-box, border-box 전부에 들어갈 수 있다.

{background-origin:content-box;}

CSS3 Multiple Background Images

- 여러개의 bg 이미지를 사용할 수 있다.

{background-image:url(img-flower.gif), url(img_tree.gif);}

New Background Properties

- background-clip

- background-origin

- background-size

CSS3 Text Effects

- text-shadow

- word-wrap

CSS3 Text Shadow

{text-shadow: 5px 5px 5px #ff0000;}

- x 좌표, y좌표, opacity, color

CSS3 Word Wrapping

{word-wrap:break-word;}

New Text Properties

- hanging-punctuation

- punctuation-trim

- text-align-last

- text-emphasis

- text-justify

- text-outline

- text-overflow

- text-shadow

- text-wrap

- word-break

- word-wrap

CSS3 Fonts

The CSS3 @font-face Rule

- CSS3 전에는 유저 컴퓨터에 존재하는 폰트만을 사용해야 했다. CSS3 으로는 아무 폰트나 가능하다.

- web server에 font file을 올려놓는다면, 사용될 때 유저 컴퓨터에 자동으로 다운로드 된다.

Using The Font You Want

@font-face
{
font-family:myFirstFont;
src:url('Sansation_Light.ttf'), url('Sansation_Light.eot');
}

Using Bold Text

- @font-face에 font-weight:bold; 를 추가

CSS3 Font Descriptors

- font-familiy:name ( required )

- src:URL (required)

- font-style:normal | italic | oblique

- font-weight : normal | bold | 100 | 200 | ~~ | 900

- unicode-range:unicode-range // UNICODE char 가 지원하는 font 범위를 설정

CSS3 2D Transforms

CSS3 Transforms

- CSS3 Transform이 있으면 이동, 스케일, 돌리기, 스피닝, 스트레치 등을 자유롭게 할 수 있다.

2D Transforms

- translate()

- rotate()

- scale()

- skew()

- matrix()

The translate() Method

{ transform: translate( 50px, 100px ); }

The rotate() Method

{ transform:rotate( 30deg ); }

The scale() Method

{ transform:scale( 2, 4 ); } // scale 기준은 element 의 center

The skew() Method

{ transform:skew( 30deg, 20deg );}

- x축을 30도, y축을 20도 돌린 효과이다.

The matrix() Method

- matrix는 2x3의 메트릭스를 갖는다.

{ transform:matrix( 0.866, 0.5, -0.5, 0.866, 0, 0 ); }

New Transform Properties

- transform

- transform-origin : transform된 element의 추후 위치 정한다.

2D Transform Methods

- matrix( n, n, n, n, n, n )

- translate( x, y )

- translateX( n )

- translateY( n )

- scale( x, y )

- scaleX( n )

- scaleY( n )

- rotate( angle )

- skew( x-angle, y-angle )

- skewX( angle )

- skewY( angle )

CSS3 3D Transforms

3D Transforms

- rotateX()

- rotateY()

The rotateX() Method

{transform:rotateX( 120deg );}

The rotateY() Method

{transform:rotateY( 120deg );}

Transform Properties

- transform

- transform-origin

- transform-style

- perspective

- perspective-origin

- backface-visibility

3D Transform Methods

- matrix3d( n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n )

- translate3d( x, y, z )

- translateX( x )

- translateY( y )

- translateZ( z )

- scale3d( x, y, z )

- scaleX( x )

- scaleY( y )

- scaleZ( z )

- rotate3d( x, y, z, angle )

- rotateX( angle )

- rotateY( angle )

- rotateZ( angle )

- perspective( n )

CSS3 Transitions

- 스타일 값의 변경이 있을때 flash animation이나 JS 없이 effect를 추가할 수 있다.

How does it work?

- 2가지를 명시해 주어야 사용할 수 있다.

1. effect를 주고 싶은 property

2. duration

{transition:width 2s; }

- duration 이 없는 경우 default 값인 0이 입력되어 effect가 없다.

Multiple changes

- comma 로 구분해준다.

{transition:width 2s, height 2s, transform 2s;}

Transition Properties

- transition : shorthand, property duration timing-function dealy;

- transition-property

- transition-duration

- transition-timing-function : linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier( n, n, n, n );

- transition-delay

CSS3 Animations

CSS3 @keyframes Rules

- CSS3 에서 animation 을 만들기 위해서는 @keyframes rule 을 알아야 한다. keyframes rule 은 애니메이션이 생성되는 곳이다.

- Animation 과 transition 의 차이는 property 값의 변화가 있고, 없고의 여부.

CSS3 Animation

- @keyframe을 통해 animation 을 만들고, 이것을 selector에 bind 를 해주어야 한다.

- animation name 과 animation duration 을 전달하며 bind 해주어야 한다.

{ animation:myAnimation 5s;}

What are Animations in CSS3?

- animation을 정의할 때 퍼센트로 정의하거나, from to 를 써서 정의할 수 있다.

@keyframes myAnimation
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

CSS3 Animation Properties

- @keyframes

- animation : shorthand, ( name, duration, timing-function, delay, iteration-count, direction; )

- animation-name

- animation-duration

- animation-timing-function

- animation-delay

- animation-iteration-count

- animation-direction

- animation-play-state : running, paused

CSS3 Multiple Columns

- 신문처럼 여러개의 column 를 생성할 수 있다.

- column-count

- column-gap

- column-rule

CSS3 Create Multiple Columns

{ column-count:3; }

CSS3 Specify the Gap Between Columns

{ column-gap:40px; }

CSS Column Rules

- column 사이의 line의 width, style, color

{ column-rule:3px outset #ff00ff; }

New Multiple Columns Properties

- column-count

- column-fill

- column-gap

- column-rule

- column-rule-color

- column-rule-style

- column-rule-width

- column-span

- column-width

- columns : shorthand ( column-width column-count )

CSS3 User Interface

- resizing element, box sizing, outlining 등을 UI 로 정의한다.

- resize

- box-sizing

- outline-offset

CSS3 Resizing

{ resize:both; }

CSS3 Box Sizing

- element 의 내용들의 사이즈가 맞춰지도록 설정

{ box-sizing:border-box; }

CSS3 Outline Offset

- outline 에 offset 을 줄 수 있다.

- outline 은 공간을 차지하지 않고, 직사각형이 아닐 수도 있다.

{
border:2px solid black;
outline:2px solid red;
}

New User-interface Properties

- appearance

- box-sizing

- icon

- nav-down

- nav-index

- nav-left

- nav-right

- nav-up

- outline-offset

- resize

References

CSS3 Reference

http://www.w3schools.com/cssref/default.asp

Browsder support

http://www.w3schools.com/cssref/css3_browsersupport.asp

Selectors

http://www.w3schools.com/cssref/css_selectors.asp

Reference Aural

http://www.w3schools.com/cssref/css_ref_aural.asp

Web Safe Fonts

http://www.w3schools.com/cssref/css_websafe_fonts.asp

Units

http://www.w3schools.com/cssref/css_units.asp

Colors

http://www.w3schools.com/cssref/css_colors.asp

Color Values

http://www.w3schools.com/cssref/css_colors_legal.asp

Color Names

http://www.w3schools.com/cssref/css_colornames.asp

Color Hex

http://www.w3schools.com/cssref/css_colorsfull.asp

도움이 되셨다면 손가락 꾸욱~ ( 로그인 필요 x )

저작자표시 비영리 변경금지

'프로그래밍 놀이터 > Web' 카테고리의 다른 글

[Script] JSON Tutorial ( 기초 강좌 ) (0)	2012.11.01
[Script] AJAX Tutorial & Example ( 예제코드 ) (0)	2012.10.31
[API] 개발자들이 사랑할 수 있는 API 설계방법 from Web API Design - Crafting Interfaces that Developers Love. (0)	2012.10.31
[SDK] Adobe AIR vs. Titanium vs. PhoneGap (0)	2012.10.29
[SDK] Titanium vs. PhoneGap (0)	2012.10.29

돼지왕 왕돼지 놀이터

[Script] CSS3 Tutorial ( 기초강좌 )

'프로그래밍 놀이터 > Web' 카테고리의 다른 글

댓글

티스토리툴바

[Script] CSS3 Tutorial ( 기초강좌 )

'프로그래밍 놀이터 > Web' 카테고리의 다른 글

댓글

관련글

티스토리툴바