[데브코스] 프론트엔드 엔지니어링 TIL(float, position, flex, grid)

홍건우·2023년 7월 18일

목록 보기

11/17

float

요소의 수평정렬을 위해서 많이 사용했지만 요즘은 flex를 더 많이 사용함
float: left | right | none;
float를 해제하는 방법
- float를 사용한 요소의 부모 요소에 overflow: hidden 추가 ⇒ 개연성이 없는 속성이므로 추천하지 않음
- float를 사용한 요소의 부모 요소에 다음과 같은 css를 추가
```
.clearfix::after {
	content: "",
	display: block,
	clear: both /* float: left, right를 모두 닫을 수 있음 */
}
```
  - clearfix를 사용한 요소의 안에는 float을 사용하는 자식 요소들만 존재해야함!
float은 일부 경우에 display의 값을 block으로 변경함!

position

static: html에 정의된 순서대로 브라우저 상에 보여짐
relative: 원래있어야하는 위치에서 상대적으로 이동함
absolute: 아이템과 가장 가까이 있는 컨테이너를 기준으로 위치를 이동함
fixed: 윈도우를 기준으로 위치를 이동
sticky: 원래있어야 하는 자리에 있으면서 스크롤을 해도 사라지지않고 원래 자리에 위치함

absolute 속성을 사용할 경우 구조적으로 가장 가까운 부모 요소에 relative를 추가하는 방법이 가장 관리하기 좋은 방법
자식 요소에 fixed 속성을 사용하고 부모 요소에 transform, perspective와 같은 속성들을 사용할 경우 자식 요소는 뷰포트 대신 transform, perspective 등의 속성을 사용한 부모 요소를 컨테이닝 블록으로 사용함
position의 absolute, fixed는 요소의 display 값을 block으로 변경함

Stacking Context(쌓임 맥락)

z축을 사용한 HTML 요소의 3차원 개념화
transform, opacity와 같은 속성들을 z-index를 사용하지 않고도 요소를 쌓임 맥락을 변경할 수 있음

z-index

z-index를 사용하기 위해서는 position의 static을 제외한 relative, absolute, fixed, sticky 속성을 사용해야 함. 또는 flex 아이템이나 grid 아이템도 가능

flexbox

1차원 레이아웃 구조(수직, 수평)를 작업할 때 사용함
container에 적용되는 속성값과 container속 item들에 적용되는 속성값이 있음

container 속성값

display: flex, inline-flex 모두 자식 요소(flex items)는 flex의 특성을 통해 1차원 레이아웃 구조를 가지는 정렬이 이루어지지만 컨테이너는 차이가 발생함

display: flex

block 요소의 특성과 유사함
flex가 부여된 container의 가로 넓이가 최대한 늘어나려고 함

display: inline-flex

inline 요소의 특성과 유사함
flex가 부여된 container의 가로 넓이가 최소한으로 사용됨

flex-direction

기본값은 row(왼쪽에서 오른쪽으로), main-axis를 정함

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.

row: 요소들을 가로로 정렬
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
column: 요소들을 위에서 아래로 정렬
column-reverse: 요소들을 아래에서 위로 정렬

reverse 사용 시 요소들의 start와 end의 순서도 뒤바뀐다.

Flex의 방향이 column일 경우 justify-content의 방향이 세로(y)로, align-items의 방향이 가로(x)로 바뀜

	main-axis(주축)	cross-axis(교차축)	flex-start	flex-end
column	x축	y축	컨테이너 상단	컨테이너 하단
column-reverse	x축	y축	컨테이너 하단	컨테이너 상단
row	y축	x축	컨테이너 좌측	컨테이너 우측
row-reverse	y축	x축	컨테이너 우측	컨테이너 좌측

flex-wrap

기본값은 nowrap, 페이지의 크기에 따라 item을 다음줄로 나눔

nowrap: 모든 요소들을 한 줄에 정렬
wrap: 요소들을 여러 줄에 걸쳐 정렬
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

flex-flow

direction과 wrap을 합침

flex-flow: {direction 인자} {wrap 인자}

justify-content

요소들을 가로선 상에서 정렬

flex-start: 컨테이너의 왼쪽으로 정렬
flex-end: 컨테이너의 오른쪽으로 정렬
center: 가운데 정렬
space-between: 요소들 사이에 동일한 간격을 둠
space-around: 요소들 주위에 동일한 간격을 둠

align-items

요소들을 세로선 상에서 정렬

flex-start: 요소들을 컨테이너의 꼭대기로 정렬
flex-end: 요소들을 컨테이너의 바닥으로 정렬
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
baseline: 요소들을 글자의 baseline에 맞춰 정렬
stretch: 요소들을 컨테이너에 맞도록 늘림

