[새싹x코딩온] 웹 퍼블리싱 과정 2주차 - 3 | CSS - flex, transform, transition

Flex

Container 속성 (부모)

- 정렬을 도와준다.

- 자식 요소들이 수평으로 정렬된다.

 

flex-direction

- 주 축을 설정

• row - 행 축 (좌 => 우) (기본값)
• row-reverse - 행 축 (우 => 좌)
• column - 열 축 (위 => 아래)
• column-reverse 열 축 (아래 => 위)

 

flex-wrap

- flex items 묶을(줄 바꿈) 여부

• nowrap - 묶을(줄 바꿈) 없음 (기본값)
• wrap - 여러 줄로 묶음

 

justify-content

- 주 축의 정렬 방법

• flex-start - flex items를 시작점으로 정렬 (기본값)
• flex-end - flex items를 끝점으로 정렬
• center - flex items를 가운데 정렬
• space-between - 처음과 마지막 아이템들을 양 끝에 붙이고, 나머지영역 똑같이 나눠가짐
• space-around - 양끝 영역이 1이라면, 아이템과 아이템 사이의 영역은 2
• space-evenly - 모든 영역 공평하게 나눠 가짐

justify-content 속성

 

align-items

- 교차 축의 한 줄 정렬 방법

• stretch - flex items를 교차 축으로 늘림 (기본값)
• flex-start - flex items를 각 줄의 시작점으로 정렬
• flex-end - flex items를 각 줄의 끝점으로 정렬
• center - flex items를 각 줄의 가운데 정렬

align-items 속성

 

align-content

- 교차 축의 여러 줄 정렬 방법

• stretch - flex items를 시작점으로 정렬 (기본값)
• flex-start - flex items를 시작점으로 정렬
• flex-end - flex items를 끝점으로 정렬
• center - flex items를 가운데 정렬
• space-between - 처음과 마지막 아이템들을 양 끝에 붙이고, 나머지영역 똑같이 나눠가짐
• space-around - 양끝 영역이 1이라면, 아이템과 아이템 사이의 영역은 2
• space-evenly - 모든 영역 공평하게 나눠 가짐

align-content 속성

 

Item 속성 (자식)

order

- item들 사이의 순서를 정해서 정렬하는 방법

- 실전에서는 웹 접근성 때문에 잘 사용하지 않는다.

- 기본값이 0이고 속성값으로 작은 숫자를 가지면 먼저 정렬된다.

 

align-self

- 교차 축의 하나의 아이템 정렬 방법

• auto - container의 align-items 속성 상속 받음 (기본값)
• stretch - item을 교차 축 방향으로 늘림
• flex-start - 하나의 item을 각 줄의 시작점으로 정렬
• flex-end - 하나의 item을 각 줄의 끝점으로 정렬
• center - 하나의 item 가운데 정렬

 

flex-basis

- 컨텐츠의 크기를 고려해서 item의 기본 크기 설정

- flex-basis로 크기를 설정하게 되면 컨텐츠의 크기가 설정한 크기를 넘기면 알아서 맞추고, 더 작을 경우만 flex-basis의 크기로 결정

 

flex-grow

- item들 사이의 증가 너비 비율을 설정

- 속성 값으로 숫자를 넣어줍니다. (음수 값 불가능)

• 0 - flex-grow 효과 없음 (기본값)
• 1~ - item 증가 비율

 

flex-shrink

- item들 사이의 감소 너비 비율을 설정

- 속성 값으로 숫자를 넣어줍니다. (음수와 0 불가능)

• 1 - 속성값으로 큰 숫자를 가지면 먼저 정렬 (기본값)
• 2~ - item 감소 비율

 

Transform

- 요소의 위치, 크기, 회전, 기울기를 변경해준다.

- 원근법 이동 크기 회전 기울임 순으로 사용해야 한다.

• translate - 요소를 이동시킨다.
• scale - 요소를 확대하거나 축소한다.
• rotate - 요소를 회전시킨다.
• skew - 요소를 기울인다.

 

Perspective

- 하위 요소를 관찰하는 원근 거리를 지정한다.

- 숫자가 작아질수록 역동적으로 보인다.

- 부모 요소에 적용해야 한다.

 

Backface-visibility

• visible - 뒷면 보임 (기본값)
• hidden - 뒷면 숨김

 

Transition

- 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성이다.

transition: 속성명 지속시간(필수) 타이밍함수 대기시간;

 

transition-property

- 전환 효과를 사용할 속성 이름을 지정한다.

• all - 모든 속성에 적용 (기본값)
• 속성이름 - 전환 효과를 사용할 속성 이름 명시

 

transition-duration

- 전환 효과의 지속시간을 지정한다.

• 0s - 전환 효과 없음 (기본값)
• 시간 - 지속시간(s)을 지정

 

transition-timing-function

- 전환 효과의 타이밍 함수를 지정

• ease - 느리게-빠르게-느리게 (기본값)
• linear - 일정하게
• ease-in - 느리게-빠르게
• ease-out - 빠르게-느리게
• ease-in-out - 느리게-빠르게-느리게

 

transition-delay

- 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

• 0s - 대기시간 없음 (기본값)
• 시간 - 대기시간(s)을 지