6일차

CSS 속성 나머지 공부하기
주말이지만 평일보다 못한 공부량 반성!

---

CSS 속성

15. 플렉스 (정렬) Container

수평정렬 할때 display: flex 사용

display

• Flex Container의 화면 출력(보여짐) 특성
• Flex : 블럭 요소와 같이 Flex Container 정의
• inline-flex : 인라인 요소와 같이 Flex Container 정의
  display : flex;
  flex container는 수직으로 쌓임 (블록요소)
  
  

flex-direction

flex-direction

• 주 축을 설정 Main-axis
• row 행 축 (좌 ->우)
• row-reverse 행축 ( 우 -> 좌)
• column 열 축 (위 -> 아래)
• column-reverse 열축 (아래 ->위)
  row 수평 column 수직
  
  

flex-wrap

• flex Items 묶음(줄 바꿈) 여부
• nowrap : 묶음(줄 바꿈 없음) 기본값
• wrap : 여러 줄로 묶음
• wrap-reverse : wrap의 반대 방향으로 묶음

만약 칸이 모자르고 한줄에서 보여짐으로 처리될때 사용하면 줄바꿈처리하여 보여진다

justify-content

• 주 축의 정렬 방법
• flex-start Flex Items를 시작점으로 정렬✔ (왼쪽정렬 수평정렬시)
• flex-end : Flex Items를 끝점으로 정렬 ✔ (오른쪽정렬 수평정렬시)
• center : Flex Items를 가운데 정렬 ✔ (가운데정렬 수평정렬시)
• space-between 각 Flex Item 사이를 균등하게 정렬
• space-around 각 Flex Item의 외부 여백을 균등하게 정렬
  
  

align-content

• 교차 축의 여러 줄 정렬 방법
• stretch Flex Items를 시작점으로 정렬
• flex-start Flex Items를 시작점으로 정렬
• flex-end Flex Items를 끝점으로 정렬
• center Flex Items를 가운데 정렬
• space-between 각 Flex Item 사이를 균등하게 정렬
• space-around 각 Flex Item의 외부 여백을 균등하게 정렬

사용조건
1. 두줄 이상이어야함(wrap)
2. 정렬이 가능한 여백이 있어야함

조건이 까다롭기때문에 사용많이 안함
여러줄 동작 / 한줄만 있을때 X

align-items

• 교차 축의 한 줄 정렬 방법
• stretch Flex Items를 교차 축으로 늘림
• flex-start Flex Items를 각 줄의 시작점으로 정렬
• flex-end Flex Items를 각 줄의 끝점으로 정렬
• center Flex Items를 각 줄의 가운데 정렬
• baseline Flex Items를 각 줄의 문자 기준선에 정렬
  한줄만 있을때 사용가능
  
  

16. 플렉스 (정렬) Items

order

• Flex Item의 순서
• 0 순서 없음 (기본값)
• 숫자 숫자가 작을 수록 먼저
  
  

flex-grow

• Flex Item의 증가 너비 비율
• 0 증가 비율 없음 (기본값)
• 숫자 증가 비율
  
  

flex-shrink

• Flex Item의 감소 너비 비율
• 1 Flex Container 너비에 따라 감소 비율 적용 (기본)
• 숫자 감소 비율
• 0을 부여하면 칸이 모자라도 실제너비만큼 유지
  
  

flex-basis

• Flex Item의 공간 배분 전 기본 너비
• auto 요소의 Content 너비 (기본)
• 단위 px, em, rem 등 단위로 지정
• 0 을 부여하면 요소의 가로너비가 flex-grow의 비율에 맞춰 설정됨 (요소 컨텐츠너비 무시)
  
  

17. 전환

transition

• 요소의 전환(시작과 끝) 효과를 지정하는 단축속성
• transition : 속성명 지속시간(필수) 타이밍함수 대기시간;

transition-property

• 전환 효과를 사용할 속성 이름을 지정
• all 모든 속성에 적용 (기본)
• 속성이름 전환 효과를 사용할 특정속성 이름 명시
  ex) transition: width 1s;

transition-duration

• 전환 효과의 지속시간을 지정
• 0s 전환 효과 없음
• 시간 지속시간(s)을 지정
  ex) transition:
  width .5s,
  background-color 2s;
  

transition-timing-function

• 전환 효과의 타이밍(Easing)함수를 지정
• ease 느리게-빠르게-느리게 = cubic-bezier(0.25, 0.1, 0.25,1)
• linear 일정하게 = cubic-bezier(0, 0, 1, 1)
• ease-in 느리게-빠르게 = cubic-bezier(0.42, 0, 1, 1)
• ease-out 빠르게-느리게 = cubic-bezier(0, 0, 0.58, 1)
• ease-in-out 느리게-빠르게-느리게 = cubic-bezier(0.42, 0, 0.58, 1)
• cubic-bezier(n,n,n,n) = 자신만의 값을 정의(0~1)
• steps(n) = n번 분할된 애니메이션
  구글검색 easing functions , easing functions mdn , tweenmax easing

transition-delay

• 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
• 0s 대기시간 없음
• 시간 대기시간(s)을 지정
  transition: 1s .5s; 0.5초 대기시간
  
  

18. 변환

transform

• 요소의 변환효과
• transform: 변환함수1 변환함수2 변환함수3 ...;
• transform: 원근법 이동 크기 회전 기울임;

2D 변환 함수

px
translate(x, y) 이동(x축, y축) ✔
translateX(x) 이동(x축) ✔
translateY(y) 이동(y축) ✔
scale(x, y) 크기(x축, y축) ✔
scaleX(x) 크기(x축)
scaleY(y) 크기(y축)

deg
rotate(degree) 회전(각도) ✔
skew(x, y) 기울임(x축, y축)
skewX(x) 기울임(x축) ✔
skewY(y) 기울임(y축) ✔
matrix(n,n,n,n,n,) 2차원 변환 효과

3D 변환 함수

px
translateZ(z) 이동(z축)
translate3d(x,y,z) 이동(x축, y축, z축)
scaleZ(x) 크기(z축)
scale3d(x,y,z) 크기(x축, y축, z축)
perspective(n) 원근법(거리) ✔
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) 3차원 변환 효과

deg
rotateX(x) 회전(x축) ✔
rotateY(y) 회전(y축) ✔
rotateZ(z) 회전(z축)
rotate3d(x, y, z, a) 회전(x축, y축, z축, 각도)

transform: translate(40px, 40px);
transform: translateX(40px);
transform: scale(1.5); 배수

transform: rotate(45deg); 회전

transform: perspective(500px) rotateX(45deg);
⭐원근법 함수는 제일앞에!

perspective

• 하위 요소를 관찰하는 원근 거리를 지정 (속성)
• 단위 px 등 단위로 지정

backface-visibility

• 3D 변환으로 회전된 요소의 뒷면 숨김 여부
• visible 뒷면 보임 (기본)
• hidden 뒷면 숨김