[프론트엔드스쿨] html, css 7일차

소정·2023년 12월 13일

CSS Flexbox

멋쟁이사자처럼

목록 보기

6/20

오늘도 역시나 flexbox 가보자고 ! 그 전에 쫌쫌따리 먼저 렛츠고 - !
(+) 죄송하지만 전 ... 정리하고 싶은 내용만 ... 하겠읍니다 ... ... ㅎ

background-origin

background-origin: background(이미지)를 어떤 기준으로 배치할지 정할 수 있음

요소에 background-image로 이미지를 추가할 때, 레이아웃을 고려하여 position을 설정하곤 한다.
예를 들면 ! background-image가 삽입될 요소에 padding:30px 부여되어 있다면, position을 위에서 30px, 왼쪽에서 30px을 추가로 지정해줘야 한다.

.element {
  padding: 30px;
  background-image: url(img.png);
  background-position: top 30px left 30px;
}

위의 코드에서 padding 값이 변경되면 30px로 적힌 세군데를 모두 수정해야 하는 것 ,,, (꽤 귀찬 ~)
이때 ! 사용할 수 있는 background-origin 값이다 ! 아래 3가지의 값을 설정할 수 있다.

border-box : border부터 기준으로 배경이 배치됨
padding-box : padding부터 기준으로 배경이 배치됨 초기값
content-box : content부터 기준으로 배경이 배치됨

아래 이미지에 투명도 0.1의 border: 50px dashed border, padding:50px을 설정하였다.

⬆️ border-box

⬆️ padding-box (initial value)

⬆️ content-box

그동안 transform-origin만 알았지 ...background-origin 프로퍼티를 난생 처음 알았다 ... ! 이럴수 ~ 프로퍼티를 몰랐지만, 그래도 스타일링 할 때 자연스러운 값이 초기값으로 설정되어 있었다. 바로 padding-box!

border부터 이미지가 적용된다면, 보통 투명도 없이 색상이 적용되어 있을 border에 배경 이미지가 가려질 것이다. 그래서 padding부터 이미지가 노출되는 것이 아주 자연스럽다고 생각됐다.

배경 이미지를 넣는 요소에 패딩이 부여되어 있고, 패딩값만큼 이미지가 이동해야한다면 ! 아주 간단하게 background-origin: content-box를 설정해봐야겠다 !

Flex (2)

1탄은 지난글 을 참고하시라고라 ~ [ 1탄 목록 : flex-basis, flex-grow, flex-shrink ]
생각보다 더 복잡하고 체계적이었던 flexbox ... ! 오늘 수업 내용만 이해가 돼도 당신은 CSS 세미 마스터 ~ ㅎ (되고 싶어요)

1. flex item의 min-width: auto 의미

자 어떻게 시작해야 할지 감이 안오지만 ? 우선 직진해보겠스
요기 섹션은 지난글(위의 링크 참고)에서 언급했던 flex-basis와 관련된 아주 특별한 심화수업이다.

flex-basis 값보다 콘텐츠 크기가 커질 경우

.flex-item { flex-basis: 100px; }
.flex-item img { width: 300px; }

예를 들어보자. flex item에 flex-basis를 100px 설정했다. 하지만 flex item 내부에 img가 무려 300px의 너비를 가지고 있다. 이 경우, flex item의 너비는 어떻게 될까? 300px이 된다.

콘텐츠 너비(300)만큼 flex item이 동일한 너비(300)를 차지한 모습이 자연스럽게 느껴진다. flex item에 flex-basis를 설정해도 내부 콘텐츠의 크기가 basis로 설정한 너비보다 커지면, flex item의 너비도 같이 커진다.

min-width

min-width : 최소 너비, 지정된 값보다 작아지는 것을 방지
초기값 auto (콘텐츠 너비만큼 차지)

