아직 6일차인데 머리에 들어간 지식은 무진장 방대하다. 종찬쌤은 ... CSS에 미친자(님)이 맞다 ...
나도 ... CSS에 미친자(님)의 자랑스러운 제자가 되어보겠다 ! 오늘도 열심히 복습 가보자고 ~
본격적인 flex 들어가기 전 ... 마음의 다짐을 하는 느낌으로다가 ~ 짜투리 지식을 먼저 털어본다.

---

vertical-align

    .box {
      display: inline-block; 
      width: 100px; 
      height: 100px; 
      line-height: 100px; 
      background: #ccc
    }

inline-block 요소인 박스 3개가 있다. 동일한 css가 적용되었는데, 수직 정렬이 다른 것을 볼 수 있다. 둘의 차이점은 무엇일까? 차이점을 만든 것은 바로 vertical-align이다 !

vertical-align은 inline-block 요소의 수직 정렬 기준이라고 할 수 있다. initial value는 baseline인데, 1번 박스의 텍스트(컨텐츠)가 사라지자 옆의 박스의 텍스트가 적힌 baseline을 기준으로 상자가 수직 이동한 것이다. 이것은 inline-block으로 취급되는(삽입된 이미지의 너비, 높이가 적용되기 때문에) 이미지 요소도 적용된다.

그래서 이전 직장의 reset.css에는 img { vertical-align: top; } 코드가 포함되어 있었다. 위의 회색 상자처럼 위로 돌출되는 것보단, top을 기준으로 정렬되는 것이 스타일을 잡기 수월하기 때문이었다 ! 이제야 맞춰지는 퍼즐 ~ vertical-align에는 초기값인 baseline을 제외한 여러 값이 존재한다. 아래 이미지를 통해 느낌 ~ 잡아보시라 ~

---

letter-spacing - 가운데 정렬

letter-spacing 값을 많이 주다보면 위의 사진과 같은 상황이 발생한다. 마지막 글자인 '보' 옆에도 letter-spacing 값만큼 여백이 생기기는 것이다. 이 상황을 쉽게 해결할 수 있는 방법은 text-indent를 활용하는 방법이다. 이 방법은 눈대중이 아닌, 정확히 가운데 정렬을 할 수 있는 방법이다. 다음에 사용해봐야겠다 !

    p {
      letter-spacing: 3em;
      text-indent: 3em;
    }

3em만큼 큰 값의 letter-spacing을 주지 않았어서, 그동안 letter-spacing을 사용하면 가운데 정렬이 되지 않는다는 걸 몰랐다 ... (ㅎ) 예전에 디자이너분이 가운데 정렬 아닌 것 같다고 하셨었는데 ... text-align: center이기 때문에 절대 그럴리가 없다 ! 컴퓨터가 계산해서 가운데 놔준거다 ! 라고 자신있게 말했던 나, 잠시 쥐구멍쓰 ~ 날 ,, 의심하자 !!!

---

flex

결국 등장하고 말아버린 플 ~ 렉스 ! 오늘 flex의 전체를 다룰 것은 아니다. 차근 차근 나아가보자고 !

1. flexbox 동작 방식 이해

요소가 inline 인지, inline-block인지, block 인지의 여부와 상관없이 ! 뭐든지 다 수평 정렬을 만들 수 있는 마법의 코드가 있다던데 .. ? 바로 flex이다. display:flex를 사용하면, 직계 자식은 block level의 요소처럼 동작하며 Flexbox 모델에 따라 내용이 배치된다. containing block의 종속되는 block 요소도, 텍스트의 성격을 띄어 스타일링이 맘처럼 잘 안되는 inline도 flexbox 안에선 맘대로 조종할 수 있다.

레이아웃 정도는 눈 감고도 척척 만드는 멋진 프엔이 되기 위해 'flexbox를 조종하는 흑마법사' 가보자고 ! (유키스를 조종하는 흑마법사라는 밈이 있습니다요 ...)

사용 방법

flex는 정렬을 희망하는 요소의 부모에게 설정한다. 이때 ! 조금 있어보이게 ~ 용어를 정리해보면 아래와 같다. 오늘 중점으로 다룰 내용은 부모가 아닌 flex Item, 즉 자식에게 설정할 수 있는 flex 프로퍼티이다. 잘 따라와보시라고 ~

• 부모 Flex Container
• 자식 Flex Item

.parent { display:flex } 
.child { ... } 

2. flex-basis | flex-grow | flex-shrink

이 세가지 프로퍼티는 위에서 말했던것 처럼, flex item에 사용하는 프로퍼티이다. display:flex를 부여한 부모(flex container)에 아무리 때려봐야 절대 적용이 안되니 참고 ! (경험담) 부모에 사용할 수 없다는 뜻은 결국 축약 ? 그런거 없다. flex item에 직접 값을 부여해야 하니 그것도 참고 !

