4. CSS 배치와 애니메이션

1. CSS position

position 프로퍼티 / HTML 요소 위치 결정 방식

(1) 정적 위치 (static position) (디폴트)

  • 다른 태그와의 관계에 의해 자동으로 배치되며, 임의로 위치 설정 불가, 상속 등으로 설정된 position을 리셋할때 사용

(2) 상대 위치 (relative position)

  • 미설정 시 원래 요소가 존재해야 하는 위치를 기준으로 좌표 지정
  • 문서의 일반적인 흐름에 포함됨
    • 미지정 시 원래 요소가 존재해야 하는 공간을 남두고, 요소가 상대적 위치로 이동

(3) 절대 위치 (absolute position)

  • 가장 가까운 위치에 있는 position 속성이 relative인 부모 요소를 기준으로 left, right, top, bottom 값으로 요소를 위치
  • position 속성이 relative인 부모 요소가 없으면 body 요소를 기준으로 위치
  • 문서의 일반적인 흐름에 포함되지 않고, 페이지 레이아웃 공간도 배정하지 않음
    • 다른 요소가 먼저 위치를 점유해도 덮어 씌우게 됨 (부유 객체; floating object)

(4) 고정 위치 (fixed position)

  • 뷰포트를 기준으로 특정 위치에 배치 (스크롤 X)
  • 문서의 일반적인 흐름에 포함되지 않고, 페이지 레이아웃 공간도 배정하지 않음
    • 다른 요소가 먼저 위치를 점유해도 덮어 씌우게 됨

z-index 프로퍼티

  • z-index 프로퍼티에 큰 숫자값을 지정할 수록 화면 전면에 출력

  • static 이외의 요소에 적용

overflow 프로퍼티

  • visible (디폴트)

  • hidden

  • scroll

  • auto: 부모 영역을 벗어난 부분이 있을 때만 스크롤 표시


2. CSS transition

CSS 프로퍼티 값 변경 시, 해당 값의 변화가 일정 시간에 걸쳐 일어나도록 해서 일종의 애니메이션 효과를 주는 기능

transition-property / transition-duration 프로퍼티

  • transition-property: 트랜지션 대상이 되는 CSS 프로퍼티 지정 (디폴트: all)
  • transition-duration: 초(s) 또는 밀리 초(ms)로 지정 (디폴트: 0s)
div {
	transition-property: opacity, width, height, background-color;
	transition-duration: 3s 2s;
}

// 두 설정은 동일
div {
	transition-property: opacity, width, height, background-color;
	transition-duration: 3s 2s 3s 2s
}

transition-timing-function 프로퍼티

  • 디폴트: 0s
  • ease: 느리게 시작, 점점 빨라지다가, 다시 느려지며 종료
  • linear
  • ease-in: 느리게 시작, 일정 속도 후에는 동일 속도로 진행
  • ease-out: 일정 속도로 진행 후, 점점 느려지며 종료
  • ease-in-out: 느리게 시작 (속도가 빨라지는 시간이 ease 보다 김), 점점 빨라지다가, 다시 느려지며 종료
  • step-start
  • step-end
  • steps(n, start/end)
  • cubic-bezier(n, n, n, n): n == 0 ~ 1

cubic-bezier

transition-delay 프로퍼티

transition 단축 프로퍼티

transition: property duration function delay

// property duration
transition: margin 2s

// property duration delay
tansition: margin 2s 1s;

// property duration timing-function delay
transition: margin 2s ease-in 1s;

3. CSS animation

  • transition은 변경되어야할 스타일만 지정하지만, animation은 중간에 변경되는 스타일을 세밀하게 지정할 수 있음

  • animation은 animation을 나타내는 CSS 스타일과 중간상태를 나타내는 키프레임(@keyframes)으로 이루어짐

가벼운 효과는 CSS 애니메이션, 세밀한 제어가 필요한 애니메이션은 javascript로 처리

keyframes 문법

from 또는 0%에 설정한 스타일에서 시작해서 to 또는 100%까지, 또는 그 중간 시점을 %로 표기하여, 각 시점에 설정한 스타일로 변경되는 스타일 설정

