WEB/HTML, CSS

CSS flex와 grid

explorer999 2024. 3. 29. 14:35

FLEX

 

플렉스 박스 레이아웃(CSS Flexible Box Layout)

  • 반응형 웹을 위한 유연한 레이아웃을 만들기 위해서 사용한다.
  • flex를 사용하기 위해서 필요한 것은 정렬하기 위한 <item> 태그들과 그 부모에 해당하는 <contatiner> 역할 태그.’
  1. container는 말 그대로 뭔가 담는 공간이다.
    • display: flex
      • 플렉스 적용 시작
    • flex-direction:
      • row라고 하면 수평 정방향(이게 기본값), row-reverse라고 하면 수평 역방향
      • flex-direction: column이라고 하면 수직 정방향, column-reverse라고 하면 수직 정방향
    • flex-wrap: 컨테이너가 아이템들을 한 줄에 못 담을 정도로 작아졌을 때 줄바꿈을 할 건지?
      • 기본값은 nowarp(줄바꿈 안 함). flex-wrap: wrap 이렇게 하면 줄 바꿈.
    • flex-flow: flex-direction, flex-wrap을 한꺼번에 지정함. 순서대로 한 칸씩 떼고 쓰면 됨.
    • justify-content(메인 축에 대해 수직 방향)
      • flex-start: 왼쪽부터 정렬
      • flex-end: 오른쪽부터 정렬
      • space-between: 화면 크기에 맞게 열 간격 조절
      • center: 중앙으로 모이게
      • space-around: 적당히 띄우기? 잘 모르겠음.
    • align-items (메인 축에 대해 수평 방향)
      • center: 중앙으로
      • baseline: baseline에 맞게
      • stretch: 늘려서
      • flex-start: 시작점에 맞춰서
      • flex-end: 끝점에 맞춰서
    • align-content
      • space-between이라는 게 있는데 행간을 띄워줌.
  2. container에 부여해야 하는 속성은 다음과 같다.
  3. item에 부여해야 하는 속성:
  • order : 아이템들 간의 순서 정하기(order: 여기 오는 숫자가 작을 수록 위or왼쪽에 위치)
  • flex-grow : 창의 크기에 맞추기(item전체에 1 지정하면 모든 아이템이 같은 크기로 맞춰짐.
.item{background-color: tomato;
color:white;
border: 1px solid white;
flex-grow:1;
}
.item:nth-child(1){
flex-grow:2;

이런 경우에는 2번째 아이템이 
나머지 모든 아이템의 2배 크기로 공간을 채움
  • flex-shrink: 창을 줄일 때 줄어드는 정도(비율로 움직일 수 있어서 grow랑 비슷하게 동작)
  • flex-basis: 기본 크기
  • align-self: align-items 속성값대로가 아니라 특정 아이템의 정렬을 따로 정하고 싶을 때 씀.
  • flex- holy grail layout페이지 크기가 줄어들면 nav, aside는 그대로인데 main만 줄어드는 것이 특징이다.
  • nav, aside{ flex-basis: 150px; flex-shrink:0; } 구현 중 일부. 나머지는 깃허브에 있음.
  • 위쪽에 header, 왼쪽에 nav 목록, 중앙에 main, 오른쪽에 광고 등 aside, 맨 밑에 footer영역으로 구성된 레이아웃.

 

 

 

grid

  • flex 이후에 등장한 css 레이아웃 만드는 시스템으로 더 복잡한 표현 가능.
  • flex는 한 방향으로만 레이아웃을 만들지만, grid는 가로 세로 2차원으로 레이아웃을 만들 수 있음.
  • grid 만들 때에도 flex처럼 container, item이 필요하다.
  • 그리드 용어 정리
    • grid container
    <div class="container"> 
</div> 

이 영역 전체를 grid container라고 한다.
    • grid item
    <div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>

이거 각각이 gid item
    • grid track: grid의 행 또는 열
    • grid cell: grid 한 칸을 가리킴. 아이템 하나가 들어가는 칸.
    • grid line: grid cell을 구분하는 선
    • grid number: grid line의 각 번호(행, 열 따로)
    • grid gap: grid cell 사이의 간격
    • grid area: grid line으로 둘러싸인 사각형 영역(==grid cell의 집합)
  1. container에 부여해야 하는 속성
    • disply: grid;
      • 그리드 만들기를 시작
    • grid-template-rows, grid-template-columns
      • 그리드 트랙의 크기를 지정함. (행, 열 각각)
      • fr= 비율을 말하고, px=고정값을 말함.
      • repeat(5, lfr)은 1fr 1fr 1fr 1fr 1fr 과 같다.
      • minmax(100px, auto)는 최소한 100px, 최대는 자동으로 늘어나게 한다는 뜻.
      • auto-fill:
        • 예를 들어서 grid-template-columns: repeat(auto-fill, minmax(20%, auto)라고 지정하면 20%씩 차지해야 되니까 자동으로 한 행에 5개의 셀이 들어간다. 만약 셀이 4개라면 4개가 20%씩 차지하고, 남은 20%는 비워둔다.
      • auto-fit:
        • 같은 경우에 autofit은 4개의 셀만으로도 남는 공간을 채운다.
      • row-gap, column-gap, gap
        • grid cell 사이의 간격을 설정한다. 10px, 20px이렇게
      • grid-auto-columns, grid-row-columns
        • row나 column의 개수를 미리 알 수 없을 때. 알아서 설정되도록 함.
        .container {
			grid-template-rows: repeat(3, minmax(100px, auto));
			
이렇게 써야 할 거를

.container {
			grid-auto-rows: minmax(100px, auto);

이렇게 써도 결과가 같다.
    • grid-template-areas
      • 직관적으로, 각 셀이 어떤 영역에 해당하는지 이름 붙여주는 방법이다. 셀 구분은 공백으로 한다. 빈 칸으로 두고 싶으면 마침표 또는 none사용.
      • container { grid-template-areas: "header header header" " a main b " " . . . " "footer footer footer"; } 그리고 해당 item 요소 안에 grid-area 속성으로 각 영역의 이름을 연결해 줌. ex) .header { grid-area: header; }
    • align-items(세로축 방향으로 정렬) / justify-items(가로축 방향으로 정렬) / place-items( 속성값을 가로축, 세로축에 모두 적용)
      • align-items: stretch, start, center, end; 이런 식으로 씀
    • align-contet: item들 모두 합한 높이가 container 높이보다 작을 때. 아이템을 통째로 정렬함.place-content: 가로 세로 같이 정렬
    • 속성값 예시: .container { justify-content: stretch; /* justify-content: start; */ /* justify-content: center; */ /* justify-content: end; */ /* justify-content: space-between; */ /* justify-content: space-around; */ /* justify-content: space-evenly; */ }
    • justify-content: item들 모두 합한 너비가 grid 너비보다 작을 때. 아이템들을 통째로 정렬함.
  2. item에 부여해야 하는 속성
    • grid-column-start, grid-column-end, grid-coluimn
      • start: 그리드 시작, end: 그리드 끝
      • grid-column: 1/3 이렇게 쓰면 start=1, end=3이라는 뜻.
      • start, end가 아닌 몇 개의 셀을 차지하게 할 건지로 지정한다면, “grid-column: 1(에서 시작) / span 2(2칸을 차지함)” 이라는 뜻.
    • grid-row-start, gid-row-end, grid-row
    • align-self, justify-self, place-self: 개별 item 세로, 가로 정렬
    • order: item 시각적 배치 순서. 숫자가 작을 수록 왼쪽 위.
    order 사용 예시:

.item:nth-child(1) { order: 3; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 2; }
  • z-index: 화면에서 앞으로 보내고 뒤로 보내는 z축 정렬. 숫자가 클수록 다른 item들보다 위로 올라온다.
    • z-index의 기본값은 0이므로 1로 설정하면 가장 앞으로 올라옴.