🔍 CSS 레이아웃
📌 float
한 요소가 보통 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소에 좌우측에 배치 되게 하는 것
left: 왼쪽으로right: 오른쪽으로none: 기본값
clear: float 해제
⚠️ 자식 요소들이 모두 float 속성을 가지게되면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않는 것에 주의
< 해결 방법 >
1. 부모에게 높이 값 지정
2. overflow:hidden 사용
3. clear-fix
.container::after{
content:'';
display:block;
clear:left;
}📌 flex
자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 방법
주로 1차원적 레이아웃을 위해 주로 사용
- 부모 요소 : flex-container
- 자식 요소 : flex-item
📍 flex-item에 사용하는 속성
· flex-direction
컨테이너 내 아이템을 배치할 때 주축 및 방향 지정
row(기본값) : 왼쪽에서 오른쪽 (행)column: 위에서 아래 (열)row-reverse: 오른쪽에서 왼쪽column-reverse: 아래쪽에서 위쪽
· justify-content
주축을 기준으로 배열의 위치를 조절하거나 아이템 간 설정
flex-start: 시작점 정렬flex-end: 끝점 정렬center: 가운데 정렬space-between: 아이템들 사이에 균일한 간격space-around: 아이템 둘레에 균일한 간격space-evenly: 아이템 사이와 양 끝에 균일한 간격
· align-items
수직축을 기준으로 배열의 위치를 조절하거나 아이템 간 설정
stretch(기본값) : 수직축 방향으로 끝까지 늘어남flex-start: 시작점 정렬flex-end: 끝점 정렬center: 가운데 정렬baseline: 베이스라인 기준으로 정렬
· align-content
flex-wrap: wrap;이 설정된 상태에서 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향을 결정하는 속성
· flex-wrap
컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성
nowrap(기본값) : 줄바꿈을 하지않고 넘치면 그냥 삐져나옴wrap: 줄바꿈 함wrap-reverse: 줄바꿈 하지만 역순 배치
· flex-flow
flex-direction과 flex-wrap을 한번에 지정할 수 있는 단축 속성
· gap
아이템 사이의 간격 설정할 때 사용
📍 flex-item에 사용하는 속성
· flex-basis
flex-item의 초기 크기 설정
row일 경우 width값, column일 경우 height
· flex-grow
아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도 지정
flex-grow에 들어가는 숫자 -> flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가짐
/* 예시로 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }
· flex-shrink
아이템의 크기를 고정하거나 축소할 때 사용
값으로0사용시 줄어들지 않음
· align-self
부모의 align-items 속성을 덮어 flex-item에게 개별적인 align-items 속성을 부여합니다.
· order
아이템들의 순서를 수의 크기로 결정
수가 작을수록 더 높은 우선순위를 받음
음수도 사용 가능
flex 단축속성
flex: [flex-grow] [flex-shrink] [flex-basis];📌 gird
자식 요소들이 컨테이너 안 공간을 맞추기 위해 크기를 키우거나 줄이는 방법을 설정
웹페이지를 위한 2차원 레이아웃 시스템
- 부모 요소 : grid-container
- 자식 요소 : grid-item
📍 grid-container에 사용하는 속성
· grid-template-columns
열방향 그리드 트랙의 사이즈 설정
· grid-template-rows
행방향 그리드 트랙의 사이즈 설정
💡 새로운 단위 fr
grid 컨테이너 안에서 트랙의 비율을 지정해주는 유연한 길이 단위
ex ) 1fr 1fr 1fr -> 1:1:1
· 함수
- repeat() : grid-track 사이즈를 좀 더 간단한 형태로 표현하도록 도와줌
.container {
display: grid;
width: 300px;
height: 300px;
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 2fr 1fr;
}- **minmax()** : 그리드에서 최소와 최대 사위의 범위 설정
· auto-fill & auto-fit
repeat 함수 사용시, 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움
auto-fill: 채우고 남은 빈공간 남김auto-fit: 채우고 남은 빈공간을 각 셀들이 나눠 가짐
· gap
· align-content
그리드 콘텐츠의 수직 정렬
그리드 콘텐츠의 세로 높이가 그리드 컨테이너보다 작아야함
stretch, center, start, end, space-around, space-between, space-evenly
· justify-content
그리드 콘텐츠의 수평 정렬
그리드 콘텐츠의 가로 너비가 그리드 컨테이너보다 작아야함
stretch, center, start, end, space-around, space-between, space-evenly
· align-items
직계 자식에 대한 수직 정렬 모두 동일하게 적용
stretch, center, start, end
· align-items
직계 자식에 대한 수평 정렬 모두 동일하게 적용
stretch, center, start, end
📍 grid-item에 사용하는 속성
· grid-area
grid-area : [gird-row-start] / [gird-column-start] / [gird-row-end] / [gird-column-end];💡 span
행과 열을 병합할 때 사용
ex ) 1fr 1fr 1fr -> 1:1:1
· grid-template-areas / grid-area
grid-row-start: 1; /* 1 */
grid-row-end: 2; /* 3 */
grid-column-start: 1; /* 2 */
grid-column-end: 4; /* 4 */
grid-row: 1/2;
grid-column: 1/4;
grid-area: 1/1/2/4;
grid-area: 1/1/1/span 3; · z-index
position 속성을 사용하지 않아도 화면에 보여지는 우선순위 설정 가능
· align-self
아이템 개별로 수직 정렬
stretch, center, start, end
· justify-self
아이템 개별로 수평 정렬
stretch, center, start, end
· palce-self
palce-self : [align-self] [justify-self];· order
출처: WENIV, 1분코딩
참고 글 : https://studiomeal.com/archives/197, https://studiomeal.com/archives/533