align-content

여러 줄 사이의 간격을 지정할 수 있음

flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
center: 여러 줄들을 세로선 상의 가운데에 정렬
space-between: 여러 줄들 사이에 동일한 간격을 둠
space-around: 여러 줄들 주위에 동일한 간격을 둠
stretch: 여러줄들을 컨테이너에 맞도록 늘림

align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는 지를 지정. 한 줄만 존재할 경우 align-content는 효과를 보이지 않음

item 속성값

order

아이템의 표시 순서를 정함
기본 값은 0이며, 양수나 음수로 바꿀 수 있음. 따라서 모든 item이 0이 기본 값이므로 하나의 item을 맨 앞으로 이동하려 할 때 음수를 사용해야함.

align-self

item별로 item을 정렬 가능하며 align-items가 사용하는 값을 인자로 받음.

flex-grow

flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언
만약 형제요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당
하지만 flex-grow 값으로 다른 값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됨

flex-shrink

컨테이너가 작아졌을때 아이템들의 크기 퍼센트를 정함
flex-shrink 속성은 플렉스박스에 "flex-wrap: wrap;" 속성을 부여한 경우 적용되지 않음
자동으로 아이템 너비가 축소되지 않도록 하려면 반드시 "flex-shrink: 0;"을 아이템에 선언해야함

flex-basis

아이템의 크기 퍼센트를 정함(컨테이너가 작아지거나 커질경우 모두 적용)
flex-basis는 Flex 아이템의 기본 크기를 설정(flex-direction이 row일 때는 너비, column일 때는 높이).
flex-basis로 설정해 준 것과 상관없이 콘텐츠 너비에 따라서 늘어남
flex-basis와 width를 동시에 적용할 경우 flex-basis가 우선순위를 갖게됨

flex 단축 속성

flex: grow, shrink, basis를 한번에 설정
flex: flex-grow flex-shrink flex-basis 순으로 작성함
flex-grow 기본 속성 = 0, flex-shrink 기본 속성 = 1, flex-basis 기본 속성 = auto
flex: 1;과 flex: 1 1 auto;는 서로 다름!
- flex: 1; ⇒ flex: 1 1 0; 과 같음(flex 단축 속성을 사용했을 때 basis 값을 생략하게 된다면 기본 값인 auto가 대입되는 것이 아닌 0이 됨!)
flex 단축 속성을 사용하기보단 flex-grow, flex-shink, flex-basis 개별 속성을 사용하는 것이 가독성이 좋음!

Grid

2차원 레이아웃 구조(row, column)를 작업할 때 사용함

Grid Container

grid-template-columns

colums의 개수와 사이즈 설정

grid-template-colums: 20% 20% 20%;

grid-template-rows

rows의 개수와 사이즈 설정

grid-template-rows: 20% 20% 20%;

columns와 rows에 %, 픽셀, em과 같은 길이 단위도 허용됨

grid-auto-rows(columns)

grid-template-rows(columns)로 만든 행과 열에 포함되지 않는 cell들의 행과 열의 크기를 암시적으로 지정할 수 있음

grid-template

grid-tempate-columns와 grid-template-rows를 조합한 단축 속성
행과 열 순으로 입력한다.
- grid-template: 50% 50% / 200px; → 각각 50%인 두개의 행과 200px인 한개의 열의 그리드 생성

grid-auto-flow

grid의 기본 축을 정의하는 속성
기본 값: row
dense를 사용해서 빈 공간을 매울 수 있음
- row dense (row 생략 가능)
- column dense

justify-content

row축에 Grid content를 제외한 빈공간이 있는 경우에 사용할 수 있음
row축을 기준으로 Grid content를 정렬함
속성
- normal: 기본 값으로 행 축을 기준으로 Grid content를 최대한 늘림 ⇒ stretch와 동일
- start: row축의 시작점에 정렬
- center: row축의 가운데에 정렬
- end: row축의 끝점에 정렬
- space-between: 시작열과 마지막열은 start와 end에 붙고 나머지 열은 여백을 균등하게 분배해서 정렬
- space-around: 각 열의 왼쪽과 오른쪽의 여백을 균등하게 분배해서 정렬
- space-evenly: row축의 여백을 모든 열에 균등하게 분배함

align-content

column축에 Grid content를 제외한 빈공간이 있는 경우에 사용할 수 있음
column축을 기준으로 Grid content를 정렬함
속성은 justify-content와 동일

justify-items / align-items

각각의 cell 영역에 빈 공간이 있을 때 사용 가능
normal(stretch), start, center, end 속성이 존재함

grid-template-areas

