Dlog

CSS 애니메이션

CSS 애니메이션은 여러 개의 CSS 스타일을 부드럽게 전환시켜준다.

@keyframes 키워드를 활용하면 단계별로 정밀하게 짜여진 애니메이션을 만들 수 있다!

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

애니메이션을 정의하는 CSS 속성들:

• animation-name: 애니메이션의 이름 (@keyframes에서 정의된 이름과 일치해야 함).
• animation-duration: 애니메이션이 한 번 실행되는 데 걸리는 시간 (예: 2s는 2초).
• animation-timing-function: 애니메이션의 속도 곡선 (예: ease, linear, ease-in, ease-out, ease-in-out 등).
• animation-delay: 애니메이션이 시작되기 전 지연 시간.
• animation-iteration-count: 애니메이션 반복 횟수 (예: infinite는 무한 반복).
• animation-direction: 애니메이션 반복 시 방향 (예: normal, reverse, alternate, alternate-reverse).
• animation-fill-mode: 애니메이션이 시작하기 전이나 끝난 후 요소의 스타일 상태 (예: none, forwards, backwards, both).

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

transition VS animation 차이

transition 속성과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성이다.

transition 속성은 요소의 상태가 변해야 바뀌는 상태를 애니메이션을 실행한다.

animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다.

요소의 모양과 동작을 키프레임 단위로 변경할 수 있고, 키프레임 동작은 재생 횟수, 재생 방향등 여러 애니메이션 속성으로 제어할 수 있다.

-끝-

css에서 정말 자주 사용하는 flex!

오늘은 flex 속성 2탄!

자주 헷갈리는  justify-content와 align-items 속성의 개념 정리하기

flex 컨테이너 내부 아이템들을 어떻게 정렬할지를 결정하는  justify-content와 align-items !

justify-content: 주축에 대한 정렬

justify-content 속성은 flex 컨테이너 내의 아이템들을 주축(main axis)을 따라 어떻게 정렬할지를 결정한다.

주축은 디폴트가 수평 방향(flex-direction: row)임

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

• flex-start: 아이템들을 주축의 시작 부분으로 정렬 (기본값)
• flex-end: 아이템들을 주축의 끝 부분으로 정렬.
• center: 아이템들을 주축의 가운데로 정렬
• space-between: 첫 번째 아이템은 주축의 시작 부분에, 마지막 아이템은 끝 부분에 배치하고 나머지 아이템들은 사이에 고르게 배치
• space-around: 아이템들 사이에 고르게 여백을 두고, 시작과 끝에도 반만큼의 여백을 둠
• space-evenly: 아이템들 사이에 고르게 여백을 두고, 시작과 끝에도 동일한 여백을 둠

align-items: 교차 축 에 대한 정렬

align-items 속성은 flex 컨테이너 내의 아이템들을 교차 축(cross axis)을 따라 어떻게 정렬할지를 결정한다.

교차 축은 주축에 수직인 방향

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

• flex-start: 아이템들을 교차 축의 시작 부분으로 정렬 
• flex-end: 아이템들을 교차 축의 끝 부분으로 정렬 
• center: 아이템들을 교차 축의 가운데로 정렬 
• stretch: 아이템들을 교차 축을 따라 늘려서 컨테이너에 맞춤 (기본값)
• baseline: 아이템들을 텍스트 기준선(baseline)에 맞춰 정렬 

-끝-

CSS Vendor Prefixes(공급업체 접두사)는 구글,마이크로소프프와 같은 브라우저를 공급하는 회사에서 최신 기술이나 실험적으로 제공하는 기술들을 표준 기술들과 구분하기 위해서 사용하는 접두사

즉, 각 브라우저가 최신 기능을 어떻게 구현하는지 확인하기 위해 접두사를 사용하고, 나중에 해당 기능이 표준화되면 접두사 없이도 사용할 수 있게 됨 

• -webkit-: Google Chrome, Safari, iOS Safari, Android 브라우저, Microsoft Edge (Chromium 기반)
• -moz-: Mozilla Firefox
• -o-: Opera
• -ms-: Microsoft Internet Explorer (Edge는 Chromium 기반 이후 WebKit 사용)

css에서 정말 자주 사용하는 flex!

오늘은 flex 속성 1편!

조금 헷갈리는 flex-basis, flex-grow, flex-shrink 속성의 개념 정리하기

flex-basis

flex-basis는 flex 아이템의 기본 크기를 설정

이 크기는 아이템의 내용물에 상관없이 설정할 수 있으며, width나 height와 유사하게 작동합니다.

초기값(default value)은 auto

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

flex-grow

flex-grow는 flex 컨테이너 내에서 여유 공간을 어떻게 나눌지를 결정하는 속성

값이 클수록 해당 아이템이 더 많은 공간을 차지. 초기값(default value)은 0

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

flex-shrink

flex-grow와 반대로,  flex-shrink는 flex 컨테이너가 작아질 때 아이템이 어떻게 축소될지를 결정하는 속성

값이 클수록 해당 아이템이 더 많이 축소. 초기값(default value)은 1

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

- 끝 -