[TIL] 프론트엔드 Day 30

KIKO·2022년 5월 2일
CSSFlexTILfloatgrid
0

TIL

목록 보기
15/23
post-thumbnail

📚 공부한 내용

float

  • float 속성의 해제
  1. overflow: hidden (직접적인 해결 방법이 아님)
  2. clear: both 속성 사용
  3. ::after 가상요소를 사용하자.

  • float: right 사용시 쌓이는 순서에 유의

  • float 요소는 display값이 block으로 변경된다. (flex, grid 등 일부 제외)

  • fixed는 항상 뷰포트를 기준으로 삼는 것이 아님
    (transform, perspectiv, filter 에 의해서 기준이 변경된다)

stacking context, 쌓임 맥락

  • z-index는 static position에선 동작하지 않음. 기본값은 auto (=0)

  • position: absolute, fixed는 display값을 block으로 변경한다.

flex

flex의 display 속성

  • flex : 수직으로 쌓임, width가 최대한 늘어남
  • inline-flex : 수평으로 쌓임, width가 최소한으로 줄어듦. 글자처럼 다룬다

줄바꿈

  • flex-warp: 줄바꿈 처리 관련 nowrap(기본값), wrap, wrap-reverse

flex container의 정렬 속성

  • justify-content: flex-start, flex-end, center, space-between, space-around;

  • align-items: stratch, flex-start, flex-end, center, baseline(문자 기준선 정렬)

  • align-content: 2줄 이상일 때 (flex-wrap: wrap 일 때), 교차축 정렬 방식. 기본값 stratch

flex item의 속성

  • flex-grow: 기본값 0, 컨테이너의 공간이 남을 때, item의 증가 비율을 나타냄

  • flex-shrink: 기본값 1, 줄바꿈이 없는 컨테이너의 공간이 부족할 때, 감소 비율을 나타냄.

  • flex-basis: 기본값 auto, flex item의 기본 너비를 설정함 width 보다 우선됨

  • flex: 위 3가지 속성의 단축 속성, grow shrink basis 순서로 작성하며, 띄어쓰기로 구분함. basis 값을 생략했을 때, 기본값이 아닌 0으로 설정됨.

  • order: item의 순서의 가중치를 설정함. 기본 값 0. 더 작은 값이 정렬 시작 위치에 온다. 음수도 사용 가능.

  • align-self: 아이템 별로 align-items를 개별 적용

grid

grid container

  • grid-template-rows : 각 행의 개수와 너비를 지정 (명시적)
  • grid-template-columns : 각 열의 개수와 높이를 지정 (명시적)
  • repeat(num, val) : 반복함수

    아래 두 속성은 동일하게 동작한다.
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-rows: repeat(4, 100px);

  • fr : container의 width, column을 비율로 나타내는 단위.
  • grid-auto-flow : 기본 값 row. container 안의 item들의 순서를 제어한다. 빈 공간을 자동으로 채워주는 row dense, column dense 값도 있으며, row가 기본값이므로 dense만 입력시 row dense가 적용된다.
  • grid-auto-rows, grid-auto-columns : template로 지정된 범위 밖의 row 또는 column의 크기를 지정한다. (암시적)

grid content 정렬

grid container 안의 item들을 content라고 하며 아래의 속성으로 content의 정렬 방식을 정할 수 있다.

  • justify-content: container 안의 content의 x축의 정렬 방식을 정할 수 있다. flex의 속성과 유사

    • normal(기본값) : stratch와 동일
    • start : 시작점(왼쪽) 정렬
    • end : 끝점(오른쪽) 정렬
    • center : 중앙 정렬
    • space-between : 각 열의 사이 여백을 동일한 간격으로 나누어 정렬(start와 end에 item)
    • space-around : 각 열의 양쪽 여백을 동일하게 나누어 정렬
    • space-evenly : 각 열의 사이 여백을 동일한 간격으로 나누어 정렬(start와 end에 공백)

  • align-content: content의 y축 정렬 속성. justify-content와 같은 속성값을 가진다.

grid cell 정렬

하나의 grid cell 안에 존재하는 item의 정렬 방식을 지정한다. 하나의 cell에 하나의 item만 존재하므로 content 정렬에서 사용한 space-between, space-around, space-evenly는 사용할 수 없다.

  • justify-items: x축
  • align-items: y축
    • normal(기본값)
    • start
    • end
    • center

area

  • grid-area: grid item에 적용. grid-template-areas에서 사용할 이름을 지정함.
  • grid-template-areas
grid-template-areas:
  "header header header"
  "main main aside"
  ". . aside"
  "footer footer footer";
grid-gap: 10px;
  /* .은 none으로 대체가 가능하다 */

