1. animation
2. flex
1. animation
[ 정의 ]
- 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환 시켜준다.
- 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임(@keyframe)들로 구성되어있다.
- 트랜지션(transition)과 유사하지만, 훨씬 더 규모가 크고 복잡하며 다양한 기능을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다.
[ 속성 ]
| 속성명 | 설명 |
| animation-name | 애니메이션의 중간상태를 지정하기 위한 이름을 정의한다. |
| animation-duration | 애니메이션의 적용 시간을 지정한다. |
| animation-direction | 애니메이션이 종료되고 진행 방향을 지정한다. |
| animation-iteration-count | 애니메이션의 반복 횟수를 지정한다. |
| animation-timing-function | 중간 상태의 전환을 어떤 시간 간격으로 진행할지 지정한다. |
| animation-delay | 애니메이션이 언제 시작 될지 지정한다. |
| animation-fill-mode | 애니메이션이 시작되기전, 끝나고 난 후 어떤 값이 적용될지 지정한다. |
[ 예제 1. 탱탱볼 만들기 ]
See the Pen animation exam1 by yhyuk (@yhyuk) on CodePen.
[ 예제 2. 60초(1분) 시계 만들기 ]
See the Pen animation exam2 by yhyuk (@yhyuk) on CodePen.
[ transition & animation 공통점, 차이점]
공통점 )
- transition 속성과 animation 속성은 플래시의 기술이나 자바스크립트의 도움 없이 요소에 직접 애니메이션 효과를 적용하는 속성이다.
차이점 )
- transition 속성은 요소의 상태가 변해야 애니메이션을 실행한다.
- animation 속성은 요소의 모양과 동작을 키프레임 단위로 변경할 수 있다. 키프레임 동작은 재생 횟수, 재상 방향등 여러 애니메이션 속성으로 제어할 수 있다.
- transition 속성은 요소의 상태가 바뀌어야 바뀌는 상태를 애니메이션으로 표현하지만, animation 속성은 요소의 상태 변화와 상관 없이 애니메이션을 실행한다. 또한 @keyframes 속성으로 프레임을 추가할 수 있다.
2. flex
[ 정의 ]
- Flexible Box, FlexBox
- 레이아웃을 만들 때 내부 요소의 배치를 지정하는 상자
- 우리가 기존에 배웠던 float + position + margin 과 유사하다.
[ 플렉스 서식 환경 구성 - display: flex ]
- 부모 요소에 display: flex; 를 설정하게 되면 그 부모 요소는 플렉스 컨테이너가 되고 자식 요소는 플렉스 아이템으로 인식하게 된다.
- 콘텐츠(플렉스 항목)를 감싸는 부모 요소에 이 속성을 꼭 지정해야 한다.
- 컨테이너 요소가 플렉스 박스가 되면 자식인 모든 플렉스 아이템들은 기본 흐름(flow)이 각각 행(row)을 기준으로 배치하게 된다.
- flexbox의 콘텐츠(플렉스 항목)은 어떤 방향에든 위치할 수 있으며, 동적으로 변경 가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다.
[ flex 속성 ]
| 속성명 | 설명 |
| flex-direction | 배치 방향을 지정한다. (기본 축, 수직 축) |
| flex-wrap | 자동 줄바꿈을 지정한다. |
| flex-flow | 축약 속성, 그룹 속성 ( flex-direction + flex-wrap ) |
| justify-content | 메인 축 방향으로 아이템을 어떻게 정렬할 지 지정한다. |
| align-items | 수직 축 방향으로 아이템을 어떻게 정렬할 지 지정한다. |
[ flex-direction ]
- 방향, 흐름, 시각적인 순서 처리
- 플렉스 항목들은 행을 기준으로 배치되며, flex-direction 속성을 통해 변경이 가능하다.
- 속성값
1) row : 왼쪽에서 오른쪽으로 나열한다. (default)
2) row-reverse : 오른쪽에서 왼쪽으로 나열한다.
3) column : 항목들을 수직으로 위쪽에서 아래쪽으로 향해 나열한다.
4) column : 항목들을 수직으로 아래쪽에서 위쪽으로 나열한다.
flex-direction은 플렉스 항목들의 흐름 방향을 전체적으로 제어하기 때문에 플렉스 항목이 아닌 플렉스 컨테이너에 지정해야한다.
그리고 float 레이아웃을 사용할 때는 변칙적인 clear 속성을 이용해 부모가 자식을 감싸주도록 하는 방법을 사용 했지만, 플렉스 박스는 컨테이너 요소에 display:flex 만 주게 되면 마치 모든 아이템에 float를 정의해 준 것처럼 배치가 되면서 굳이 불필요하게 clearfix 라는 방식을 사용하지 않아도 된다!!
[ flex-wrap ]
- 플렉스 항목들이 열을 바꾸는 방법을 제어하는 속성이다. (감쌀(wrap) 것인지 감싸지 않을 것인지 지정한다.)
- 이 값이 적용되면 항목들이 여러개의 열로 나뉘지 않고 여러 항목들이 너비를 조정해서 하나의 열 안에 모두 끼워넣어 지게 된다.
- 속성값
1) nowrap : 플렉스 항목들이 wrap 되지 않도록 지정한다. (default)
2) warp : 플렉스 항목들이 컨테이너 안에서 여러 줄로 줄바꿈을 할 수 있게 허용 한다.
3) warp-reverse : 주축은 그대로 유지하면서 교차축을 기준으로 뒤집히게 배치 된다.
[ flex 컨테이너 플로우 축(axis) ]
- 플렉스 박스를 자세히 이해하려면 축(axis)에 대해 개념을 잘 잡아야한다.
- 컨테이너 박스에서 정렬하기 위해 필요한 것으로 메인(main)축과 교차(cross)축이 있다.
- 메인축에는 시작(main axis start), 중간(center), 끝(main axis end)이 있는데 이 지점들의 이름을 flex-start, center, flex-end 라고 한다. 또한 교차축도 시작, 중간, 끝이 있는데, 동일하게 flex-start, center, flex-end라고 지정한다.
- 만약 flex-diection을 column으로 변경했을 때 차이점이 발생하는데, row 일때 교차축이 주축이 되고, 반대로 주축이 교차축으로 바뀌게 된다. ( 헷갈리지 말 것! )
- flex 등장으로 인해서 이전(float, position)보다 flex-direction과 배치(start, center, end)를 이용하면 좀 더 유연한 배치가 가능해졌으며, 이를 모던 레이아웃이라고 한다.
[ justify-content ]
- 메인(main)축에 대한 정렬을 의미한다.
- 기본 flex-direction의 값은 row라는 가정하에 동작한다. ( 왼쪽 -> 오른쪽, 위 -> 아래를 의미한다. )
- 속성값
1) flex-start : 기본값으로 플렉스 항목들을 플렉스 컨테이너의 시작 부분(왼쪽)부터 정렬한다.
2) flex-end : 플렉스 항목들을 컨테이너의 끝 부분(오른쪽)부터 시작점으로 정렬한다.
3) center : 플렉스 항목들을 컨테이너 중앙에 정렬한다.
4) space-between : 플렉스 항목 중에 첫번째 항목은 왼쪽 끝, 마지막 항목은 오른쪽 끝에 정렬하고 다음 항목들은 그 사이에 남는 공간을 일정한 간격으로 분배하여 배열한다.
5) space-around : space-between과 동일하게 적용되지만, 첫번째와 마지막 항목이 각각 왼쪽과 오른쪽의 끝으로 정렬하지 않고, 정렬된 항목들 주위로 둘러싸여(around) 골고루 분배한다.
6) space-evenly : 이 속성을 사용하면 모든 항목이 완전히 균등하게 배분할 수 있다.
[ align-content ]
- 교차(cross)축에 대한 정렬을 의미한다.
- 플렉스 아이템들에 대한 개별 하나하나의 정렬이 아닌 플렉스 아이템들을 한덩어리(그룹)로 정렬 배치하는 속성이다.
- 속성값
1) flex-start : 교차축에 대한 정렬로 컨테이너의 맨 위에서부터 덩어리로 플렉스 아이템들을 배치 시키게 된다.
2) flex-end : 교차축에 대해 컨테이너의 바닥으로 정렬한다.
3) center : 교차축에 대해 수직 방향을 기준으로 중앙 정렬된 상태가 된다.
4) space-between, space-around, space-evenly : justify-content와 동작이 같으나 교차축에 대한 정렬 배치를 한다.
5) stretch : default값으로, 컨테이너의 높이와 동일하도록 항목들의 높이를 조정한다. ( 단 플렉스 아이템 높이가 정의되어 있지 않은 경우이다. )
[ align-items ]
- 교차축에 대한 정렬을 각각의 항목들과 연관시켜서 제어, 배치 할 수 있다.
- 속성값
1) stretch : 모든 플렉스 항목들이 서로 일치(height 동일) 하도록 조정한다(default)
2) flex-start : 플렉스 항목들을 플렉스 컨테이너의 시작 부분(왼쪽)에 위치시키지만 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정된다.
3) flex-end : flex-start와 동일한 규칙이며, 플렉스 항목들을 컨테이너의 아래쪽으로 배치한다.
4) center : 각 항목의 위 아래 잔여 공간을 동일하게 분배하기 때문에 각 항목이 수직을 기준으로 중앙에 정렬한다.
5) baseline : 모든 플렉스 항목을 콘텐츠에 지정된 기준선을 중심으로 정렬한다. (기준선은 각 항목마다 다를 수 있다.)
See the Pen animation exam1 by yhyuk (@yhyuk) on CodePen.
MEMO>
# CSS를 사용할 때 유용한 아이콘 제공 사이트: https://fontawesome.com/
# CSS 수업은 오늘로 정리 됬으며, 내일부터 JavaScript를 배운다!
# JavaScript를 내일부터 배우지만, 수업이 끝나고 틈틈히 HTML, CSS 용어 정리 하면서, 못풀어본 문제 다시 풀기
도움 받은 출처 : https://webclub.tistory.com/
'교육 > CSS' 카테고리의 다른 글
| CSS 개발자 수업 58일차 - transform, transition (0) | 2021.06.20 |
|---|---|
| CSS 개발자 수업 57일차 - 가상 클래스 선택자, 속성 선택자, 전후 선택자, shadow (0) | 2021.06.20 |
| CSS 개발자 수업 56일차 (0) | 2021.06.17 |
| CSS 개발자 수업 55일차 - float, position, z-index (0) | 2021.06.17 |
| CSS 개발자 수업 54일차 - text, box, align, overflow, visibility, display, opacity (0) | 2021.06.15 |
댓글