Published 2022. 6. 21. 20:59

CSS 레이아웃

TIL/개념정리

레이아웃이란 원하는 위치에 지정한 사이즈로 배치하는 것을 말하는데 이러한 배치를 하기 위해서는 CSS에 여러 속성 중 잘 사용되는 순서로 display, position, flex, grid로 구분 할 수 있습니다

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Introduction

1. display : block과 inline, inline-block

block : 혼자 한줄을 차지하는 속성으로 다른 엘리먼트들이 들어와도 밀어내며, 줄바꿈을 발생시키게 됩니다. 그리고 상하좌우 margin과 padding 속성이 적용됩니다.

inline : CSS로 지정한 width와 height는 지정되어 있어도 무시하고 태그 안에있는 컨텐츠의 크기만큼만 CSS를 적용하게 됩니다. 또한 margin과 padding 속성은 좌우 간격만 반영이 되고 상하간격은 반영되지 않는 특징이 있습니다.

inline-block : block처럼 밀어내며 줄바꿈이 일어나지 않고, inline 속성과 같이 한줄에 배치되지만 inline에서는 적용되지 않았던 width와 height를 지정할 수 있고 padding과 margin의 상하좌우 모두 적용할 수 있다는 특징이 있습니다.
- 한줄로 정리하면 inline 속성에서 안되던 width, height, padding, margin 다 적용하지만 줄바꿈만 없음

2. 포지셔닝 box-sizing, z-index , position..

box-sizing : content-box , border-box

content-box는 컨텐츠를 기준으로 너비를 정하고 border-box는 콘텐츠 영역의 테두리(border)까지 포함해서박스 사이즈를 정하게 됩니다. 주로 border-box로 적용시키며 content-box로 할 경우 지정한 사이즈가 예상보다 커지는 경우가 발생하게 되므로 잘 사용하지 않는다고 합니다.

z-index : 상수

z-index는 겹쳐진 영역에 쌓인 순서를 제어할 수 있게 해주는 역할을 하며 주로 0이상의 상수가 클 수록 앞으로 나오게 됩니다(사용자가 먼저 보게 됨)

z-index 는 position에 영향을 받기 때문에 position 지정이 필요합니다.

position : static , relative , absolute , fixed , sticky

top, left, right , bottom으로 옮길 수 있다.

static : 단순히 HTML에 정의된 순서대로 브라우저 상에서 보여주는 것을 의미함. 기본값이다.

relative : static에서 정의된 순서대로 원래 있어야하는 위치에서 상대적으로 이동하는 것을 의미함.

absolute : 가장 가까운 부모에 위치를 기준으로 해서 정의 되는데 이 때 부모가 디폴트값인 static으로 정의되어 있다면 부모의 부모를 찾아가며 지정되어 있지 않을 경우에는 최상위 부모에 위치에 따라 결정될 수 있으니 원하는 위치에 잘 적용시키기 위해서는 부모태그에 relative 속성을 지정할 필요가 있다.

fixed : 부모와 관계없이 window 페이지 자체에 고정되며 스크롤해도 그 위치에 고정되어 있다.

sticky : fixed와는 다르게 원래 순서상 있어야 하는 위치에 있지만 스크롤해서 이동했을 때 지정한 위치에 고정됨.

3. Flexbox

flex는 css에서 상당히 자주 쓰이고 반응형으로 만들면서 flex를 사용한다면 상당히 쉽게 반응형으로 바꿔줄 수 있다.

과거엔 table , float , position을 통해 구성함.

Flex는 container 혹은 item에 따라서 사용할 수 있는 속성값들이 존재함

container에 지정하는 속성값들

display , flex-direction , flex-wrap , flex-flow , justify-content , align-items , align-content

item에 지정하는 속성값들

order , flex-grow , flex-shrink , flex ,align-self

중심축과 반대축이 존재함(수직, 수평이냐에 따라 또 달라짐)

https://studiomeal.com/archives/197

row, column에 따라 중심축이 달라진다

https://studiomeal.com/archives/197

코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>
</body>
</html>

.container {
  height : 100vh;
  background:#e1e1e1;
}

.item {
  width:40px;
  height:40px;
}

.item1{
  background:#111111
}
.item2{
  background:#222222
}
.item3{
  background:#333333
}
.item4{
  background:#444444
}
.item5{
  background:#555555
}
.item6{
  background:#666666
}
.item7{
  background:#777777
}
.item8{
  background:#888888
}
.item9{
  background:#999999
}
.item10{
  background:#ffffff
}

container

display:flex;

flex-direction:row , column , row-reverse;

flex-wrap:nowrap , wrap, wrap-reverse;

flex-flow: column nowrap; 한번에 묶어서 작성 border:1px solid black과 비슷

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

중심축에서 아이템을 배치함

align-items : baseline, center, stretch, flex-start, flex-end;

반대축에서 아이템을 배치함

flex-wrap 되어있을 때 > 2줄 이상일 때 반대축에서 아이템을 배치하는 것이다

align-content : flex-start , flex-end , center , space-around , space-evenly , space-between

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items 최근엔 지원을 잘 해줌

flex-grow : 값에 따라서 flexbox가 item보다 클 때 박스 내에서 차지하는 영역이 달라진다.

flex-shrink : grow가 여백이 있을 때 그 공간을 차지하는 비율이라면 shrink는 여백이 없을 때의 축소 되었을 때의 비율임

flex-basis : 퍼센트에 따라 항상 grow와 shrink의 값을 유지함

align-self : 각 아이템 별로 align을 지정할 수 있다. 속성은 align태그와 동일

