CSS 속성 2

display

- 각 요소의 박스 타입을 지정

     div {

display: inline;

}

① Property Value : 속성값 

inline : 박스 타입을 인라인 요소로 지정

block : 박스 타입을 블록 요소로 지정

inline-block : 박스 타입을 인라인 블록 요소로 지정, 컨텐츠는 블록 요소로 지정하고 요소 자체는 인라인 요소로 지정, width / height 속성 사용 가능 

none : 요소를 전혀 표시하지 않음 

background

- 요소의 배경을 설정

background: color(색상)  image(이미지 경로) position(위치) repeat(반복유무);

 div {

background: #00ff00 url(.."img/image.jpg") no-repeat center top;

}

① background-color : 배경 색상을 지정

② background-image : 하나 이상의 배경 이미지를 지정

url("불러올 이미지 경로")

③ background-position : 배경 이미지의 위치(값)를 지정 (x축, y축 2개의 속성 값으로 위치 설정) 

top, bottom, left, right, center

px

%

④ background-repeat : 배경 이미지의 반복 유무를 지정

repeat : 배경 이미지를 x축 및 y축으로 반복

repeat-x : 배경 이미지를 x축으로 반복

repeat-y : 배경 이미지를 y축으로 반복

no-repeat : 이미지 반복 없음

z-index

요소의 렌더링 되는 z축의 위치를 결정

① Property Value : 속성값

number

② z축의 위치를 결정하는 방법

HTML 계층 구조대로 결정 (자식 요소가 부모 요소 위에 쌓임) 

* z-index 속성의 숫자가 높을 수록 위에 결정

position 속성이 지정된 요소가 보다 위에 결정 (position: static 제외)

overflow

요소의 내용이 요소 자체의 크기 이상일 경우 처리 방식의 결정 

.box {

overflow: hidden;

}

① Property Value : 속성값

visible : (기본값) 요소 크기 이상으로 렌더링

hidden : 요소 크기 이상의 내용을 숨김

scroll : 스크롤을 생성하여 내용을 볼 수 있음

auto : 브라우저에 따라서 상이, 자동으로 스크롤을 생성하거나 렌더링됨

cursor

요소를 가리키는 커서(cursor) 유형을 변경 

OS 운영체제 및 브라우저 등에 따라서 커서 모양이 다를 수 있음

① Property Value : 속성값

default : (기본값) 화살표

pointer : 손가락 모양

text : 

not-allowed : 

none

opacity

요소의 투명도 레벨을 결정 

① Property Value : 속성값

number : 0 (투명) ~ 1.0 (불투명) 사이의 소수점

@media - 쿼리 미디어 : 반응형 웹 만들 때 사용

디바이스의 종류 및 크기 등에 따라 CSS 속성을 다르게 적용 가능 

@media screen and (min-width: 480px) {   - 스크린이 최소 480px일 경우 :  480px 이상일 경우 

body {color: red;}

}

① Media Type : 미디어 타입

all : 모든 미디어 타입에 적용

print : 인쇄용도

screen : 컴퓨터 스크린 용도 

② Media Features : 미디어 속성

max-width : 브라우저 표시 영역의 최대 폭 (*특정 값 이하일 경우)

min-width : 브라욷저 표시 영역의 최소 폭 (*특정 값 이상일 경우)

transition

CSS 속성의 시작과 끝을 지정하여 중간의 값을 애니메이션 처리 (시작값이 필요!)

단축 속성 : transition : [property]  [duration]  [timing-function]  [delay];

.div1 {

transition: all 2s line 1s;

}

.div2 {

transition: width 2s, height 4s;

}

① transition-property : 애니메이션이 적용될 CSS 속성 이름

all : 모두 적용

property :CSS 속성 이름

② transition-duration : 애니메이션이 발생하는 지속시간

time : 시간 (1s = 1초)

③ transition-timing-function : 애니메이션의 중간 값을 계산하는 함수를 명시 (easing, cubic bezier)

ease (기본값)

liner

ease-in

ease-out

ease-in-out

