CSS position/background/transition/transform

postion

• 요소의 위치 지정 방법의 유형(기준)을 설정

• static, 기준 없음, 배치 불가능

• relative, 요소 자신을 기준으로 배치, 자신을 기준으로 하기땜에 형제요소에도 영향을 받아서 사용시 주의해야 함

• absolute, 위치상 부모 요소를 기준으로 배치, position이 부여되어 있는 요소가 부모요소가 됨

• fixed, 브라우저를 기준으로 배치, 스크롤을 하더라도 계속 그 위치를 유지하고 있음

• sticky, 스크롤 영역을 기준으로 배치, IE지원불가, 밀려 올라가는 효과 가능

top

• 요소의 position 기준에 맞는 위쪽에서의 거리를 설정

• auto, 브라우저가 계산

• 단위, px/em/cm 등 단위로 지정

• % 부모 요소의 세로 너비의 비율로 지정, 음수값 허용

bottom

• 요소의 position 기준에 맞는 아래쪽에서의 거리 설정

• 값은 top과 동일함

left

• 요소의 position 기준에 맞는 왼쪽에서의 거리를 설정

• auto, 브라우저가 계산

• 단위, px/em/cm 등 단위로 지정

• % 부모 요소의 가로너비의 비율로 지정, 음수값 허용

right

• 요소의 postion 기준에 맞는 오른쪽에서의 거리 설정

• 값은 left와 동일함

• display를 수정 함

• absolute, fixed 속성값이 적용된 요소는 display 속성의 값이 block으로 수정됨

요소 쌓임 순서(Stack order)

요소가 쌓여있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지를 결정(Z축)

1. static을 제외한 postion 속성의 값이 있을 경우 가장 위에 쌓임

2. postion이 모두 존재하면, z-index 속성의 숫자 값이 높을수록 위에 쌓임

3. postion 속성의 값이 있고, z-index 속성의 숫자 값이 같다면, 'HTML'의 마지막 코드일수록 위에 쌓임(나중에 작성한 코드)

background

• 요소의 배경을 설정

• color, image, repeat, position, attachment

• background: 색상 이미지경로 반복 위치 스크롤특성;

background-color

• 요소의 배경 색상을 지정

• 색상, transparent 등의 값을 가짐

background-image

• 요소의 배경에 하나 이상의 이미지를 삽입

• none, url("경로") 등의 값을 가짐

• 다중 이미지 사용 시 ,로 구분함

• 먼저 작성된 이미지가 더 위에 쌓임

• 이미지를 출력하기 위해서는 해당 요소에 width와 height 값을 입력해줘야 함

background-repeat

• 배경 이미지의 반복을 설정

• repeat, 배경이미지 수직과 수평으로 반복

• repeat-x, 수평으로 반복

• repeat-y, 수직으로 반복

• no-repeat, 반복 없음

background-position

• 배경 이미지의 위치를 설정

• %(왼쪽 상단 모서리: 0% 0%, 오른쪽 하단 모서리: 100% 100%), 방향, 단위 등의 값을 가짐

• 값이 방향일 경우는 입력순서 상관 없음

• 값이 단위일 경우는 X축 Y축의 입력 형태 주의해서 해야 함

background-attachment

• 요소가 스크롤될 때 배경 이미지의 스크롤 여부 설정

• scroll, 배경 이미지가 요소를 따라서 같이 스크롤 됨

• fixed, 배경 이미지가 뷰포트에 고정되어, 요소와 같이 스크롤 되지 않음

• local, 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨

background-size

• 배경 이미지의 크기를 지정

• auto, 단위(width만 입력해도 비율에 맞게 출력됨), cover(넓은 너비에 맞춰서 크기를 설정함), contain(짧은 너비에 맞춰서 크기를 설정함) 등의 값을 가짐

Transition(전환)

• CSS 속성의 시작과 끝을 지정하여 중간 값을 애니메이션

• transition: property, duration, property, duration;

transition-property

• 전환 효과를 사용할 속성 이름을 설정

• all이 기본값임(필요에 따라 속성이름을 입력하여 해당 속성만 영향을 줄 수 있음)

transition-duration

• 전환 효과의 지속시간 설정

• 시간은 0초가 기본임

• s나 ms등의 단위를 사용함

transition-timing-function

• 타이밍 함수 지정

• ease, 빠르게-느리게

• linear, 일정하게

• ease-in, 느리게-빠르게

• ease-out, 빠르게-느리게

• ease-in-out, 느리게-빠르게-느리게

• cubic-bezier(n,n,n,n), 자신만의 값을 정의(0~1)

• steps(n), n번 분할된 애니메이션(끊어져서 보여주는 역할)

transition-delay

• 전환 효과의 대기시간, 몇 초 뒤에 시작할지를 설정

• transition: 2s 3s; 라고 하면 3초가 지연되는 것임

transform

• 요소의 변환 효과를 지정

• position과 transition을 이용해 이동하는 것은 지양해야 함

transform 2D변환 함수

• 이동, 크기, 회전, 비틀기로 구성

• translate(x, y): 이동

• translateX(x): 이동

• translateY(y): 이동

• scale(x, y): 크기

• scaleX(x): 크기

• scaleY(y): 크기

• rotate(degree): 회전

• skew(x-deg, y-deg): 기울임

• skewX(x-deg): 기울임

• skewY(y-deg): 기울임

• matrix(n, n, n, n, n, n): 2차원 변환효과

transform 3D 변환 함수

• translate3d(x, y, z): 이동
• translateZ(z): 이동
• sclae3d(x, y, z): 크기
• scaleZ(z): 크기
• ratate3d(x, y, z, a): 회전(x벡터, y벡터, z벡터, 각도)
• rotareX(x): 회전
• rotateY(y): 회전
• rotateZ(z): 회전
• perspective(n): 원근법, transform의 가장 앞부분에 넣어야 함
• matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n): 3차원 변환 효과

transform 변환 속성

• transform-origin: 요소 변환의 기준점을 설정(X는 100에가까울수록 오른쪽, Y는 100에 가까울수록 위쪽)

• transform-style: 3D변환 요소의 자식요소도 3D 변환을 할지 설정(flat, 자식 요소의 3D변환 사용 안함/preserve-3d, 자식 요소의 3D변환 사용)

• perspective: 하위 요소를 관찰하는 원근 거리 설정(속성: 관찰대상의 부모 요소에 적용함, 관찰 대상이 여러개일때/함수: 관찰 대상 자체에 영향을 주는 것임, 관찰 대상이 하나일때)

• perspective-origin: 원근 거리의 기준점 설정

• backface-visibility: 3D 변환으로 회전된 요소의 뒷면 숨김을 설정(visible, 뒷면 숨기지 않음/hidden, 뒷면 숨김)

matrix(a, b, c, d, e, f)

• 요소의 2차원 변환 효과를 지정

• scale(), skew(), translate(), rotate()를 지정