급격한 변화가 아닌
꾸준한 성장을 목표로

CSS

1. flex

• flex-wrap
• flex items 묶음(줄 바꿈)여부
  . nowrap 묶음 없음 (기본값)
  . wrap 여러줄로 묶음

//

• justify-content
• 주 축의 정렬 방법
  . flex-start 왼쪽정렬 (기본값)
  . flex-end 오른쪽정렬
  . center 가운데정렬

//

• align-content (여러줄)
• 교차 후 여러줄 정렬 방법(수직)
  . sthetch 시작점으로 정렬 (기본값)
  . flex-start 왼쪽
  . flex-end 오른쪽정렬
  . center 가운데정렬

//

• align-items (한줄)
• 교차 축의 한 줄 정렬 방법
  . stretch (기본값)
  . flex-start 왼쪽
  . flex-end 오른쪽정렬
  . center 가운데정렬

2. flex item 속성

• order
• 숫자를 부여해서 순서를 바꿈
  . 0 순서없음
  . 숫자가 작을 수록 우선순위

//

• flex-grow
• 증가 너비 비율
  . 0증가 비율 없음 (기본값)
  . 숫자로 증가 비율 설정

//

• flex-shrink
• 감소 너비 비율
  . flex container 너비에 따라 감소 비율 적용
  . 숫자 감소비율

//

• flex-basis
• flex item의 공간 배분 전 기본 너비
  . auto 요소의 content 너비
  . 단위 px, em, rem 등

3. 전환

• transition
• 요소의 전환 효과를 지정하는 단축속성 / 속성명 지속시간 타이밍함수 대기시간;
  . property 전환 효과를 사용 할 속성 이름을 지정
  . duration 지속 시간을 설정 ex)3s

//

• timing. function
• 전환 효과에 타이밍 함수를 지정
  . ease 느리게 빠르게 느리게 (기본값)
  . linear 일정하게
  . ease-in 느리게 빠르게
  . ease-out 빠르게 느리게
  . ease-in-out 느리게 빠르게 느리게
  . delay 전환 효과가 몇 초뒤 실행 되는지 ex) transition 1s(지속) 5s(대기)

4. 변환

• transform
• 요소에 원근법, 이동, 크기, 회전, 기울기

//

• 2d 변환함수
  . translate 이동(x, y)
  . scale 크기
  . ratate 회전
  . skew 기울임 (deg)

• 3d 변환함수
  . rotateX 회전(x)
  . rotateY 회전(y)

//

• perspective 원근법
• 하위 요소를 관찰하는 원근 거리를 지정
  . perspective : 600px 관찰 대상의 부모에게 적용
  . transform : perspective(600px) 관찰대상에게 적용 시켜야함 함수

//

• backface-visivility
• 3d 회전 된 요소의 뒷면을 숨김
  . visible 뒷면보임 (기본값)
  . hidden 숨김