티스토리 뷰

TIL(Today I Learn)

HTML, CSS 기본기 다지기(CSS)(6)

MinsoftK 2021. 10. 5. 12:51

6. HTML 기본기 다지기

17. Grid

  • flex 박스의 기본적인 컨셉은 1차원의 개념이다. 따라서 wrap으로 다음 줄로 넘어간 요소들에 대한 정렬을 주로 다뤘다.
  • grid의 기본 개념은 2차원으로 시작한다.
  • 하나의 그리드는 columns, rows로 구성된다. 각 행과 열 사이에 공백이 있는데, 이를 gutters, gap이라고 표현한다.
  • Table을 레이아웃에 사용하면 안된다!

17.1. grid-template-rows, grid-template-columns (Container 속성)

  • width를 설정해도 기본적으로 border 값이 알맞지 않게 나올 수 가 있는데, 이는 border 값을 가지고 있기 때문이다.
  • grid-template-row , columns를 적용한 곳에서만 css 적용이 된다.
  • 1fr 1fr 1fr로 설정을 한다면 1:1:1 비율로 공간을 나눠 가진다.
  • 2fr 1fr경우를 직접 작성해서 비교해보자.
  • grid-template-rows: repeat(4,1fr) 로도 작성할 수 있다.
  • HTML 파트
<div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
</div>
  • CSS 파트
.container {
    border: 5px dashed orange;
    display: grid;
    grid-template-columns: 100px 150px 100px;
    grid-template-rows: 100px 100px 100px;
    /* grid-template-rows: repeat(4,100px); */
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

17.2. grid-template-areas (Container 속성)

  • areas 설정할 수 있는데, 꼭 사각형을 가지도록 설정해줘야 한다.
  • 각각 class 이름을 추가해주고, 각각의 이름을 Container에서 영역을 설정 해준다. 빈 공간을 원한다면 .을 추가해서 빈 영역으로 만들어 준다.
  • HTML 파트
<div class="container">
            <div class="item header">header</div>
            <div class="item main">main</div>
            <div class="item sidebar">sidebar</div>
            <div class="item footer">footer</div>
</div>
  • CSS 파트
.container {
    border: 5px dashed orange;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3,1fr);


}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

.header {
    grid-area: hd;
}

.main {
    grid-area: ma;
}

.sidebar {
    grid-area: sb;
}

.footer {
    grid-area: ft;
}

17.3. row-gap

  • grid-row-gap이라고 현재는 사용하진 않는다. (deprecated)
.container {
    border: 5px dashed orange;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    row-gap: 20px;
    column-gap: 10rem;
    /* 단축속성으로 사용 가능 */
    /* gap: 20px 10rem; */
}

17.4. grid-auto-rows, grid-auto-columns

.container {
    border: 5px dashed orange;
    display: grid;

    /* 내부에 아이템이 있건 없건 template을 만들어 놓는다. 그런데 템플릿을 넘치게 됐을 때 
    넓이, 높이를 설정하고 싶을 때를 위해 auto 명령어를 사용한다. */
    grid-template-rows: 100px 150px 80px;
    grid-template-columns: 1fr 1fr 1fr;

    /* item이 template을 흘러 넘칠때 설정이 된다. */
    grid-auto-rows: 100px;
    grid-auto-columns: 50px;
}

17.5. grid-auto-flow

  • grid의 아이템들이 어떻게 흘러갈 것 인지에 대한 속성. row 값이 기본 값이다.
  • row는 주축 방향으로 흐르게 한다. 반대로 column일 경우엔, 교차축 방향으로 item들이 흐른다.
  • 각각 요소들에 span으로 공간을 차지하게 했을 때, 만약 크기가 grid 컨테이너에 담지 못한다면 다음 줄로 내려버린다. 그 때 dense' 명령어를 추가해주게 된다면 빈 공간에 담길 수 있는 이후 item들이 대신 들어와 담기게 된다.
  • HTML 파트
<div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
</div>
  • CSS 파트
.container {
    border: 5px dashed orange;
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: repeat(3, 1fr);

/* 교차축에 방향으로 흘러가게 됨. */
/*    grid-auto-flow: row; */

/* 차지할 수 있는 요소들이 대신 들어가게 된다. */
    grid-auto-flow: row dense;
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

/* 2칸을 차지하겠다. */
.item:nth-child(2) {
    grid-column: span 3;
}

17.6. grid (단축 속성)

  • 명시적인 표현 : grid-template-~~
  • 암시적인 표현 : grid-auto-~~
  • (명, 명), (명, 암), (암, 명) 사용이 가능하다.
.container {
    border: 5px dashed orange;
    display: grid;

    /* 
    grid-template-rows: 1fr 2fr;
    grid-template-columns: 100px 200px; */

    /* row / column (앞 뒤를 명시적으로 쓸 수 있다.) */
    /* grid: 1fr 2fr / 100px 200px; */

    /* auto-flow를 써줄 때 row에 써 넣으면 row, column에 써 넣으면 column으로 설정이 된다. */
    grid: auto-flow 1fr 2fr / 100px 200px;
}

17.7. justify-items, align-items (item 속성)

  • 남는 공간이 있어야지 사용이 가능하다. 기본 값은 stretch를 가진다.
  • Container에서 justify-items, align-items를 사용해서 각각의 요소를 컨트롤 할 수 가 있다.
.container {
    border: 5px dashed orange;
    display: grid;
    width: 100%;
    height: 500px;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);

    justify-items: center;
    align-items: end;
}