• flex-basis flex item의 기본 크기 설정
• flex-grow flex container의 가용 여백을 어떤 비율로 item에 늘릴지 설정
• flex-shrink flex item이 줄어드는 비율 설정

flex-basis

• 역할 : flex item의 기본 크기 설정
• initial value : auto
• 적용 가능한 값 : auto, content, fit-content, max-content, min-content, px

flex-basis는 아이템의 기본 크기를 설정한다. 이게 아래 나오는 grow와 조금 헷갈릴 수 있는데, 적용 가능한 값을 보면 조금 더 감을 잡을 수 있다. 적용 가능한 값을 보면 width 프로퍼티에 사용할 수 있는 값들이 나열되어 있다. 사용 가능한 여백을 비율대로 늘리는 flex-grow와 다르게, flex-basis는 여백과 상관없이! 아이템의 기본 너비를 설정한다.

기본 값이 auto이기 때문에, flex item에 아무 프로퍼티를 추가하지 않으면 컨텐츠만큼만 너비를 확보한다.flex-basis를 통해 할 수 있는 작업은, 해당 박스의 고정 크기(px)을 부여하거나 내부 컨텐츠와 관련된 크기를 설정(fit-content, max-content 등)할 수 있는 방법이 다다. 노란색 여백 없이 박스를 늘리려면 flex-grow 프로퍼티가 필요하다.

flex-grow

• 역할 : flex container의 가용 여백을 어떤 비율로 item에 늘릴지 설정
• initial value : 0
• 적용 가능한 값 : number

flex-grow는 flex item에 여백을 어떤 비율로 늘릴지를 설정한다. flex-grow가 설정된 flex item의 너비는, 컨텐츠 크기 + (가용공간/n)이라고 할 수 있다.

이때, 같은 비율의 flex-grow를 설정한다고 해서, 무조건 같은 너비의 flex item이 되는 것은 아닌 것을 유의해야 한다. flex item이 가지고 있는 컨텐츠 크기에 1/n된 여백이 추가되는 것이다 ~ !

아래 이미지는 flex-grow: 1을 설정한 모습이다. flex-grow를 설정하지 않았을 때 마지막 박스 옆에 존재했던 노란색 여백이 모두 사라졌다. (박스 사이 여백은 gap으로 의도한 것임)

.box { flex-grow: 1; } 

flex-grow 비율을 flex item마다 다르게 주면 아래와 같은 모습이 된다. 기존의 1:1:1의 비율로 여백을 나눠서 더해졌던 박스 너비가, 1:5:1의 비율로 나눠진 여백이 늘어나 적용된 걸 확인할 수 있다.

.box { flex-grow: 1; } 
.box:nth-child(2) { flex-grow: 5; } 

flex-basis와 flex-grow의 활용

실무에서 아무리 px로 너비를 지정해도, 지 크기(갓희님 계좌주세요)를 차지하지 못하고 배려가 철철 넘치는 애들을 보며 내 속이 터졌던 기억이 떠올랐다 ... 아래와 같은 경우를 예로 들 수 있다.

좌측 flex item은 사이드바/헤더의 역할을 하기 때문에 너비가 줄어들거나 변하면 안된다. 그렇기 때문에 기본 크기를 설정하는 flex-basis: 260px을 부여했다. 우측 flex item은 여백 없이 자리를 꽉 차지하기 위해 flex-grow: 1을 부여했다.

그런데 결과는 아래와 같았다... 배려가 넘 넘쳐서 지 크기를 차지하지 못한 불쌍한 사이드바가 보이는가 ... ?

원인은 우측 flex item 내부의 컨텐츠(Lorem text)가 많아서 목소리가 커진 것이다. 너비가 줄어들 수 있는 여유가 있던 사이드바가 그만큼을 양보하고 말았다. 이런 현상을 방지하려면 flex-shrink 속성을 활용해야한다.

flex-shrink

• 역할 : flex item이 줄어드는 비율 설정
• initial value : 1
• 적용 가능한 값 : number

flex-shrink는 flex container보다 flex item이 많을/클 때 줄어드는 비율 설정한다. 기본값이 1이기 때문에, 작업자가 뭘 따로 설정하지 않아도 내부 컨텐츠가 넘치면 모든 flex item의 너비를 균등하게 줄인다. 그래서 ! 위와 같은 불상사가 발생한 것이다.

컨텐츠가 넘치든 말든 무조건 너비가 고정되어야 하는 flex item이 있다면, flex-shrink: 0을 설정해야 한다.

편 - 안

---

이렇게 flex를 한 1/3 쯤 ? 뿌셨다. flex ... 너 은근 어려운 척 하더니 별거 없구나 ?
ㅎ 이러고 내가 곧 질 걸 안다. ㅎ
암튼 오늘도 .. 뿌듯함 +1, 성취감 +1 .. 누구나 탐내는 멋진 프엔 가보자고 ~
!!! 틀린 부분이 있다면 피드백 적극 환영입니다 !!!