cubic-bezier(n,n,n,n)

④ transition-delay : 애니메이션 시작까지의 지연시간 

time : 시간 (1s = 1초)

transform

요소를 2D, 3D로 변형할 때 사용

단축속성 : transform : [translate(x,y)]  [scale(x,y)]  [rotate(angle)]  [etc..];

① Property Value : 속성값

translate(x,y) : x축, y축으로 위치 이동 (2D)

scale(x,y) :x축, y축 크기 지정 (2D)

rotate(angle) : 요소의 2D 회전 각도 (deg)

rotateX(angle) : 요소의 x축 3D 회전 각도 (deg)

rotateY(angle) : 요소의 y축 3D 회전 각도 (deg)

② transform-origin : 요소의 변형 기준점 (기본값: 50% 50% 0)

x축 : left, center, right, length(px), %

y축 : top, center, bottom, length(px), %

z축 : length(px)

③ transform-style :3D 렌더링 여부 지정 

flat : 기본값 2D 렌더링

preserve-3d :3D 렌더링

④ perspective : 원근 거리를 지정 (원근법)

length(px)

⑤ perspective-origin : 원근 거리의 기준점 (기본값 : 50% 50%)

x축 : left, center, right, length(px), %

y축 : top, center, bottom, length(px), % 

⑥ backface-visibility : 요소의 뒷면 표시 여부 (*3D transform에서만 동작)

visible (기본값) : 요소 뒷면 보임

hidden : 요소 뒷면 숨김

animation

요소를 애니메이션

단축속성 : animation : [name]  [duration]  [timing-function]  [delay]  [iteration-count]  [direction]  [fill-mode]  [play-state];

① animation-name : 2개 이상의 애니메이션 중간 상태를 @keyframes 을 이용하여 지정 

keyframe-name : @keyframes 의 이름 

none (기본값) : 애니메이션 없음 

② animation-duration : 애니메이션의 지속시간

time : 시간 (1s = 1초)

③ animation-timing-function : 애니메이션의 지속시간

ease(기본값)

liner

ease-in

ease-out

ease-in-out

cubic-bezier(n,n,n,n)

steps(n) : 애니멘이션의 프레임을 n번으로 분할해서 보여줌

 

④ animation-delay : 애니메이션 시작까지의 지연시간

time : 시간 (1s = 1초)

⑤ animation-interation-count : 애니메이션 반복 횟수 지정 (기본값 : 1회)

number : 반복횟수

infinite : 무한 반복

⑥ animation-direction : 애니메이션의 반복 방향 

normal : 정방향으로 시작, 복귀하지 않고 정방향만 반복.

*reverse : 역방향으로 시작, 복귀하지 않고 역방향만 반복.

alternate : 정방향으로 시작, 역방향으로 복귀 

*alternate-reverse : 역방향으로 시작, 정방향으로 복귀 

⑦ animation-fill-mode :애니메이션 전후 상태 설정

none(기본값) : 기존 위치 대기 -시작 위치 이동 - 애니메이션 (시작 + 끝) - 기존 위치 복귀

forwards : 기존 위치 대기 - 시작 위치 이동 - 애니메이션 (시작 + 끝) - 끝 위치 고정

backwards : 시작 위치 이동 - 애니메이션 (시작 + 끝) - 기존 위치 복귀

both : 시작 위치 이동 - 애니메이션 (시작 + 끝) - 끝 위치 고정 

⑧ animation-play-state : 애니메이션 재생/정지

paused : 정지

running(기본값) : 재생

@keyframes

2개 이상의 애니메이션 중간 상태를 지정

@keyframes  animation-name {

0% { color: blank; }

100% {color: red; }

}

① Property Value : 속성값

animation-name : 애니메이션 이름(*animation-name의 keyframe-name과 동일)

*keyframes-selector : 애니메이션의 중간 상태 위치

css-style : 해당 상태의 CSS 속성

② keyframes-selector : 중간 상태 위치 값

0%~100%

from : 시작 값 (0%와 동일)

to : 종료 값 (100%와 동일)