CSS의 추가 기능

텍스트 효과

text-shadow : 4px  4px   20px  blue;

                     (가로, 세로, 그림자 길이, 색상 )

테두리와 배경

box-shadow : 4px  4px  20px  red;

                  ( 가로, 세로, 그림자 길이, 색상 )

 

그라디언트

    크롬

    background: -webkit-linear-gradient(top, bottom, left, right,(진행방향)(deg각도) white, gray);

   익스플로러

    background: -ms-linear-gradient(top, blue, white);

   파이어폭스

    background: -moz-linear-gradient(top, blue, white);

   오페라

    background: -o-linear-gradient(top, blue, white);

 

 

텍스트에쓴 영어를 대문자로 나오게함

   text-transform: uppercase;

 

글자색을 투명하게함

    color:transparent;

 

transform

 

트랜스폼은 요소에 이동, 회전, 확대/축소, 비틀기 효과를 부여하기 위한 함수를 제공한다.

트랜지션과 애니메이션과 함께 사용된다.

 

transform:translate(지정한 위치X축 또는 Y축 만큼 이동 시킵니다)

 

transform:scale(x축으로 X배, Y축으로 y배 만큼 확대/축소가 가능하다)

 

transform:skew(x축 또는 x축 만큼 기울인다)

 

transform:skew(y축 또는 y축 만큼 기울인다)

 

transform:rotate(각도 만큼 회전한다)

 

 

transition

- transition-property변화를 적용할 CSS속성을 지정

- transition-duration변화가 시작된 시점부터 끝날 시점까지의 시간을 지정

- transition-timing-function변화 속도의 패턴을 지정

- transition-delay변화를 시작할 시간 지

 

animation

애니메이션 대표의 이름을 임의로 부여할 수 있다.

 

animation-name: name; /* 문자열로 시작하는 이름 */

animation-name: _name; /* 언더바(_)로 시작하는 이름 */

animation-name: -name; /* 하이픈(-)으로 시작하는 이름 */

 

animation-duration

- 애니메이션의 소요되는 시간을 지정한다 초단위 또는 밀리초 단위를 사용한다.

animation-duration: 5s; animation-duration: 500ms;

 

animation-timing-function

- 애니메이션 효과의 시간당 속도를 설정해준다

1 linear : 애니메이션 효과가 일정한 속도로 진행 됩니다. 2 ease :  애니메이션 효과가 천천히 시작됩니다 처음에 빨라지고 마지막에 느려집니다. 3 ease-in : 애니메이션 효과가 천천히 시작된다. 4 ease-in-out: 애니메이션 효과가 천천히 시작되서 천천히 끝납니다.

 

animation-delay

- 애니메이션이 시작되는 사이에 대기시간을 지정한다 초 또는 밀리초를 나타낸다.

animation-delay: 2s; animation-delay:5ms;

 

animation-direction

- 애니메이션이 진행하는 방향을 지정한다.

from(0%)에서 to(100%)로 진행하는 방향을 지정한다.

  

animation-fill-mode

- 애니메이션 미실행시 대기 또는 종료시간에 스타일 지정한다.

 

none: 시작 프레임에서 스타일을 적용하지 않는다. 종료는 애니메이션 실행전 상태로 되돌린다. forwards : 시작 프레임에서 스타일을 적용하지 않고 종료 프레임에서 대기한다. backwards : 시작 프레임에서 스타일을 적용하고 대기한다 애니메이션 실행전 상태로 되돌아가서 종료 한다. both : 시작 프레임에서 스타일을 적용하고 대기한다 종료 프레임에서 스타일을 적용하고 종료 한다.

 

display: none과 차이점

• display: none: 요소가 렌더링 되지 않음(DOM에 존재하지 않음)
• visibility: hidden: 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)

 

float 속성

요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성입니다.

    기본 값 : none

 

< 속성 값 >

none	float 시키지 않음(기본값)
left	좌측으로 float 시킴
right	우측으로 float 시킴

 

• 요소를 보통의 흐름에서 벗어나 띄어지게 함

      주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음

clear 속성

요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다.

     기본 값 : none

clear: none | left | right | both | initial | inherit;

< 속성 값 >

none	양쪽으로 floating 요소를 허용(기본값)
left	왼쪽으로 floating 요소를 허용하지 않음
right	오른쪽으로 floating 요소를 허용하지 않음
both	양쪽으로 floating 요소를 허용하지 않음

 

• block-level 요소만 적용 가능