[temp] 12. CSS

temp.WUI·2021년 8월 1일
gridmulti-columns
0

temp

목록 보기
12/12
post-thumbnail

MULTI-COLUMNS (다단)

텍스트 다단으로 쉽게 정리

  • columns

    columns: 너비 개수;

    • column-count 단의 개수

    • column-width 단의 최적 너비

      각 단이 줄어들 수 있는 최적 너비를 설정 (최소 사이즈)해서 최적 너비보다 사이즈가 줄어들게 된다면 단의 개수가 조정된다.

  • column-rule (단축)단과 단 사이의 구분선

    column-rule: 두께 종류 색상;

    border와 같이 생각해도 됨

    • column-rule-width

    • column-rule-style

    • column-rule-color

      글자 색에 상속되어 영향을 받는데 그렇지 않게 하기 위해서 따로 색상을 지정해주어야 한다.

  • column-gap 단과 단 사이의 간격

    padding 과는 달리 rule 두께의 영향을 받지 않는다.

    column-gap: 간격; 
    값
    • normal 브라우저가 단과 단 사이의 간격을 설정 (기본 1em)
    • 단위

19 CSS 속성 - 그리드

2차원(행과 열)의 레이아웃 시스템 (flex는 1차원의 레이아웃)

GRID를 사용하면서 flex보다 복잡한 레이아웃을 잡을 수 있게 되었다.

container와 item에 사용되는 속성이 다르다. (flex와 유사한 개념)

Grid Container

  • display

    그리드를 사용하기 위한 필수 속성 → 그리드를 정의

    1. grid
    2. inline-grid

  • template-rows (h)

    명시적으로 행의 크기와 개수를 정의

    동시에 라인의 이름을 정의할 수 있습니다 (1번 라인을 이름을 지어주는 거임)

    [선이름] 100px

    중복된 이름도 가능: [시작선이름 끝선이름] 100px

    선의 이름이 중요한 경우가 아닌 이상 사용하지 않느낟.

    repeat(반복횟수, 100px 200px)처럼 여러 단위를 돌아가면서 반복 시킬 수도 있다.

  • template-columns (w)

    명시적으로 열의 크기와 개수를 정의

    grid-template-columns: 200px 200px

    1fr은 비율을 의미한다.;

    grid-template-columns: repeat(3,1fr); → 3번 1fr을 반복

  • grid-template-areas

    꼭 아이템 속성의 grid-area와 함께 사용해야한다.

    저장된 그리드 영역이름을 참조해 템플릿을 생성

  • grid-template (단축)

    "hrader header header" 80px

    "main main aside" 350px

    "footer footer footer" 130px

    / 2fr 100px 1fr

  • row-gap

    각 행과 행 사이의 간격을 지정 선의 크기

  • column-gap

→ gap (행, 열 ) : 단축속성

  • grid-auto-rows

    암시적 행의 크기를 정의합니다.

    암시적?

    만약 두행 두열로 그리드를 만들었을때

    그리드 밖에 배치가 되었을 때의 크기를 지정해 줄 수 있다.

    → 암시적 정의가 없다면 제대로 표현되지 않는다.

    1fr을 넣으면 명시적 비율과 ㅏ합쳐져서 크기가 계산된다.

    자동으로 늘어난 행과 열의 선은 양수만 사용가능하고 음수로 표현 할 수 없다.

  • grid-auto-flow

    흐르는 방향 제어

    배치하지 않은 아이템들이 어떤 방식으로 자동 배치 알고리즘으로 처리할 지 정의 합니다.

    • row: 수평으로 행의 축을 따라

      • 다음 순서의 요소의 크기가 빈 영역과 맞지 않다면 빈 영역을 채우지 않음

    • column: 수직으로 열의 축을 따라

    • row dense: 수평으로 빈 영역을 메움

    • column dense: 수직으로 빈 영역을 메움

  • GRID 단축

    template, auto의 단축속성

    row와 column은 / 로 구분되고 row가 먼저 표기된다.

    → auto-flow를 /를 사이를 두고 앞이면 flow-row, 뒤면 flow-column이다.

    .container {
    grid: auto-flow dense 150px / 100px 100px;
    }

    .container {
    grid: auto-flow 150px / 100px 100px;
    }

    단축 place-items: align(수직) / justify(수평)

    • align-items

    • justify-items

      content안에서 아이템을 정렬

      1. normal

      2. start

      3. end

      4. center

      5. stretch

    • align-content 열축 수직정렬

      그리드 콘텐츠의 세로 너비가 그리드 컨테이너의 세로 너비보다 작아야한다.

      1. normal (=stretch)
      2. start
      3. end
      4. center
      5. space-around: 요소의 위아래 여백들을 일정하게
      6. space-between
      7. space-evenly : 여백을 모두 동일
      8. stretch

    • justify-conrent:

      1. normal
      2. start
      3. end
      4. center
      5. space-around
      6. space-between
      7. space-evenly

