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
animation	animation 단축 프로퍼티

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>