멋쟁이사자처럼 프론트엔드스쿨 2기 TIL (4월 14일)

🔖LikeLion_FrontEndSchool_TIL 4월 14일 (목)

이호준 강사님 강의

CSS

Flex

컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성 집합으로 주로 1차원 형태의 요소들을 배치할 때 편리하다.

  1. flex-basis

    flex 아이템의 기본 크기를 설정하는 요소.
    flex-direction에 따라 설정되는 크기가 달라진다. (row일 때는 너비 col일 때는 높이)

    .item {
      flex-basis: auto; /* 기본값 */
      /* flex-basis: 0; */
      /* flex-basis: 50%; */
      /* flex-basis: 300px; */
      /* flex-basis: 10rem; */
      /* flex-basis: content; */
    }
  2. flex-grow

    flex 아이템이 flex-basis 값보다 커질 수 있는지를 결정하는 속성으로 0보다 큰 값이 지정되면 해당 아이템이 flexible box로 변해 원래 크기보다 커지면서 빈 공간을 채운다.

    .item {
      flex-grow: 1; /* 빈공간을 채우게 됨 */
      /* flex-grow: 0; */ /* 기본값 */
    }

    각 자식요소들에게 값을 일일이 부여해 비율로 빈 공간을 채우는 것이 가능하다.

  3. flex-shrink

    flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis 값보다 작아질 수 있는지를 결정하는 속성이다. 0보다 큰 값이 지정되면 해당 아이템이 flexible box로 변해 원래 크기보다 작아지게 된다. (default value가 1이라 따로 설정할 필요는 없다.)

    .item {
      flex-basis: 150px;
      flex-shrink: 1; /* 기본값 */
    }

    각 자식요소들에게 값을 일일이 부여해 부모요소의 공간에 따라 줄어드는 속도를 조절하는 것이 가능하다.

  4. order

    flex item들의 순서를 결정하는 요소로 수가 작을 수록 더 앞에 위치하게 된다. (default value는 0 => 0 기준으로 0보다 작으면 앞으로 크면 뒤로 위치)

Grid

컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성 집합으로 주로 2차원 배열 형태의 요소들을 배치할 때 편리하다.

  1. Grid row / column

    Grid의 행과 열 크기를 지정하는 속성

    .container {
      grid-template-columns: 200px 200px 500px;
      /* grid-template-columns: 1fr 1fr 1fr */
      /* grid-template-columns: repeat(3, 1fr) */
      /* grid-template-columns: 200px 1fr */
      /* grid-template-columns: 100px 200px auto */
    
      grid-template-rows: 200px 200px 500px;
      /* grid-template-rows: 1fr 1fr 1fr */
      /* grid-template-rows: repeat(3, 1fr) */
      /* grid-template-rows: 200px 1fr */
      /* grid-template-rows: 100px 200px auto */
    }

    repeat(), 1fr, px 와 같은 값들로 행과 열의 크기를 설정 가능하다.

  2. Gap

    Grid 트랙 간의 간격을 지정하는 속성

    .container {
      row-gap: 10px;
      /* row의 간격을 10px로 */
      column-gap: 20px;
      /* column의 간격을 20px로 */
    }

    행과 열의 간격을 각각 지정 가능하다.

  3. 각 셀의 영역 지정

    grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row 등의 속성을 활용해 각 셀의 영역을 지정(병합)할 수 있다.

    • Example

      기존 gird

      .item:nth-child(1) {
          /* 분수가 아니고, 1번부터 3번까지 공간 차지 */
          grid-column: 1 / 4;
      }

      스타일 적용 후 grid. 1번 라인부터 4번 라인 까지로 영역이 확장된 것을 확인 가능하다.

    • cf. 각 grid 트랙 기준이 아닌 선 기준임을 유의해야 한다.

좋은 웹페이지 즐겨찾기