Gird Item

  • grid-column

    grid-column: 1 / 3; 아이템의 크기의 열을기준으로 확장을 시킬 수 있다.
    시작점 / 끝점
    시작점 / span3 (시작에서 3개의 column차지)
    span 3만 쓰는것도 가능하지만 시작점이 명확하지 않은 상태라면 문제가 발생할 수 있다.

  • grid-row(단축)

    • grid-row-start

    • grid-row-end

      span이 staet에 존재한다면 끝 수에서 -로 / end에 존재한다면 시작에서 +

  • grid-area

area는 이름을 설정할 수도 있고

grid-row와 grid-column의 단축속성으로도 사용할 수 있다.

grid-area: r-s / c-s / r-e / c-e;

그러나 영역 이름을 설정할 경우 배치에 대한 속성은 무시되고 이름 속성만 남게 됩니다.

  • align-self

단일 그리드 아이템을 개별적인 수직 정렬

  1. start
  2. center
  3. end
  4. stretch
  • jstify-self

단일 그리드 아이템의 개별적인 수평 정렬

  1. start
  2. end
  3. center
  4. stretch
  • order

그리드 아이템이 자동 배치되는 순서를 변경

숫자가 작을수록 앞서 배치 (음수값 가능)

  • z-index 기본값 0

숫자가 클수록 앞으로 배치(음수 가능 뒤로 빠지게 됨)

position이나 그리드가 부여되어야 사용이 가능하다.

그리드 함수

  • repeat(반복되는 횟수, 어떤걸 반복할지의 크기)

  • minmax(최솟값, 최댓값)

    template,auto 속성에 사용합니다.
    repeat(4,minmax(100px,1fr)

    최솟값보다 컨테이너가 작아진다면 overflow가 발생한다.

  • fit-content(내용의 최대크기)

    아이템이 포함하는 내용에 크기를 맞춘다.

    indent? 제대로 안하면 문제 발생하는 듯

그리드 단위

  • fr (fraction) 사용 가능한 공간에 대한 비율

what is in the items!!
combine that minmax -> respondive design

  • min-content:아이템이 가질 수 있는 최소의 크기

    grid-template-columns: min-content 1fr;

    문장이라면 가장 긴 단어를 기준으로 줄어들게 된다.

    한글일 경우 (word-break: keep-all)로 바꿔야지 단어 기준으로 쪼개질 수 있다.

  • max-content: 아이템(내용 content)이 가질 수 있는 최대한의 크기
    필요한 만큼 커진다. 

    grid-temaplate-columns: repeat(5,minmax(max-content,1fr)); ->글자가 두개로 나뉘거나 깨지지 않는다.
grid-temaplate-columns: repeat(auto-fit,minmax(40px,max-dontent));

  • auto-fill : 아이템을 수용하고 남은 공간이 있을 때 발생했을 때 남는 공간을 유지하고→ 최대값이 사용이 안되 는 거 아닌ㄴ가.

    가능한 범위 안에서 가능한 많은 column을 만들어 준다

  • auto-fit: 남는 공간을 채운다. 공간이 존재하더라도 무시하고 가지고 있는 요소들로 채운다.

grid-template: repeat(auto-fill, ,,,)
repeat함수랑 함게 사용된다.

컨텐츠의 크기가 컨테이너의 크기보다 커져서 overflow가 되었을 때 사용할 수 있다.

repeat(auto-fill,minmax(120px,1fr)

아이템의 개수와 단위를 자동으로 맞추게된다.

두개는 거의 비슷함

profile
temp.WUI
🧩 temp repo
이전 포스트

[temp] 11. CSS

0개의 댓글