Home CSS_css handling
Post
Cancel

CSS_css handling

Posted 2023-10-09 10 min read

콘텐츠 모양을 자유롭게 변형하기

속성명 속성값 설명
transform(2D) scale 선택한 요소의 크기를 축소 및 확대 (현재 크기 비율 기준 1보다 크면 확대, 작으면 축소)
skew 선택한 요소를 x축 or y축으로 비틀어 변형 (원하는 각도를 지정하여 기울기 조절 가능)
translate 선택한 요소를 현재 위치 기준에서 x축 or y축으로 이동
rotate - 선택한 요소 회전
- 원하는 각도를 지정하여 회전 가능
transform(3D) rotateX, rotateY 선택한 요소를 x축 or y축으로 입체감있게 회전
translateZ 선택한 요소를 z축으로 입체감 있게 보이면서 이동
perspective px 3D 효과가 적용된 요소가 입체감 있게 보이도록 부모 요소에 적용하여 원근감 부여
transform-style preserve-3d 부모 요소에 preserve-3d 속성을 적용하여 3D효과 유지
transform-origin 가로축, 세로축 요소의 변형이 일어나는 중심축을 가로축, 세로축 기준으로 변경할 수 있음

transform-style
 3D 효과가 적용된 요소에 모션 처리를 하면 해당 3D효과가 풀리게되므로 부모 요소에 적용하여 효과 유지

perspective

해당 속성을 추가하지 않아도 3D 속성을 적용하면 입체 효과가 나타나야하지만 왜곡까지 표현하기는 어려움

사람이 느끼는 왜곡 현상을 강제로 적용하여 가까운 물체를 바라볼 때는 왜곡이 커지고 멀리서 보면 완만해지는 원리 적용 (px값은 물체를 바라보는 거리의 값)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* 2D 변형 */

/* 요소 2배 확대 */
태그1 {
	transform: scale(2);
}

/* 요소 X축 기준 10도 비틀기 */
태그2 {
	transform: skewX(10deg);
}

/* 요소 X축 기준 100px만큼 이동 */
태그3 {
	transform: translateX(100px);
}

