CSS - 아이템 배치(float,flex,grid)

 

---

 

CSS 아이템 배치 

 

 

 

 float 

- 물 위나 공중에 둥둥 뜨다. 

- 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌/우측에 배치되게 한다. 

- 해당 요소가 보통 흐름으로부터 빠진다. 

- display 속성과 함께 사용하면 display 속성이 무시된다.

- width, height 설정이 가능하다. 

• left : 왼쪽
• right : 오른쪽
• none : 기본값 

※ 주의

- 자식 요소들이 모두 float 속성을 가지게 되면 컨테이너 요소 높이에 자식 요소들의 높이가 포함되지 않는다. 

- float으로 콘텐츠를 띄울 경우 다음 내용이 빈자리를 채우려 올라오게 된다. 

 

 * float 해제하기 

 

✏ 해결 방법 (clear-fix)

 

1. 부모 요소에 높이(height) 값을 지정한다.

- 자식들이 변화무쌍한 경우라면 적용이 어렵고 유지보수에 좋은 방법은 아니다. 

 

2. overflow:hidden 

- 일부러 박스를 벗어나게 포지션 한 요소가 숨겨지는 오류가 발생할 수도 있다. 

 

3. 부모 요소도 float을 적용한다. 

 

4. 가상요소(::after)를 사용한다. <= 권장!

- 가상 요소를 만들어 뒤(after)에 출력하면 float 값이 적용된 요소 뒤의 내용이 딸려 올라가지 않는다.

 clear 

• left : 왼쪽
• right : 오른쪽
• both : 양 쪽

.clear-fix::after{
  content:'';
  display:block;
  clear:both;
}

 

 

 

---

 

 

 flex 

💭 flex로 구성하면 뭐가 좋을까 ? 

- 유연하다. 

- 세로 정렬이 가능하다. 

- 유동형 레이아웃 구현이 가능하다. 

- 디스플레이 크기에 따라 정렬하기 쉽다. 

- 반응형 작업에 용이하다. 

※ flex를 사용하려면 꼭 부모 개념이 있어야 한다. (div, section, article)

 

 

 flex-container : 부모 요소 

 flex-item : 자식 요소 

 

 

 flex-container에 사용하는 속성 

- display에 flex 값을 적용 ( display:flex )

- 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정한다. 

- 1차원적 레이아웃 (x축 혹은 y축)을 위해 주로 사용합니다. 

※ 2차원적 레이아웃은 grid를 활용한다.

 

 

 

 * flex-direction 

- 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정한다. 

• row : 기본값 / 왼쪽에서 오른쪽 (행 방향이 주축)
• column : 위에서 아래 방향 (열 방향이 주축)
• row-reverse : 오른쪽에서 왼쪽
• column-reverse : 아래에서 위쪽

 

 

 

 * justify-content 

- 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정을 할 수 있다. 

• flex-start : 기본값 / 아이템들을 시작점으로 정렬한다. row일 때는 왼쪽, column일 때는 위쪽이다. 
• flex-end : 아이템들을 끝점으로 정렬한다. row일 때는 오른쪽, column일 때는 아래쪽이다. 
• center : 가운데로 정렬한다. 
• space-between : 아이템들 사이에 균일한 간격을 만든다.
• space-around : 아이템들 둘레에 균일한 간격을 만든다. 
• space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만든다. 

justify-content: end

justify-content: around

justify-content: between

justify-content: evenly

 

 

 

 * align-items, align-content 

• align-items : 교차 축을 기준으로 정렬한다.
• align-content : 컨테이너 교차 축의 아이템들이 여러 줄일 때 사용한다. (flex-wrap:wrap 상태에서 사용해야 한다.)

 

 

 

 * flex-wrap 

- 한 줄에 배치할 것인지, 가능한 영역 내에서 여러 줄로 표현할 것인지 결정한다. 
- wrap 값을 적용하면 width가 무시된다. 

.container {
	flex-wrap:nowarp;
 }

 

 

 * flex-flow 

- 단축 속성이다. 

