오늘 목표
- 수업 전 7시 기상 후 운동(O)
- 수업 내용 모르는 거 및 공부내용 정리(O)
- JS 강의 듣기(O)
공부내용
Animation
Animation은 여러 CSS 스타일 속성으로 요소의 크기, 색상, 모양 등을 제어해 애니메이션 효과를 부여하는 기술입니다.
자바스크립트를 사용하지 않고도 간단하게 요소에 동적 효과를 부여할 수 있기 때문에 보다 좋은 성능으로 애니메이션을 구현할 수 있습니다.
Transition vs Animation
Transition은 요소의 전후 상태를 부드럽게 변화시키는 효과를 제공하며 단지 시작과 종료 상태만 고려하면 되기 때문에 간단하게 사용할 수 있습니다.
반면 Animation은 시작과 종료뿐만 아니라 중간 상태도 고려할 수 있으며 더 복잡하고 다양한 효과를 추가할 수 있습니다.
keyframs 사용법
@keyframes 애니메이션이름 {
0% {}
50% {}
100% {}
}Animation
animation: 애니메이션이름 지속시간 대기시간? 타이밍함수? 반복횟수? 반복방향? 전후상태? 재생/정지?;애니메이션 단축 속성을 사용한다면 애니메이션 이름과 지속시간은 반드시 필요하다.나머지는 필요에 따라 사용하면 된다.
animation-delay
애니메이션이 시작하기 전에 얼마나 기다릴 것인지의 대기 시간(Delay)을 설정합니다. 만약 음수 시간을 적용하면 더 앞서 시작합니다.
animation-timing-function
애니메이션 시작부터 종료까지의 가속도와 감속도를 조정
- linear 일정하게
- ease 빠르게 - 느리게
- ease-in 느리게 - 빠르게
- ease-out 빠르게 - 느리게
- ease-in-out 느리게 - 빠르게 - 느리게
- cubic-bezier(n1, n2, n3, n4) 자신만의 값을 정의(0~1)
- steps(n, j?) n번 분할된 애니메이션
animation-iteration-count
animation-iteration-count: 1;
animation-iteration-count: infinite; // 무한 반복animation-direction
애니메이션의 반복의 방향을 지정합니다. 왕복으로 애니메이션을 할 경우 animation-iteration-count가 2 이상 이여야 합니다.
- normal(기본값) 정방향만 반복
- reverse 역방향만 반복
- alternate 정방향 왕복
- alternate-reverse 역방향 왕복
animation-fill-mode
애니메이션 전후의 요소 상태를 지정합니다.
요소가 가진 기본 스타일과 적용된 애니메이션 스타일 중 어떤 스타일을 애니메이션 전후에 유지할 것인지 결정합니다.
애니메이션 스타일만 표시되길 원하는 경우, 기본 스타일을 무시하는 both 값을 지정합니다.
none (기본값) 애니메이션 전에도 원래 스타일, 끝난 후에도 원래 스타일로 돌아감
forwards 애니메이션이 끝난 상태를 유지함
backwards 애니메이션이 시작하기 전에도 시작 상태를 미리 적용
both 시작 전에 backwards, 끝난 후에 forwards 둘 다 적용됨
부모요소 높이 정하지 않는게 좋다?
자식 요소가 내용에 따라 자동으로 늘어나야 할 때
부모의 높이가 height: 500px 고정돼 있으면 자식이 500px를 넘는다면 overflow:hidden이 되어있을 경우 가려지거나 혹은 스크롤이 생김.
felx나 grigd에서 자동 정렬을 위해
flex나 grid로 레이아웃을 짤 때, height를 고정하면 예상치 못한 정렬 문제가 생길 수 있기 때문에 부모의 height는 고정을 자제하자.
스크롤 영역 만들 때는 height 필요
높이를 고정으로 두고 높이를 넘어서면 일부로 스크롤을 만들때에는 height를 고정시키는게 맞음.
align-items 그리고 align-content
쉽게 말하면 align-items는 한줄에 있는 요소를 대상으로 하고 align-content는 여러 줄 전체를 대상으로해 align-content는 1줄은 적용이 안되고 여러 줄일 경우에만 적용이 되는 것을 기억하자!
position
Static(기본값)
static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다.
이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시됩니다.
relative
요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다
top, left, bottom, right 속성값을 사용해 현재 위치에서 이동을 시킬 수 있다. relative는 left/right top/bottom 동시에 쓰면 원하는 대로 동작 하지 않을 수 있다.
absolute
absolute일 경우 배치 기준을 부모(상위) 요소에서 position이 static이 아닌 상위 요소가 배치 기준이 된다. 보통 relative를 position으로 지정해 배치 기준을 정해서 사용한다. position: absolute인 요소는 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 된다는 것입니다.
absolute에서 top,left,bottom,right는 모두 동시에 사용이 가능하며 top과 bottom을 동시에 사용하면 부모의 세로 길이를 다 채우게 된다 또한 left right를 동시에 쓰면 부모 요소를 다 덮게 된다.
.box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
fixed
fixed를 사용하면 항상 고정된 위치에 배치할 수 있습니다.
fixed의 배치 기준은 부모나 자신이 아닌 브라우저 기준으로 정해지기 때문이다. fixed도 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않습니다.
sticky
sticky는 스크롤을 따라다니다가, 특정 위치에 도달하면 고정된다.
스켈레톤 UI
스켈레톤 UI란 콘텐츠가 로딩되는 동안에 실제 콘텐츠의 구조를 미리 사용자에게 보여줌으로 사용자 경험을 높여주는 방법이다. 로딩시간이 같더라도 시각적으로 보이는게 있다면 사용자는 덜 기다리는 것 처럼 느껴지는 효과가 있다.
스켈레톤 UI 특징
1.보여질 콘텐츠 레이아웃 구조를 보여줌
2.회색 계열의 중립적인 색상 사용
3.애니메이션 효과나 콘텐츠를 보여줘 사용자의 경험을 높여줌.
스켈레톤 UI 직접 해보기
/* 스켈레톤 ui */
.skeleton {
background-color: #e0e0e0;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.skletion::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%; //bottom :0 으로 변경가능
height: 100%; // right :0 으로 변경가능
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 100%
);
/* animation: shimmer 2s; */
animation-name: shimmer;
animation-timing-function: ease-in;
animation-duration: 1s;
/* animation-fill-mode: both; */
/* animation-direction: alternate; */
animation-iteration-count: infinite;
transform: translateX(0%);
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
Layout 구성
Swiper 컨테이너가 position: relative로 설정되어 있기 때문에,
Skeleton 요소는 position: absolute로 지정한 후,
top: 0; left: 0; right: 0; bottom: 0을 설정하여
부모 요소 전체(Swiper 영역)를 덮도록 했습니다.
Skeleton 스타일
background는 linear-gradient로 설정해 빛이 지나가는 듯한 효과를 연출합니다.
애니메이션 이름은 shimmer이며, 반짝이는 느낌을 주기 위해 설정되었습니다.
animation-timing-function으로는 ease-in을 사용하여,
느리게 시작해서 빠르게 끝나는 자연스러운 움직임을 만듭니다.
애니메이션은 1초 동안 진행되며, infinite로 계속 반복됩니다.
Keyframes -
translateX(-100%)에서 translateX(100%)까지 이동하도록 설정되어, 빛이 왼쪽에서 오른쪽으로 지나가는 효과를 줍니다.
Overflow 제어
.skeleton 클래스에는 overflow: hidden을 설정하여, 내부 애니메이션 요소가 부모 영역을 벗어나지 않도록 제한합니다.
이로 인해 빛이 지나가는 듯한 깔끔한 반짝임이 연출됩니다.