grid-area의 이름은 원하는 이름으로 변경 가능
마침표(.) 대신 none도 가능

스크린샷 2023-07-17 오후 5.51.13.png

grid-gap

grid-column-gap은 열 사이의 간격(Line 또는 Gutter), grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있다.
하위 호환성을 원한다면 grid 키워드를 붙이고 통합성을 생각한다면 grid 키워드를 뺄 수 있음(gap, column-gap, row-gap)
- grid-column-gap
  - grid-column-gap: 20px;
- grid-row-gap
  - grid-row-gap: 20px;
- grid-gap: 행, 열 순으로 입력
  - grid-gap: 20px 10px;
  - grid-gap: 10px;

grid cell(items)

grid-column-start / grid-row-start

그리드 요소의 시작 열/행 위치를 지정
음수로도 지정이 가능하며 음수는 그리드의 오른쪽을 기준으로 사용
- grid-column-start: ;
그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, span을 이용하여 열/행의 넓이를 지정할 수 있음(양수만 가능)
- grid-column-end: span ;

grid-column-end / grid-row-end

grid-column-start 단독으로 사용될 때는, 한개의 그리드 열/행을 나타내지만 grid-column-end 속성을 같이 사용하면 여러 열에 걸쳐 확장이 가능
음수로도 지정이 가능하며 음수는 그리드의 오른쪽을 기준으로 사용
- grid-column-end: ;
그리드 선의 시작과 끝 위치를 기준으로 그리드 항목을 정의하는 대신, span을 이용하여 열/행의 넓이를 지정할 수 있음.(양수만 가능)
- grid-column-end: span ;

스크린샷 2023-07-17 오후 6.51.18.png

grid-column / grid-row

grid-column(row)-start/end를 한 번에 설정가능, /로 구분
- grid-column(row): / ;
- grid-column(row): / span ; 도 가능

grid-area

grid-row-start, grid-column-start, grid-row-end, grid-column-end 순으로 한 번에 입력 가능, /로 구분
span 사용도 가능
- grid-area: / / /

justify-self / align-self

개별적으로 cell을 정렬할 수 있음

order

grid-area, grid-column, grid-row 등을 사용하지 않고 표시될 경우 소스코드에 기입된 순서대로 표기하는데 order 속성을 이용하면 재정의가 가능
기본은 0이며 양수, 음수 모두 가능
- order:

Grid Container Functions

grid-template-rows/columns, grid-auto-rows/columns에 사용 가능한 함수

repeat

grid-template-rows: 20% 20% 20%;를 줄여서 표현 가능

grid-template-rows: repeat(3, 20%);
100px, 200px이 반복된다면 ⇒ repeat(2, 100px 200px)

minmax

행과 열(명시적, 암시적 모두 가능)의 최소 값과 최대 값을 동시에 정의
minmax(최소 값, 최대값)

fit-content

fit-content({최대 넓이})
grid-template-colums: fit-content(300px) 100px; ⇒ 열의 너비가 최대 300px까지 될 수 있지만, fit-content가 된다면 너비가 늘어나지 않음

Grid Units

fr (fractional, 공간 비율)

각 fr 단위들은 사용가능한(빈) 공간을 하나로 공유하여 할당
예시로 두 개의 element들을 1fr과 3fr로 설정 시, 공간이 4개의 동일한 크기로 공유됨 ⇒ 첫번째 element는 사용가능한 공간의 1/4를 차지하고 두번째 element는 3/4를 차지
- grid-template-columns: 1fr 3fr;

min-content / max-content

min-content: content가 가질 수 있는 최소 넓이까지 넓이를 줄여서 표현함
- 한글은 글자 단위, 영어는 단어 단위 ⇒ word-break: keep-all; 속성을 통해 한글도 단어 단위로 줄바꿈이 일어나게 변경할 수 있음

auto-fill / auto-fit

repeat 함수와 같이 사용함
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
auto-fit: 지정할 수 있는 최대 넓이를 우선해서 적용
auto-fill: 지정할 수 있는 최소 넓이를 우선해서 적용

Transform3d

transform-origin

요소가 transform하는 기준을 변경할 수 있는 속성
transform-origin: {x축} {y축};

perspective

3차원 변환 함수에서만 적용이 됨 (ex. rotateY)
perspective({원근의 거리값})
원근의 거리값이 클수록 멀리서 보이는 효과를 가짐
함수와 속성으로 모두 사용이 가능
- 속성으로 사용하는 방법이 관리가 유리함
- 함수: 변환이 되는 아이템에 사용해야함 ⇒ transform: perspective({원근의 거리값})
- 속성: 변환이 되는 아이템의 부모 요소에 사용해야함 ⇒ perspective: {원근의 거리값}