-  flex-direction  |  flex-wrap 

.container {
	flex-flow: row wrap;
 }

 

 

 * gap 

- 셀과 셀 사이의 간격을 설정할 때 사용할 수 있는 속성이다. 

- 복잡한 레이아웃 안에서 마진 대신 편리하게 간격을 설정할 수 있다. 

- 인터넷 익스플로러에서 지원되지 않는다. 

.container {
	gap : 32px 24px;
  }
  
 /* 상하 gap / 좌우 gap 순으로 작성 */

 

 

 

 flex-item에 사용하는 속성 

 * flex-basis 

- flex-item의 초기 크기를 설정한다. 
- width, height와 다른 점은 축의 방향에 따라 달라진다는 것과 내부 콘텐츠에 따라 유연한 크기를 가진다는 것이다. 
- auto : 기본값 
- flex-basis 값 적용 시

• row일 경우 width 값이 무시된다.
• column일 경우 height 값이 무시된다.
  ※ 기본적으로 px이나 em 등의 단위값을 사용하며, 0 외에 다른 상수값을 사용할 수 없다. 음수 사용 불가.  

 

 

 * flex-grow 

- 아이템이 컨테이너 내부에서 늘어나 할당할 수 있는 공간의 정도를 지정한다. 
- 형제 요소인 아이템들이 모두 같은 flex-grow 값을 가지면, 내부에서 동일한 공간을 할당받는다. 

※ flex-grow: 1 => 자식 요소들이 모두 동일한 크기의 공간을 할당 받는다.

※ flex-grow: 2이상의 수 => 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 배수로 여백 공간을 할당받는다. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라진다.  

- 값 0을 적용할 경우 늘어나지 않는다. ※ 보통 flex-shrink, flex-basis 속성을 함께 사용합니다

※ 이때 flex-basis:0을 주게 되면 여백 공간이 아니라 전체 공간을 분할한다. 비율로 조절하려면 flex-basis:0 적용하기.

 

 

 

 * flex-shrink 

- 아이템의 크기를 고정하거나 축소할 때 사용한다. 
- 값 0을 적용할 경우 줄어들지 않는다.

 

 

 

 * align-self 

- 부모의 align-items 속성을 덮고 flex-item에게 개별적인 align-items 속성을 부여한다. 
- 기본값은 stretch이다. 

 

 

 

 * order 

- flex-item들의 순서를 수의 크기로 결정한다. 수가 적을수록 더 우선한다. 
- 음수도 사용 가능하다. 
※ 논리적인 마크업 순서를 위해 사용할 수 있다.

 

 

 

 * flex 

- 단축 속성이다. 
-  flex-grow | flex-shrink | flex-basis 

.item {
	flex: 1 1 100px; 
 }

 

 

 

---

 

 grid 

※ Internet Explorer를 지원하지 않는 속성이 있다. 접근성 주의! 

 

 

 

 grid-container : 부모 요소

 grid-item : 자식 요소 

 

 

 * grid-container에 사용하는 속성 

- display에 grid 값을 적용 ( display:grid )

- 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정한다. 

- 그리드 레이아웃은 웹 페이지를 위한 2차원 레이아웃(x축과 y축) 시스템이다. 

• 그리드 컨테이너 : 그리드의 가장 바깥 영역
• 그리드 아이템 : 그리드 컨테이너의 자식 요소들
• 그리드 셀 : 그리드의 한 칸 (개념적인 정의)
• 그리드 트랙 : 그리드의 행(row) 또는 열(column)
• 그리드 라인 : 그리드 셀을 구분하는 선
• 그리드 넘버 : 그리드 라인의 각 넘버
• 그리드 갭 : 그리드 셀 사이의 간격(gutter)
• 그리드 에어리어 : 그리드 셀의 집합

 

 

 * grid-template-columns 

- 열 방향 그리드 트랙의 사이즈를 설정한다.

 

 * grid-template-rows 

- 행방향 그리드 트랙의 사이즈를 설정한다.

 

※ s(복수형) 꼭 붙여야 한다! 

