[패스트캠퍼스] 국비지원 13일차 학습일지

1. flex container 말고 flex items 설정하기

flex는 container와 items로 나눌 수 있는데, 앞에서 한 내용은 flex container에 css를 적용하는 방법이다.

오늘은 container items에 적용할 수 있는 css에 대하여 배웠다.

 

• order : 숫자가 작을 수록 먼저 들어오기.  (html 조작 없이 위치 변경이 가능하다.)
• flex-grow : 증가 너비 비율 (기본값이 0이다. 증가 비율 없음을 의미한다.)
• flex-shrink : 감소 너비 비율 (기본값이 1이다. 감소 비율 없음을 의미한다.)
• flex-basis : 공간 배분 전 기본 너비

 

가장 많이 사용하는 방법은 flex-basis를 0으로 맞추고, flex-grow로 너비 비율을 맞추면 된다. flex-basis를 0으로 맞추면 content 너비와 관계없이 비율 맞출 수 있다.

 

 

flex-grow	flex-shrink	flex-basis
증가 너비 비율 기본값 0 (증가 비율이 없다.)	감소 너비 비율 기본값 1 (감소 비율이 없다.)	공간 배분 전 기본 너비 가장 많이 사용하는 방법은 content 너비를 무시하도록 flex-basis를 0으로 설정하고, flex-grow로 비율을 맞추면 된다.

 

 

2. 전환 Transition

전과 후 사이에 효과를 지정하는 방법이다. transition-duration은 필수 속성이다. 시간이 2개가 나와있으면 transition-duration이고 그 다음이 transition-delay이다.

 

• transition : 단축속성
• transition-property : 속성 이름
• transition-duration : 지속 시간
• transition-timing-function : 타이밍 함수, 구글에 easing functions나 tweenmax easing을 검색하면 더 많은 함수들을 볼 수 있다.
• transition-delay : 대기 시간

 

 

3. 변환 Transform

• 2D 변환함수 : translate, scale, skew, rotate
• 3D 변환함수 : rotateX, rotateY, perspective ++ backface-visibility

 

3D 변환함수를 이용할 때에 perspective를 설정하여 3D처럼 보이도록 해야 한다. 그런데 3D를 적용하고자 하는 부모에 perspective 함수를 적용하는 것을 더 권장한다. (perspective 적용 안 하면 입체감 X.)

 

backface-visibility : 3D 변환에서 뒷면 보이는지 여부 결정하는 속성이다.  기본값이 visible이다.

flip 요소 제작하는 경우에 많이 이용된다.