[CSS] 레이아웃 개념 정리 및 활용 예시

WOOK JONG KIM·2023년 1월 1일

html, css, javascript

목록 보기

30/48

플렉스 박스 레이아웃

1차원 레이아웃 설계를 위해 추가된 개념

구성 요소	설명
주축 (main axis)	플렉스 박스의 진행 방향과 수평한 축
교차 축(cross axis)	주축과 수직하는 축
플렉스 컨테이너(flex container)	display 속성 값으로 flex나 inline-flex가 적용된 요소
플렉스 아이템(flex item)	플렉스 컨테이너와 자식 관계를 이루는 태그 요소

플렉스 박스 레이아웃의 기본 속성

속성	설명
display	flex,inline-flex 값을 지정하면 해당 요소가 플렉스 컨테이너가 됨
flex-direction	플렉스 박스 레이아웃의 주축 방향을 지정
flex-wrap	플렉스 아이템의 자동 줄 바꿈 여부 지정
flex-flow	flex-direction과 flex-wrap

플렉스 박스 레이아웃의 정렬 속성

속성	설명
justify-content	플렉스 아이템을 모두 주축 방향으로 정렬
align-items	플렉스 아이템을 모두 교차축 방향으로 정렬
align-self	각각의 플렉스 아이템을 교차축 방향으로 정렬
align-content	플렉스 아이템이 두 줄 이상일 때 교차축 방향으로 정렬

그리드 레이아웃

구성 요소	설명
행(row)	그리드 레이아웃에서 가로줄 의미
열(column)	그리드 레이아웃에서 세로줄 의미
그리드 셀(grid cell)	행과 열이 만나서 이루어지는 하나의 공간을 의미
그리드 갭(grid gap)	그리드 셀과 그리드 셀 사이의 간격을 의미
그리드 아이템(grid item)	그리드 셀 안에 포함되는 콘텐츠 의미
그리드 라인(grid line)	그리드 행과 열을 그리는 선을 의미
그리드 넘버(grid number)	그리드 라인에 붙는 번호를 의미
그리드 컨테이너(grid container)	그리드 아이템을 묶는 부모 요소

그리드 레이아웃의 기본 속성

속성	설명
display	속성값을 grid, inline-grid로 지정하면 그리드 레이아웃을 만들 수 있음
grid-template-rows grid-template-columns	그리드 레이아웃의 행과 열을 지정함
row-gap, column-gap	그리드 셀과 셀 사이의 간격을 지정

그리드 레이아웃의 정렬 속성

속성	설명
align-items	그리드 아이템 전체를 셀의 세로 방향으로 정렬
align-self	각각의 그리드 아이템을 셀의 세로 방향으로 정렬
justify-items	그리드 아이템 전체를 셀의 가로 방향으로 정렬
justify-self	각각의 그리드 아이템을 셀의 가로 방향으로 정렬
place-item	align-items 와 justify-items 속성을 한번에 사용할 수 있는 단축 속성
place-self	align-self와 justify-self 속성을 한번에 사용할 수 있는 단축키

그리드 레이아웃의 배치 속성

속성 명	설명
grid-template-areas	그리드 레이아웃에서 행과 열을 이름으로 지정
grid-area	그리드 아이템에 이름을 지정
grid-column-start,end	그리드 레이아웃에서 열의 시작 번호와 끝 번호를 지정
grid-row-start, end	그리드 레이아웃에서 행의 시작과 끝 번호를 지정
grid-column	grid-column-start와 end 속성을 한번에 사용할 수 있는 단축키
grid-row	grid-row-start와 end 속성을 한번에 사용할 수 있는 단축키

코드 예시

내 코드

<body>
    <div class="container">
        <img src = "images/1.jpg">
        <img src = "images/2.jpg">
        <img src = "images/3.jpg">
        <img src = "images/4.jpg">
        <img src = "images/5.jpg">
        <img src = "images/6.jpg">
    </div>
</body>

*{
    margin:0px;
    padding: 0px;
    box-sizing: border-box;
}

.container{
    display: flex;
    height : 490px;
    width : 500px;
    flex-wrap :wrap;
}

img{
    height : 240px;
    width : 160px;
}

img:nth-child(2){
    margin-left : 10px;
}
img:nth-child(3n){
    margin-left : 10px;
}
img:nth-child(5n){
    margin-left : 10px;
}

img:nth-child(1){
    margin-bottom : 10px;
}
img:nth-child(2){
    margin-bottom : 10px;
}
img:nth-child(3){
    margin-bottom : 10px;
}

코드 예시

<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>flexbox</title>
  <style>    
  .flex-container{
    display:flex;
    width:500px;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  figure{
    width:calc(33% - 5px);
    font-size:0;
    margin:0;
    margin-bottom:10px;
  }
  </style>
</head>
<body>
  <div class="flex-container">
    <figure>
      <img src="./images/1.jpg" alt="sample 1">
    </figure>
    <figure>
      <img src="./images/2.jpg" alt="sample 2">
    </figure>
    <figure>
      <img src="./images/3.jpg" alt="sample 3">
    </figure>
    <figure>
      <img src="./images/4.jpg" alt="sample 4">
    </figure>
    <figure>
      <img src="./images/5.jpg" alt="sample 5">
    </figure>
    <figure>
      <img src="./images/6.jpg" alt="sample 6">
    </figure>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<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> flexbox</title>
    <style>
        .container{
            display:grid;
            width: 500px;
            margin : 0 auto;
            color:white;
            grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows : 100px 100px 100px;
            grid-gap : 10px;
        }
        .grid-item{
            width:100%;
            background-color:#ffd980;
        }
        .grid-item:nth-child(2n){
            background-color:#ffb333;
        }
        .item2{
            grid-column : 2/4;
            grid-row : 1/3;
        }
        .item3,.item5{
            grid-column : 4/6;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="grid-item item1">1</div>
        <div class="grid-item item2">2</div>
        <div class="grid-item item3">3</div>
        <div class="grid-item item4">4</div>
        <div class="grid-item item5">5</div>
        <div class="grid-item item6">6</div>
        <div class="grid-item item7">7</div>
        <div class="grid-item item8">8</div>
        <div class="grid-item item9">9</div>
        <div class="grid-item item10">10</div>
    </div>
</body>
</html>

해상도 500px이하일 때

@media (max-width:500px){
     .container{
      	width:100%;
      	grid-template-columns: repeat(3,1fr);
      	grid-template-rows: repeat(5,100px);
      }
     .item3, .item5{
        grid-column: unset;
      }
      .item10{
        grid-column : 1/4;
      }
}