CSS 속성(3)

1. Flex(정렬)

• 부모요소(Flex Container)에 display: flex; 적용 -> 자식요소(Flex Items) 수평 정렬

💥 Flex Container (부모) 속성

• display 화면 출력 특성 : flex 블록요소, inline-flex 인라인요소
• flex-direction 주 축 설정 : 기본값 row(좌->우), 우->좌 row-reverse, 상->하 column, 하->상 column-reverse
  • 주 축이 row(행ㅡ)인 경우, 교차축은 column(열ㅣ)
• flex-wrap Items 묶음(줄바꿈) 여부 : 기본값 nowrap(줄바꿈 없어 요소 꾸겨짐), 여러 줄 묶기 wrap
• justify-content 주 축(ㅡ) 정렬 방법 : 기본값 flex-start(시작점 정렬), 끝점 정렬 flex-end, 가운데 정렬 center
  • Item의 순서는 바뀌지 않음!
• align-content 교차축(ㅣ) 정렬 방법 : 기본값 stretch(시작점 정렬), 위로 붙이기(시작점 정렬) flex-start, 아래로 붙이기(끝점 정렬) flex-end, 가운데 정렬 center
  • stretch : Item에 height값 지정 없는 경우 Container에 맞취 높이 늘어남
  • flex-start, flex-end, center : 늘어남X -> 여백 발생
  • flex-wrap: wrap; 으로 줄바꿈 설정 + 줄 존재 + 정렬 가능한 여백 존재해야 작동하는 개념
• align-items 교차축(ㅣ)의 한 줄 정렬 : 기본값 stretch, 시작점 정렬 flex-start, 끝점 정렬 flex-end, 가운데 정렬 center
  • 🌟따라서 한 줄일 경우 justify-content + align-items 로 정렬

💥 Flex Items (자식) 속성

• order 순서 : 기본값 0, 숫자 작을수록 먼저 정렬
• flex-grow 증가 너비 비율 : 기본값 0(증가X), 해당 속성 값 가진 요소들끼리 해당 비율로 자리 차지
• flex-shrink 감소 너비 비율 : 기본값 1(Container 너비에 따라 감소 비율 적용), 값이 0이면 감소X -> Container 밖으로 넘칠수도
• flex-basis 공간 배분 전 기본 너비 : 기본값 auto(요소의 content 너비)
  ⭐ content 크기에 따라 전체 크기는 flew-grow(내용 제외한 양쪽 너비만 고려)에 따르지 않을 수 있음 -> flex-basis: 0; 같이 적용해 기본 너비 없애고 해당 비율 적용 가능
  

2. 전환

• 전환효과 : 전상태->후상태 중간단계를 자연스럽게 만들어주는 것
• 특히 :hover 등 가상클래스선택자 사용하는 경우
• transition 변환효과 : 속성 지속시간 타이밍 대기시간 -> 단축속성
  • transition-property 전환 효과 사용할 속성 이름 : 기본값 all
  • transition-duration (필수) 전환 효과의 지속시간 : 기본값 0s
  • 속성 별로 시간 다르게 하려면 속성 시간, 속성 시간; 형태로 입력
  • transition-timing-function 전환 효과의 타이밍(Easing) 함수 : 기본값 ease(느-빠-느), 일정 linear, 느-빠 ease-in, 빠-느 ease-out, 느-빠-느 ease-in-out
  • transition-delay 대기시간 : 기본값 0s, 전환 효과가 몇 초 뒤에 시작할지 지정, 단축속성으로 입력할 때 지속시간 뒤에 띄어쓰기로 구분해서 작성

3. 변환

• transform 변환효과 : 변환 함수를 띄어쓰기로 구분하여 작성
  🔨 2D 변환 함수
  • 이동(px) translate(x,y) translateX(x) translateY(y)
  • 크기(배수) scale(x,y)
  • 회전(deg) rotate(degree)
  • 기울임(deg) skewX(x) skewY(y)
    🔨 3D 변환 함수
  • 회전(deg) rotateX(x) rotateY(y)
    -> 원근법 같이 지정해야 효과 확실
  • 원근법(px) perspective(n)
    -> 꼭 변환함수 중 맨 앞에 작성!
• perspective 원근 거리 지정(속성)
  • 👉🏻 perspective 속성은 관찰 대상의 부모에, perspective(n) 함수는 관찰 대상에 지정 -> 바라보는 위치 차이, 속성 사용 추천
• backface-visibility 뒷면 숨김 여부 : (3D 변환으로 회전된 요소에) 기본값 visible, 숨김 hidden