.container{
	display:grid;
	width:300px;
	height:300px;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 200px 100px;
}

 

 

 * 새로운 단위 fr 

- fraction : 분수 
- grid 부모 요소 안에서 트랙의 비율을 지정해 주는 유연한 길이 단위이다. 
- 1fr 1fr 1fr은 1:1:1의 비율을 의미한다.

 

 

 * grid-template-areas

- 지정된 그리드 영역 이름을 참조해 배치한다.

- 마침표나 none을 적용하면 빈 영역으로 표시할 수 있다. 

  grid-template-areas:{
    "header header header"
    "main main aside"
    "footer footer footer";
}


header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

 

 

 

 * grid 함수 

 repeat() 

- row 혹은 column 방향으로 grid-track의 사이즈를 좀 더 간단한 형태로 표현하도록 도와준다.  
- 함수에 전달하는 첫 번째 인자는 반복 횟수, 두 번째 인자는 반복할 값입니다. 

    .container {
    	grid-template-columns: repeat(3, 1fr 2fr);
    }

 minmax() 

- 그리드에서 최소와 최대 사이의 범위를 설정하는 함수이다. 

- 최소와 최댓값을 의미하는 두 가지 인자를 가진다. 
- min보다 크거나 같고, max보다 작거나 같은 크기 범위를 정한다.

 

 

 auto-fill / auto-fit 

- 만약 repeat 함수를 사용할 경우 반복되는 카운트를 고정하지 않고 켄터이너의 넓이에 따라 가능한 많은 그리드 칼럼을 배치하고 싶을 때 사용한다. 

• auto-fill : 가능한 많은 셀들을 만들어 낸다. 빈 공간이 생긴다. 
• auto-fit : 그리드 컨테이너 내부에 공간이 남을 경우 그 공간을 각 셀들이 나눠 갖는다. 빈 공간이 없다.

.autofill{
  grid-template-columns: repeat(auto-fill, minmax(100px, auto));
}

.autofit{
   grid-template-columns: repeat(auto-fit, minmax(100px, auto));
}

auto-fill

auto-fit

 * gap 

- 셀과 셀 사이의 간격을 설정할 때 사용할 수 있는 속성이다. 

- 복잡한 레이아웃 안에서 마진 대신 편리하게 간격을 설정할 수 있다. 
- grid-gap은 gap으로 사용할 수 있다. 
- 인터넷 익스플로러에서 지원되지 않는다. 

 

 

 

 

 * align-content 

- 그리드 콘텐츠의 수직(열) 정렬을 설정한다.
※ 그리드 콘텐츠의 세로 높이가 그리드 컨테이너보다 작아야한다.

• stretch :그리드 콘텐츠를 늘려서 열 축을 채운다.
• start : 시작점(위쪽)으로 정렬한다.
• end : 끝점(아래쪽)으로 정렬한다.
• center : 수직 가운데로 정렬한다. 
• space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬된다.
• space-around : 각 행 위아래에 여백을 고르게 정렬한다.
• space-evenly : 모든 여백을 고르게 정렬한다.
•  

 * justify-content 

- 그리드 콘텐츠의 수평(행) 정렬을 설정한다. 

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

• stretch :그리드 콘텐츠를 늘려서 행 축을 채운다.
• start : 시작점(왼쪽)으로 정렬한다.
• end : 끝점(오른쪽)으로 정렬한다.
• center : 수평 가운데로 정렬한다. 
• space-between : 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬된다.
• space-around : 각 열 좌우에 여백을 고르게 정렬한다.
• space-evenly : 모든 여백을 고르게 정렬한다.

 

 

 * place-content

- 단축 속성이다.

-  align-content | justify-content 

 

 

 

 * align-items 

- 직계 자식에 대한 수직(열) 정렬을 모두 동일하게 해준다. 

- 그리드 아이템의 세로 너비가 자신이 속한 행 크기보다 작아야 한다. 