flex 속성은 flex item의 크기와 관련된 속성이며, 다음과 같이 flex-grow 속성과 flex-shrink 속성, flex-basis 속성을 축약한 표현이라고 합니다.

flex : 1 /* flex: 1 1 0 */

flex-grow: 1; flex-shrink: 1; flex-basis: 0; 이것과 같다.

inline-flex

https://flexboxfroggy.com/#ko

https://d2.naver.com/helloworld/8540176

4. Grid

flex가 1차원적인 레이아웃 시스템이라고 한다면 grid는 2차원적인 레이아웃 시스템입니다.

https://www.w3schools.com/css/css_grid.asp

grid도 flex와 마찬가지로 container와 item 구조로 이루어져 있습니다.

https://studiomeal.com/archives/533

grid container와 item으로 나눔

3. container에 적용하는 속성들

display:grid

grid-template-columns : 80px 200px auto 40px 1fr;

grid-template-columns: repeat(5, 1fr); 같은 값을 쓰고자 할 때 굳이 5개를 적을 필요없이 repeat함수를 씀

repeat(갯수 , 각 아이템의 row, columns 크기)

여기서 fr은 전체 크기가 유동적일 때 한 아이템이 가지는 만큼 비율로 나누기 계산하기에 고정되지 않고 유동적인 속성을 갖고 나머지 px로 지정하게 된다면 고정적으로 가지게 됩니다. auto 또한 fr과 비슷한 역할을 하며

또한 minmax 함수가 있는데 minmax(최소, 최대) 값으로 작성하며 최소값만큼은 유지하고 최대값 만큼 커지는 속성값이며 min, max-width와 유사합니다.

auto-fill과 auto-fit은 repeat함수의 개수를 정하지 않아도 전체 크기에서 설정된 컨테이너의 크기만큼의 갯수로 나누어 채우는 속성값입니다. auto-fill 은 공간이 남아도 모든 item이 동일한 길이를 가지게 되지만 auto-fit은 item의 갯수가 부족해서 다 채우지 못할 때 남는 공간만큼 같은 위치에 있는 row, columns를 늘려 남는 공간을 채우게 됩니다

grid-template-rows : 80px 200px auto 40px;

몇개를 쓰냐에 따라 한 rows, column에 배치되는게 달라지게 됩니다.

grid-gap : 50px; grid-gap: 50px 100px; grid-column-gap:50px; grid-row-gap:50px

justify-content :stretch , space-around , space-evenly , space-between , start ,end
align-content :stretch space-around , space-evenly , space-between , start ,end

전체 container 크기에서 어디에 정렬되어야 할 것인지를 정함

align-items : stretch , start , center , end;
justify-items : stretch , start , center , end;

각 item들이 각자의 셀에서 어떻게 정렬되어야 할 것인지를 정함

place-items : center start; 두 개를 동시에 적용할 수 있다.

align-items justify-content의 순서입니다

2. item에 적용하는 속성들

grid-line -> grid-column-start: 1; grid-column-end: 3; line 1부터 3까지의 공간을 먹겠다

grid-row-start:3; grid-row-end:3;

간단하게도 적을 수 있는데 grid-column : 1 / 3; , grid-row 1 / 3;

혹은 grid-column : 1 / span 3; , grid-row 1 / span 3;

span은 line을 세는 것이 아닌 셀의 row, column에 따라서 결정

grid-area: 1 / 2 / 5 / 6; grid-area: 2 / 1 / span 2 / span 3; 이런 것도 있다.

마지막으로 item에 grid-area: Name을 지정한 뒤(Name은 사용자 설정) container에 가서 각 이름에 따라 배열을 할 수 있다.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
    <link rel="stylesheet" href="./grid.css">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="header">header</div>
        <div class="menu">menu</div>
        <div class="main">main</div>
        <div class="top">top</div>
        <div class="aside">aside</div>
        <div class="bottom">bottom</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>

.container {
    background-color: #e1e1e1;
    height: 100vh;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 300px 1fr 300px;
    grid-template-areas: "header header header"
                          "menu main top"
                          "menu main aside"
                          "menu main bottom"
                          "footer footer footer";
    grid-template-rows: 100px 150px 1fr 150px 100px;

}

.container div {
    background-color: mediumseagreen;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header {
    grid-area: header;
}

.menu {
    grid-area: menu;
}
.main{
    grid-area: main;
}
.top{
    grid-area: top;
}
.aside{
    grid-area: aside;
}
.bottom{
    grid-area: bottom;
}

.footer{
    grid-area: footer;
}

각 설정해둔 이름에 따라 container에서 grid-template-areas를 통해 grid를 직접 만들어 줄 수 있다.

이때 주의할 점은 각 item에서 grid-area는 ""를 쓰지 않고 작성하고 grid-template-areas 에서는 한 ““ 큰 따옴표 안에 하나의 row가 만들어지고 그 속에 각 item을 지정해주는데 각각의 row안에 있는 columns를 결정짓는 grid-area 의 갯수는 동일해야 한다

  grid-template-areas:
    'header header header header header header' //'' 하나의 row
    'menu main main right right'
    'menu footer footer footer footer footer';
    //`` 안에 있는 area의 갯수는 모두 6개로 같아야한다

'TIL > 개념정리' 카테고리의 다른 글

로그인 구현 방식 (0)	2022.06.25
Typescript (0)	2022.06.23
브라우저 저장방식 (0)	2022.06.20
Node.js , express (0)	2022.06.19
CI/CD에 관하여 (0)	2022.06.18