<style>
  .box1 {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 2px solid #F2B441;
    background: #FD541;
    border-radius: 10px;
    animation-name: ball;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }
	@keyframe ball {
	0% {  
		// keyframe
	}
	50% {
		// keyframe
	}
	100% {
		// keyframe
	}
  @keyframe fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}
</style>

주요 animation 프로퍼티

프로퍼티설명기본값
animation-name@keyframes 애니메이션 이름 지정
animation-duration한 사이클의 애니메이션에 소요되는 시간을 초(s) 또는 밀리 초(ms)로 지정0s
animation-timing-function애니메이션 속도 설정을 위한 함수 지정ease
animation-delay애니메이션 시작 전 대기시간을 초(s) 또는 밀리 초(ms)로 지정0s
animation-iteration-count애니메이션 재생 횟수 지정1
animation-direction애니메이션 종료 후 반복될 때 진행방향 지정normal
animation-fill-mode애니메이션 종료 또는 대기 시의 요소 스타일 지정
animation-play-state애니메이션 재생 상태 지정running
animationanimation 단축 프로퍼티

animation-timing-function 프로퍼티

transition-timing-function과 동일

  • 디폴트: ease
  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end
  • steps(n, start/end)
  • cubic-bezier(n, n, n, n)

animation-duration, animation-delay

animation-iteration-count

정수로 지정가능, infinite == 무한반복

animation-direction

  • normal: 0% -> 100%
  • reverse: 100% -> 0%
  • alternate: 홀수 번째는 normal, 짝수 번째는 reverse로 전행
  • alternate-reverse

animation-fill-mode

  • none: 처음 스타일 -> 0% -> 100% -> 처음 스타일
  • forwards: 처음 스타일 -> 0% -> 100% -> 100%
  • backwards: 0% -> 0% -> 100% -> 처음 스타일
  • both: 0% -> 0% -> 100% -> 100%

animation-play-state

주로 javascript와 함께 사용하여 이벤트에 따라 해당 프로퍼티 값을 변경

  • paused
  • running (디폴트)

animation 단축 프로퍼티

animation: name duration timing-function delay interation-count direction fill-mode play-state

4. CSS transform

요소의 회전, 크기조절, 기울이기, 이동 효과를 부여하는 함수를 제공한다. 애니메이션 등의 키프레임 기반 설정은 제공하지 않으므로, 애니메이션 효과 필요 시 CSS animation이나 transition과 함께 사용하면 된다.

tansform: <transform 함수>;

주요 transform 함수

transform 함수설명transform 함수 인자 값
translate(x, y)px, %, em 등
translateX(n)px, %, em 등
translateY(n)px, %, em 등
scale(x, y)0 또는 양수 (0~1 == 축소)
scaleX(n)0 또는 양수 (0~1 == 축소)
scaleY(n)0 또는 양수 (0~1 == 축소)
skew(x-angle, y-angle)요소를 가로로 x 각도만큼, 세로로 y 각도만큼 기울임정수, 단위: deg
skewX(x-angle)정수, 단위: deg
skewY(y-angle)정수, 단위: deg
rotate(angle)요소를 주어진 각도 (angle) 만큼 회전시킴정수, 단위: deg

transform-origin 프로퍼티

  • scale(), roate(), translate(), skew() 동작은 해당 요소의 중심을 기준으로 동작

  • tansfrom-origin 프로퍼티를 사용하여 요소의 기준점을 변경

    • 프로퍼티 값: left, center, right, length, % 등
transform-origin: x축 / y축 / z축

transform-origin: 50% 0%

5. CSS float

예외사항과 호환성 이슈로 인해 flexbox를 사용하는것이 일반적이다.

float 프로퍼티 값

  • none (디폴트)
  • right
  • left

clear 프로퍼티 값 -> float 해제

  • none (디폴트)
  • right: 왼쪽 float를 사용 해제
  • left: 오른쪽 float를 사용 해제
  • both

clearfix

float 사용 시 clear를 반드시 해줘야 하므로 clearfix를 사용한다.

<stlye>
.clearfix::after {
	content: "";
	clear: both;
	display: block;
}
</stlye>
...
<div class="clearfix">
	...
</div>

좋은 웹페이지 즐겨찾기