2021-07-10 Part(1)_ch(8)_(18~25) 오버워치선택제작

flex container 부모요소 축 정렬

수평정렬 : 자식에게 적용하기위해 부모요소에 display:flex를 준다.
flex적용시 부모는 flex container가 되고 자식은 flex items가 된다.

flex종류 : flex와 inline-flex
flex는 기본 block 값을 가지므로 가로세로가 auto
inline-flex는 inline값을 가지므로 가로세로가 최대한 작으려고 맞춤

[flex를 준 부모요소에 적용할 값들]

1. flex-direction : 주 축을 설정
row(수평정렬) 기본값
row-reverse 행축(우-좌)
column (수직정렬)

2. flex-wrap : 줄 바꿈
no-wrap 기본값
wrap 크기를 보장하기위해 줄 바꿈

3. justify-content : 주 축 정렬 방법 (수평)
flex-start 기본값
flex-end 플렉스 컨테이너 끝을 기준으로 오른쪽으로 밀어버림
flex-center 가운데로 배치함

4. align-content 교차축의 여러줄(한꺼번에) 정렬(수직)
flex-start 맨위가 시작 기준으로
flex-end 아래가 시작 기준으로
center 중간이 기준
조건 1: wrap으로 되어야하며 부모에게 여백이있어야하며 자식이 2줄이상이어야함.

5. align-items 교차축 한줄 정렬(수직)
flex-start 맨위가 시작 기준으로
flex-end 아래가 시작 기준으로
center 중간이 기준

 

─────────────────────────────────────────────────────

 

[flex item 자식요소]

order 순서 1 2 3
0 기본값 숫자가 작을수록 먼저

flex-grow 증가 너비 비율
0 기본값 숫자가 증가비율

flex-shrink 감소 너비 비율
1 기본값 숫자가 증가비율

flex-basis 공간 배분전 기본너비설정
auto 콘텐트너비기본값
0 기본너비가 없음

─────────────────────────────────────────────────────

전환 transition

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

transition-property : 속성이름
transition-duration : 지속시간(필수)

transition-timing-function : 타이밍함수
값
ease 느리게-빠르게-느리게
linear 일정하게
ease-in 느리게-빠르게
ease-out 빠르게-느리게
ease-in-out 느리게-빠르게-느리게

transition-delay : 대기 시간 지정

 

2D,3D 변환함수

transform : 변환함수1 변환함수2 변환함수3;
transform: 원근법 이동 크기 회전 기울임;

[2d변환함수]
translate(x,y) 이동
translateX(x) 이동
translateY(y) 이동

scale(x,y) 크기배로증가

rotate(degree)회전 // rotate(14deg) 14도회전

skewX(x) x축기울임
skewY(y) y축기울임


[3d변환함수]
rotateX(x) 회전x축 *perspective 랑 같이 써야함
rotateY(y) 회전x축  *perspective 랑 같이 써야함

perspective(n) 원근(거리) 바라보는위치 *transfrom맨앞에 작성

perspective 원근법 기준 위치
perspective: 600px; 관찰대상의 부모 (선호)
transform: perspective(600px); 관찰대상자체

backface-visibility 뒷면 숨김 여부 (rotate로 회전시켰을때 뒷면)
visible 기본값 뒷면보임
hidden 뒷면 숨김

 

 

─────────────────────────────────────────────────────

[오버워치 만들면서 Feedback]
1. width를 잡았을때 페이지를 줄이면 요소가 잘려나가거나 덮어질때 max-width로 주어서 최대 가로 밑으로는 자유자재로 크기를 줄였다 폈다한다.

2. hover나 가상클래스를 사용하면 변화시 transform같은 값들이 기존 설정 값에서 변화한 값으로 다시 설정되므로 확인이 다시 필요하다.

3. 요소가 곂쳤을때 margin으로 공간을 줄수도 있지만 쌓임요소순위에 의한 z-index를 기본값인 0 이상으로 주어도 된다.

4. 백그라운드 이미지의 위치는 포지션으로 이동시키지 않고 transform: translate(px)로 가능하며 skewX(~deg)를 활용해 기존에 기울어짐에 +-를하여 0으로 만들어주면 다시 이미지가 기울어지지 않는다.

5. 백그라운드 이미지 포지션을 센터로 주어 가운데 맞출수있으며 굳이 포지션을 X,Y값으로 이동시킬 필요가 없다.

6. 클래스 작성을 할때 동일한 값이 반복되는것만 한 클래스에 모아쓰고 다른값들이 들어가는것은 개별적으로 클래스를 생성한다.

7. 100vh란 뷰포트의 100%가 세로길이가 된다.