[TIL] 2020-05-14

rakkoon23·2020년 5월 14일
0

TIL

목록 보기
6/6

CSS

  • 배경
    • 과거엔 Table 태그로 레이아웃을 잡았지만, 여러 모로 좋은 방법이 아니었음.
    • position은 지금도 많이 쓰이고 있고, 나쁘지 않은 방법임.
    • float은 배우기 어려움.
    • 이러한 상황에서 flex가 등장함.
  • flex
    • flex를 사용할 땐, 반드시 부모, 자식과 같은 두 단계의 태그가 필요함.
    <container>
    	<item></item>
        <item></item>
    </container>
    • container에 부여해야 하는 속성과 item에 부여해야 하는 속성이 따로 있다.
    • container에 부여해야 하는 속성
      • display
      • flex-direction
      • flex-wrap
      • felx-flow
      • justify-content
      • align-items
      • align-content
    • item에 부여해야 하는 속성
      • order
      • flex-grow
      • flex-shrink
      • flex-basis
      • flex
      • align-self
    • flex 사용법
      • flex를 사용한다고 했을 때, 그 출발점은 부모 요소에 display : flex를 선언하는 것부터 시작이다.
      • basis, grow, shrink
        • flex-basis : 크기를 지정
        • flex-grow : 부모 컨테이너의 flex-grow 속성의 값으로 1을 주면, 부모 컨테이너의 크기를 자식들이 균등하게 나눠가짐.
          • 만약 특정 자식 요소의 flex-grow를 부모 컨테이너에서 설정한 것보다 높게 설정하면, 해당 자식 요소만 크기가 달라짐.
        • flex-shrink : 윈도우 창을 줄이는 것에 따라 요소의 크기가 줄어들지 말지를 결정하고, 얼마나 줄어들지도 결정할 수 있음.
  • 출처
profile
모빌리티 스타트업에서 데이터를 다루고 있습니다.

0개의 댓글