• stretch :그리드 아이템을 늘려서 열 축을 채운다.
• start : 시작점(위쪽)으로 정렬한다.
• end : 끝점(아래쪽)으로 정렬한다.
• center : 수직 가운데로 정렬한다. 

 

 * justify-items 

- 직계 자식에 대한 수평(행) 정렬을 모두 동일하게 해준다. 

- 그리드 아이템의 가로 너비가 자신이 속한 열 크기보다 작아야한다.

• stretch :그리드 아이템을 늘려서 행 축을 채운다.
• start : 시작점(왼쪽)으로 정렬한다.
• end : 끝점(오른쪽)으로 정렬한다.
• center : 수평 가운데로 정렬한다. 

 

 

 

 

 grid-item에 사용하는 속성 

 * grid-area 

- 그리드 넘버로 시작점과 도착점을 지정한다. 

- 지정된 영역 이름도 사용 가능 하다. 

- 혹은 grid-template-areas가 참조할 영역 이름을 설정할 수도 있습니다.
※ 영역 이름을 설정할 경우 grid-row와 grid-column 값은 무시된다.

• stretch :
• grid-column-start : 열 시작점
• grid-column-end : 열 도착점
• grid-row-start : 행 시작점
• grid-row-end : 행 도착점
• grid-row : 1/2로 표기가능
• grid-area :  row-start  |  column-start  |  row-start  |  row-end 

✏ end값이 start와 같거나 작은 경우에는 한 칸만 차지한다. start 값은 end 값보다 커야 정상 작동된다.

 

 

 * span 

- 행과 열을 병합할 때 span 키워드를 사용한다. (셀 병합) 
- span의 사전적 의미는 '한 뼘', '~을 채우다'이다. 

 

✏ z-index 속성을 grid 안에서도 사용할 수 있다. grid 안에서는 굳이 position 속성을 사용하지 않더라도 화면에 보이는 우선순위를 설정할 수 있다. 

 

 

 

 * grid 단축 속성 

- grid-template-rows | grid-template-columns | grid-template-areas | grid-auto-rows | grid-auto-columns | grid-auto-flow 

grid: auto-flow / 1fr 1fr 1fr;

grid: auto-flow dense / 40px 40px 1fr;

 

 

 * align-self 

- 아이템 개별로 수직(열) 정렬을 설정한다.

• stretch :그리드 아이템을 늘려서 열 축을 채운다.
• start : 시작점(위쪽)으로 정렬한다.
• end : 끝점(아래쪽)으로 정렬한다.
• center : 수직 가운데로 정렬한다. 

 

 * justify-self 

- 아이템 개별로 수평(행) 정렬을 설정한다.

• stretch :그리드 아이템을 늘려서 행 축을 채운다.
• start : 시작점(왼쪽)으로 정렬한다.
• end : 끝점(오른쪽)으로 정렬한다.
• center : 수평 가운데로 정렬한다. 

 

 

 

 * place-self 

- 단축 속성이다.

-  align-self | justify-self 

 

 

 

✏ FLEXNGRID (https://flexngrid.com/)

스쿨 1 기분이 만드신 flex / gird 개념 이해에 도움이 되는 사이트! 진짜 최고다..

✏ grid 정리를 너무 잘해주신 블로그! 공부하기.. (https://heropy.blog/2019/08/17/css-grid/)

✏ grid 개념 익히기 게임 (https://cssgridgarden.com/#ko)

 

💭 1차원적으로 한 줄 배치할 때는 flex, 2줄 이상 배치할 땐 grid...를,,, 

💭 flex는 번역기 사용이나 반응형 작업에 유연하게 늘어나고 줄어들기 때문에 자주 사용된다. float은 간단하게 적용할 수 있지만 페이지 변형 시에 레이아웃이 풀리는 문제가 발생할 수 있다. grid는 아직 IE 지원 이슈 때문에 실무에서 많이 사용되진 않고 있다고 한다. 다만!!! 반응형 페이지를 작업할 때는 grid가 flex보다 쉬운 거 같다... 

 

---

 

 

 

 

 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제든지 환영입니다!