.item {
    width: 50px;
    height: 50%;
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

.item:nth-child(1) {
    width: 50px;
    height: 50px;
    justify-self: center;
    /* self를 사용하면 하나의 정렬만 바꿀 수 있다. */
    align-self: center;
}

.item:nth-child(2) {
    width: 50px;
    justify-self: end;
    align-self: start;
}

17.8. grid-row (item 속성)

  • grid-row-start, grid-row-end에 대한 내용.
  • 몇번째 선인지에 대한 내용을 확인해야 한다.
  • 명시적으로 선언한 grid에만 선에 번호가 붙는다.
  • 1부터 -1까지로 지정하면 처음부터 끝까지라는 의미가 된다.

  • HTML 파트
<div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
</div>
  • CSS 파트
.container {
    border: 5px dashed orange;
    display: grid;
    width: 100%;
    height: 500px;

    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
}

.item {
    background-color: paleturquoise;
    border: 3px solid blue;
    font-size: 30px;
}

.item:nth-child(1) {
    background-color: coral;

    grid-row-start: 1;
    grid-row-end: -1;
    /* grid: 1 / -1 */
    /* grid: 1 / span 2  -> 1부터 2칸을 차지  */
}

17.9. grid-areas (item 속성)

  • 한 요소에서 단축 속성을 이용해서 다음과 같이 영역을 설정할 수 있다.
.item:first-child{
    grid-row: 4 / span 2;
    grid-column: 2 / -1;

    /* row-start, col-start, row-end, col-end */
    grid-area: 4 / 2 / span2 / -1;
}

17.10. order (item 속성)

  • order가 같을 경우에는 코드 순서가 먼저인 것을 앞으로 꺼내 준다.
  • 기본 값은 0이다.
.item:nth-child(5) {
    order: -1;
}
.item:nth-child(3) {
    order: -1;
}

17.11. z-index (item 속성)

  • flexbox에서 쓰던 것과 유사하다. (12.6 참고-HTML 기본기 다지기(5))

17.12. Grid 단위 (fr, min-content, max-content)

  • fraction : col은 100px을 차지하고 나머지를 전부 1:1로 나눠가진다. 다른 단위와도 혼합해서 사용할 수 있다.
.container {
    border: 5px dashed orange;

    display: grid;
    grid-template-rows: repeat(3, 200px);
    /* grid-template-columns: 100px 1fr 1fr; */

    /* min-content vs max-content */
    /* min : 쪼개진 단어보다 작아질 수가 없는 크기만큼 */
    /* max : 한줄에 볼 수 있는 형태까지 늘린다. */
    grid-template-columns: min-content 1fr 1fr;
}

17.13. Grid 단위 - auto-fill, auto-fit

  • grid-auto-rows, gird-template-rows 사용점의 차이? (아래 코드에서)
  • auto-fill, auto-fit이 남은 공간을 채워주는 동작은 똑같다. auto-fill은 화면을 줄이거나 키울때 100px보다 작게 되면은 1fr으로 나눠가진다. 하지만 100px이 들어갈 공간이 생기게 되면, 요소가 col에 하나 추가 된다. 즉, 100px 기준으로 요소가 채워지고 1fr 유지하다가 또 100px이 채워지거나 빠졌을 때, 다시 1fr로 설정이 된다.
  • auto-fit 같은 경우 아이템 수가 적어졌을 때, 그리드에서 남는 공간이 생긴다. 이 남는 공간을 채워주고 싶을 때 사용한다.
  • 남는 공간을 어떻게 활용할지의 차이가 있다.
  • auto-fill
.container {
    border: 5px dashed orange;

    display: grid;
    /* 화면이 줄어들거나 늘어날 때 자동으로 채워준다. */
    grid-template-columns: repeat(auto-fill, 100px);
    /* grid-template-columns: repeat(auto-fill, minmax 100px, 1fr); */

    /* 암시적으로 auto-fill로 새로 row가 생겨도 크기를 똑같이 지정해준다. */
    grid-auto-rows: 50px;
}
  • auto-fit
.container {
    border: 5px dashed orange;

    display: grid;
    /* 화면이 줄어들거나 늘어날 때 자동으로 채워준다. */
    grid-template-columns: repeat(auto-fit, 100px);
    /* grid-template-columns: repeat(auto-fill, minmax 100px, 1fr); */

    /* 암시적으로 auto-fill로 새로 row가 생겨도 크기를 똑같이 지정해준다. */
    grid-auto-rows: 50px;
}
728x90
반응형
저작자표시 비영리

'TIL(Today I Learn)' 카테고리의 다른 글

[JS] 프로토타입이란?  (0) 2021.12.06
Pollyfill이란? Babel이란?  (2) 2021.11.07
Git 기본기 다지기  (0) 2021.10.01
HTML, CSS 기본기 다지기(CSS)(5)  (0) 2021.09.29
HTML, CSS 기본기 다지기(CSS)(4)  (0) 2021.09.29