멋사 프론트엔드 스쿨 5기 TIL - HTML & CSS - 3월 8일

크롱·2023년 3월 8일
0

🐯 오늘의 말씀 :
Ui 간단하게 실습을 한것을 바탕으로 포트폴리오로 만들수있당.
컨셉을 바꿔서 또다른 주제로 만들수있다.
배운것들을 응용해서 포트폴리오로 만들슈있다.


📝 display: flex;

부모 요소에 display: flex; 적용

📌 flex-container(부모)에 사용하는 속성

  • display: flex;
    flex-direction
    justify-content : 주축으로 배치
    align-items, align-content : 교차축으로 배치
    gap
    flex-wrap
  • flex-flow: 단축속성
    flex-flow: row wrap;



📌 flex-item에 사용하는 속성

  • flex-basis 주축의 크기를 정하는거같음.?
    flex-grow 비율을 정함. 할당량 지정
    flex-shrink
    align-self
    order
    flex : 단축속성
    flex: 1 1 100px; flex-grow, flex-shrink, flex-basis

🧀 flex-basis

  • flex-direction 에 대응하면서 item 요소의 크기를 지정

flex-direction: row; 시 결과 👇


🧀 flex-grow

  • 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정
  • 형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당받습니다.

👆 할당량이 1,2,1,1,1 배분됨
즉, 2번박스는 2/6, 나머지는 1/6이 할당됨.

👆 다른 아이템이 flex-grow: 0; 이고 2번박스가 flex-grow: 1 이상일때 이러한 결과가 나옵니다.



🧀 flex-shrink

flex-basis 값을 가지고 있을 때 값이 줄어드는 것

  • 아이템의 크기를 고정하거나 축소할 때 사용
  • 값을 0을 줄 경우 줄어들지 않습니다.



📝 display: grid;

https://velog.io/@kurong/CSS-Grid-%EC%8B%A4%EC%8A%B5%ED%95%B4%EB%B3%B4%EA%B8%B0
에 다시 정리했다


유용한 사이트

flex 실습게임 -> https://flexboxfroggy.com/#ko
https://flexngrid.com/

메모

007html - flex로 레이아웃 다시해보쟈
008.html 다시
010.html 다시보기.
012.html 그리드 실습.

profile
👩‍💻안녕하세요🌞

0개의 댓글