스타일링을 하다보면 자연스러운 현상이지만 이것은 min-width:auto 라는 설정이 있기 때문에 가능한 일이다.
'flex item 내부 콘텐츠의 너비만큼은 ! 차지해줘야지 ~' 라는 의미에 min-width가 설정되어 있기 때문에 자연스럽게 이미지를 담는 상자가 늘어난 것 !

min-width와 flex-basis

하지만 종종 min-width:auto로 인해 레이아웃을 원하는대로 조종하기 어려울 때가 있다.
flex-basis를 하늘이 무너져도 100px로 맞춰야할 때가 자주 있다. 그럴땐 어떻게 할 수 있을까?

정답! min-width:0을 설정한다. 100점 ~ '내부 콘텐츠 크기만큼은 최소로 차지하고 있으렴 ~'이란 전제를 없애야만, flex-basis가 내 의지대로 작동할 것이다.

정리해보자면, flex item은

기본적으로 flex-basis값을 따라간다.
컨텐츠가 basis로 설정한 너비보다 크다면, min-width:auto로 인해 컨텐츠 너비가 설정된다.
min-width:0을 설정하여 강제로 flex-basis만큼만 차지하게 할 수 있다.

flex-basis를 활용하여 '고정-가변' 레이아웃 설정하기

고정 레이아웃 : flex-basis: 200px flex-shrink: 0
가변 레이아웃 : flex-basis: auto flex-shrink: 1
고정 레이아웃 : flex-basis: 200px flex-shrink: 1
가변 레이아웃 : flex-basis: 0 flex-grow: 1 flex-shrink: 1

두가지 방법 모두 우선, 고정을 희망하는 flex item에 flex-basis 값을 입력한다.

1번 방법은 고정 flex item에 프로퍼티를 설정한다.
아무리 가변 레이아웃이 자리가 필요하다고 소리 질러도 고정 레이아웃은 귀마개를 낄 수 있다.
사실상 가변 레이아웃에는 기본값이 적용된 것이라, 고정 레이아웃에만 값 2개를 추가하면 된다.

2번 방법은 가변 flex item에 프로퍼티를 설정하는 것이다.
flex-basis: 0 를 설정하여 item의 너비를 컨텐츠 만큼만 차지하도록 설정한다.
flex-grow: 1을 설정하여 가용 여백을 모두 가변 flex item에 몰빵한다.
flex-shrink: 1을 설정하여 줄이 바뀌도록 설정한다.

2번 방법을 노트할 때 가변 flex item의 줄바꿈을 위해 flex-shrink:1을 설정한다고 적었는데 ...
직접 코드를 구현해보면 아무런 영향을 주지 않는다 ... 슨생님 제가 이상하게 적은걸까요,, ,, ,,,

(+) 영상 시청 후, flex-shrink:1을 통해 줄바꿈 가능 확인 !
내가 구현한 코드는 flex item > p였고 쌤이 줄바꿈을 보여준 코드는 flex item > text text text ... 라서 줄바꿈이 바로 되는 것이 아닐까 ~ 유추해본다.

질문이 있지만 ~ 그래도 암튼 끝 !

2. flex-basis와 width

끝난 줄 알았지? 당신은 flex-basis의 저주에 걸렸습니다.
댓글에 "flex-basis야 한번만 봐줘"라고 남기면 저주가 풀립니다요 ~ (대충 버럭도치 저주 밈 ~)

flex-basis를 사용할 때, min-width 개념을 숙지하고 있어야 한다는 것을 살펴보았다.
이때 ! flex-basis와 min-width까지 한꺼번에 설정이 가능한 프로퍼티가 있다. ㅇ0ㅇ !

width

width를 사용하면, min-width와 flex-basis 값이 모두 동일하게 설정된다.
아래 두개의 코드는 동일하게 동작한다. 난 더 짧은 .. width에 맘을 더 줘버렸다.

.flex-item { width: 100px; } 
.flex-item { flex-basis: 100px; min-width: 100px; }