/* 요소 90도 회전 */
태그4 {
	transform: rotate(90deg);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* 3D 변형 */

/* x축 기준 45도 회전 */
태그1 {
	transform: rotateX(90deg);
}

/* z축 기준 10px 이동 */
태그2 {
	transform: translateZ(10px);
}

/* 가로축 기준 right, 세로축 기준 center */
/* 기준점이 이동했을 경우 회전 등의 기준은 이동한 변을 기준으로 함 */
태그3 {
	transform-origin: right center;
}

사용자 행동에 반응하는 전환 효과 만들기

  • 요소의 속성값이 변경될 때 시간을 지정하여 지정된 시간 동안 모션 처리함
속성명 속성값 설명
transition-property 속성명 - 전환 효과 줄 CSS 속성명 지정
- 속성명은 여러개 지정 가능
- all 입력 시 전체 속성 사용 가능
transition-duration 지속 시간 (초 단위) - 전환 효과 발생 시 지속 시간
- 지속 시간은 초(s) 단위로 지정
transition-delay 지연 시간 (초 단위) - 전환 효과 발생 시 지연할 시간
- 지연 시간은 초(s) 단위로 지정
- 지연 시간 이후에 전환 효과 발생
transition-timing-function 가속도 - 전환 효과의 가속도
- linear : 등속 효과
- ease : 가속 효과
- ease-in : 모션 시작 시 가속
- ease-out : 모션 종료 시 가속
- ease-in-out : 모션 시작, 종료 시 가속
- cubic-bezier : 사용자가 지정한 가속 효과 적용
transition 속성명 / 전환 시간 / 가속도 / 지연 시간 모든 전환 효과 관련 속성값 축약 사용

cubic-bezier.com
 가속도 함수를 쉽게 생성해주는 사이트

transition

  • transition-propety > transition-duration > transition-timing-function > transition-delay 순서로 입력
  • EX_transition: all 1s cubic-bezier(.46, -0.64, .58, 1.39) 0s;

자동으로 움직이는 애니메이션 효과 만들기

  • 애니메이션 효과 : 미리 지정한 조건에 맞게 자동으로 반복
속성명 속성값 설명
@keyframes 애니메이션 세트 지정 - 애니메이션의 시작과 끝을 등록하여 사용자 모션 등록
- 0%는 시작 지점, 100%는 끝 지점
- 중간 지점은 여러 개 추가 가능
- 단계별로 동작 방식을 지정해서 특정 이름을 붙여 키프레임 등록 가능
animation-name 이름 키프레임으로 등록한 모션의 이름 호출
animation-duration 지속 시간 (초 단위) 키프레임 모션 한 세트를 얼마나 지속할지 초 단위로 등록
animation-timing-function 가속도 - 키프레임 모션 실행 시 가속도 설정
- 가속도 사용법은 transition 속성과 동일
animation-iteration-count 횟수 - 키프레임 모션 한 세트가 몇 번 동작하는지 횟수를 숫자로 설정
- 무한 반복 : 속성값 infinite
animation-delay 지연 시간 (초 단위) 키프레임 모션 실행 시 지연 시간 지정
animation-play-state running / paused 키프레임 모션 실행 시 동작 상태 지정
- running : 모션 진행
- paused : 일시 정지
animation 이름 / 진행 시간 / 가속도 / 지연 시간 / 반복 횟수 애니메이션 속성 축약 작성 가능

animation-timing-function
 속성값 : linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/* rotation이라는 애니메이션 모션 지정 */
@keyframes rotation {
	0% {
		/* 시작점 */
		transform: rotate(0deg);
	}
	100% {
		/* 끝점 */
		transform: rotate(360deg);
	}
}

태그1 {
	/* rotation 키프레임 호출 */
	animation-name: rotation;
	/* 모션 1세트 1초 지속 */
	animation-duration: 1s;
	/* 등속 */
	animation-timing-function: linear;
	/* 5번 반복 */
	animation-iteration-count: 5;
	/* 지연 없음 */
	anination-delay: 0s;
}


/* 요소가 반복해서 회전하다가 마우스를 요소 위에 올리면 일시 정지, 내리면 다시 회전 */
태그2 {
	animation-name: rotation;
	animation-duration: 1s;
	animation-timing-function: linear;
	/* 무한 반복 */
	animation-iteration-count: infinite;
	animation-delay: 0s;
	/* 모션 진행 */
	animation-play-state: running;
	transform: rotate(50deg);
}

/* :hover 가상선택자는 마우스 커서를 올렸을 때 반응 */
태그2:hover {
	animation-play-state: paused;
}

rotate 50deg : 50도씩 회전하지만 ‘무한 반복 + 딜레이 0s’이기 때문에 계속 등속회전(linear)하는걸로 보이게 됨

animation

  • animation-name > animation-duration > animation-timing-function > animation-iteration-count > animation-delay 순서로 입력
  • EX_animation: ratation 1s linear 0s infinite;

벡터 이미지 파일 제어하기

비트맵 이미지와 벡터 이미지 차이

비트맵 이미지 벡터 이미지
픽셀을 조합한 이미지 출력 좌푯값을 연결하여 이미지 출력
확대하면 이미지 품질 저하 확대해도 이미지 품질 유지
파일 용량 큼 비트맵 이미지보다 파일 용량 작음

패스의 stroke-dasharray와 stroke-dashoffset 속성 이해하기

  • 패스의 stroke-dasharray : 선의 간격을 띄는 속성
    • 값이 클수록 선의 간격이 벌어짐
    • 빈 공간이 늘어날수록 실제 선의 길이가 같은 비율로 늘어남 (설정한 빈 공간과 실제 선이 그려지는 영역의 크기는 항상 같음)
  • 패스의 stroke-dashoffset : 가시 영역에 보이는 선의 시작 위치 지정 속성

화면 너비에 따라 웹 페이지 디자인 변경하기

  • 반응형 웹 : 화면 너비에 따라 웹 페이지 변화
Web, Study
Web Frontend CSS
This post is licensed under CC BY 4.0 by the author.
Contents