line (gutter)

grid-gap: grid item 사이에 간격을 적용하는 속성. 단축 속성

grid-gap: 10px 는 grid-row-gap: 10px와 grid-column-gap: 10px와 동일한 속성
grid-gap: 10px 40px 는 grid-row-gap: 10px와 grid-column-gap: 40px와 동일한 속성

gap 또한 동일하게 동작하며 row-gap과 column-gap으로 나누어 사용할 수 있다. gap은 flex와 grid에서 동일하게 사용하기 위해 이후에 추가된 속성이다. 따라서 호환성에 따라 사용 여부를 결정하자.

grid item 속성

Line

grid에는 각 row와 column의 시작점과 끝점을 표시하는 line이 존재한다.

  • grid-row-start, grid-row-end : grid item의 row 방향의 시작점, 끝점을 정하는 속성. 기본적으로 시작과 끝의 차이는 1이다
  • grid-column-start, grid-column-end : grid item의 column 방향의 시작점, 끝점을 정하는 속성. row와 동일하게 시작과 끝의 차이는 기본적으로 1이다
  • grid-row : grid-row-start와 grid-row-end의 단축속성. start와 end 값을 /로 구분한다.
  • grid-column: grid-column-start와 grid-column-end의 단축 속성. 사용 방식은 grid-row와 동일하다.
  • span : 위의 속성에 사용하는 키워드, item이 차지하는 공간을 뜻한다. 기본값은 1

개별 정렬

위의 grid container에서 각 cell을 정렬하는 방식인 justify-items, align-items를 하나의 item에서 개별 적용하는 속성

  • justify-self: justify-items와 동일하게 사용. 기본 값은 justify-items와 같은 normal(stretch)
  • align-self: align-items와 동일하게 사용. 기본 값은 align-items와 같은 normal(stretch)

순서

  • order: 기본값 0, 같은 order값을 가진 element는 html의 순서대로 정렬된다. 값이 작을 수록 더 앞에 순서에 위치하며 음수로도 설정이 가능하다.
  • z-index: grid-item의 z축 쌓임 순서를 정하는 속성값

grid functions, units

grid container의 행과 열을 만들 때 사용할 수 있는 함수들

  • repeat: 값의 반복에 사용.

    아래 두 속성은 동일하게 동작한다.
    grid-template-rows: 100px 100px 100px 100px;
    grid-template-rows: repeat(4, 100px);

    다음과 같이 반복도 가능하다.
    grid-template-rows: 100px 200px 100px 200px;
    grid-template-rows: repeat(4, 100px 200px);

  • minmax: 각 행과 열의 최소, 최대 크기를 지정한다. 명시적, 암시적 속성에 모두 사용 가능

  • fit-content(max_value) : item의 크기를 content에 맞추되 최대 크기를 max_value까지 제한한다.(max_value이상으로 커지지 않는다.)

단위 (Units)

  • fr (fraction) : 사용 가능한 남은 공간을 비율로 표시함.
  • min-content
    grid item 내부에 있는 content를 기준으로 가능한 최소의 너비를 지정함.
    한글의 경우 단어의 너비(띄어쓰기)가 아닌 글자의 너비를 최소 너비로 지정하므로 이를 위해서 grid item에 word-break:keep-all 설정이 필요함.
  • max-content : grid item 내부에 있는 content를 기준으로 가능한 최대 너비를 지정함.
  • auto-fill : repeat 함수의 반복 횟수 부분에 사용. row 또는 column의 수를 자동으로 지정해줌. 지정할 수 있는 최대 너비 우선 적용 (aka. minmax)
  • auto-fit : repeat 함수의 반복 횟수 부분에 사용. row 또는 column의 수를 자동으로 지정해줌. 지정할 수 있는 최소 너비 우선 적용 (aka. minmax)
/* 아래와 같이 사용 */
grid-template-columns: repeat(auto-fit, 1fr);
grid-template-columns: repeat(auto-fill, 1fr);

📝 더 공부할 것

  • 각 CSS 속성이 필요할 때, 바로 연상할 수 있도록 복습!

🤔 느낀점

CSS의 각 속성에 대해서 꼼꼼하게 설명해주셔서 이해가 쉬우면서도 정리하고나니 양이 엄청나다. 이번 CSS 과제를 하면서 이론적으로 이해한 부분을 직접 사용하면서 익숙해질 필요가 있어보인다.

Reference

  1. 프로그래머스 프론트엔드 데브코스
profile
KIKO
개발자로 발돋움
이전 포스트

[TIL] 프론트엔드 Day 28

다음 포스트

[TIL] 프론트엔드 Day 34

0개의 댓글