??? : 근데 width를 사용하면 flex-grow, flex-shrink는 적용이 안되는거 아닌가욥 ㅇ.ㅇ ? ? ? ?
좋은 질문입니다. ^____^ 아니에요. width로 너비를 설정해도 flex-grow, shrink 설정이 가능합니다 !
이제 맘놓고 너비를 지정하는 일만 남은고야 ~

(+) 추가 영상 시청 후

width 설정 = min-width 동일값 설정
width로 설정된 flex item에 flex-shrink 적용 가능

위의 두 개념이 충돌된다. min-width로 분명 최소 너비를 설정했는데, shrink로 더 줄어들 수 있다니 ? ? ? ? 이것은 flex item 내부 컨텐츠 너비에 따라 결정된다.

flex item 내부 컨텐츠 너비 < width 설정값
ㄴ 내부 컨텐츠가 작아서 줄어들 가용 공간 존재함
ㄴ 내부 컨텐츠가 작다 = min-width = 내부 컨텐츠 크기 =/= width
flex item 내부 컨텐츠 너비 > width 설정값
ㄴ 내부 컨텐츠가 더 커서 줄어들 가용 공간 없음
ㄴ 내부 컨텐츠가 크다 = min-width = width

3. Main-axis, Cross-axis

본격적으로 flex item을 내 맴대로 정렬하기 위해 해당 개념을 알고 갈 필요가 있다.
아직 flex-direction을 배우지 않아서, 이게 뭔가 ~ 싶을 수 있지만 암튼 flexbox는 방향 설정이 가능하다.

⬆️ 헤로피 선생님 블로그에서 훔친 것 ... 나도 훔치러 가기

그렇기 때문에 flex-direction이 기본값인 row일 땐,
main-axis(이하 주축이라고 하겠삼)은 가로축, cross-axis(이하 교차축)는 세로축이 해당된다.
하지만 flex-direction이 column이 되는 순간, 주축 - 세로, 교차축 - 가로로 변경된다.

그렇기 때문에 ~~주축을 가로축~~, ~~교차축을 세로축~~으로 외우면 큰일난다. 무진장.
여기서 나오는 주축과 교차축의 정렬을 담당하는 것이 바로 justify-content와 align-items이다.
(위의 주축, 교차축의 개념을 숙지하면, flex-start와 flex-end 개념도 이해가 쉽다.)

4. flex item 정렬하기

justify-content : 주 축(main-axis)의 정렬 방법 설정
ㄴ 사용 가능한 값 : 초기값 flex-start | flex-end | center | space-between | space-around
align-content : 교차 축(cross-axis)의 정렬 방법 설정 (items 2줄 이상)
ㄴ 사용 가능한 값 : 초기값 stretch | flex-start | flex-end | center | space-between | space-around
align-items : 교차 축(cross-axis)의 정렬 방법 설정 (items 1줄 이하)
ㄴ 사용 가능한 값 : 초기값 stretch | flex-start | flex-end | center | baseline

flex items는 위의 3가지 방법을 이용해 웬만한 정렬을 다 할 수 있다. (특이한 경우 제외)
오늘은 우선 align-items의 initial value인 stretch 값에 대해 살펴보겠다.

(+) 예전부터 align-content의 존재를 모르고, align-items만 사용했다.
그러다보니 '왜 justify는 콘텐츠고 align은 아이템즈 라고 하냐 !!' 하는 의문이 있었는데 .. !
여러줄에 적용이 가능한 content와 한줄 전용인 items로 나뉘는게 아닐까 어림풋 짐작해본다 ..~
암튼 내가 잘 기억하면 되는거 아니겠냐구요 ~ ㅎ

align-items: stretch

stretch : Container의 교차 축을 채우기 위해 Items를 늘림

flex-direction이 row인 상황을 예로 들어보겠다.
기본값인 stretch 값으로 인해, 모든 flex item은 flex container 높이만큼 늘어나 가득 차있다.
역시 백마디 설명보다 이미지 하나가 최고 아니겠습니까? 아래 이미지를 보면 이해가 아주 잘 될 것이다 !