2024. 11. 15(금) 웹2 2일차

 

높이가 많이 들어갈 수록 코드의 방향성을 잃을 가능성이 높음

-> 높이 유연하게 주는 이유

 

 

그리드 사이즈는 중요한 역할을 함

 

 

max-width)

- 최대치

 

ex. max-width: 1440px; → 0~1440px까지 유연하게 작동

ㄴ  %처럼 유연하게 줄어들 수 있고 원하는 수치까지 적용 가능한 아주 유용한 속성!

ㄴ 0까지는 내려가지만 최대치가 1440이라 그 이상으로는 안감

 

 

 

flex-item)

- flex-shrink: 1;  →  기본값

ㄴ 기본값으로 인해 width에 고정 px이 적용되어 있어도 유연하게 줄어들고 늘어난다.

ㄴ flex-shrink: 0; → 위 특징이 사라진다.

 

flex-item은 줄바꿈 되라는 명령이 있기 전까지는 절대 줄바꿈 되지 않는다.(flex-wrap: wrap;)

ㄴ flex-wrap: noerap;(줄바꿈) / 고정형, 반응형 사이트에서 자주 사용함(유용함)

 

공통 클래스는 위에 개별 클래스는 아래에 배치에 코드 최적화를 사용한다

 

-

찾아서 바꾸기

→ 바꾸고 싶은 거 한 번에 바꾸고 싶을 때 사용 

 

 

 

transform 변형 속성)

- 비율 변형 → scale(1) = 100% = 원본 사이즈

- 위치 변형 → translatrX, translatrY, translatrZ

- 각도 변형 → rotate(deg);

 

 

-3교시

flex-direction: row)

 

- flex-item 방향

(기본값) flex-direction: row; 한줄에 같이(inline)

- column -> 한줄에 하나씩(block)

 

row- justify-content -> 가로 정렬- align-items -> 세로 정렬- flex-grow -> 가로 작동

 

 

column (resvers-> 반응형에서 많이 사용)

- justify-content -> 세로 정렬

- align-items -> 가로 정렬

- flex-grow -> 세로 작동