flex box / vh(단위)
자식 엘리먼트엔 어떤 것도 적지 않는다.
즉, 부모 엘리먼트에만 명시한다. 그 시작은 부모 엘리먼트에 display값으로 flex;를 주는 게 시작.
이제 자식들을 컨트롤할 수 있으니 간단한 속성 2가지를 살펴보자.
1) justify-content 이 속성의 디폴트 값은 flex-start 이러한 속성들은 모든 계산을 알아서 해주기에, 화면 크기를 작게 하거나 크게 하건 그에 맞춰 엘리먼트들이 움직인다.
다시 말해, 자식 엘리먼트는 건들지 않으면서 얘들을 움직이고 있다는 것이 핵심.
여기서 주의할 점은 justify-content를 적용하면 눈에 보이는 이미지는 '수평'으로 작동한다고 생각할 수도 있으나,
착각이다. 뭔 소리여? 구글에 'CSS flexbox main axis cross axis' 검색!
위의 그림이 flexbox에서의 축들의 디폴트 값.
주축은 수평이고 교차축은 수직인데, 이 justify-content가 주축에 적용되는 속성이지. 그래서 말할 때 주의할 점은,
justify-content는 '수평'이 아니라 '주축'에 적용되는 속성이라고 해야 하는 것이여.
2) align-items
얘는 반대로 교차축에 적용되는 속성. 즉, 교차축의 디폴트 값은 '수직'
아까 전부터 계속 디폴트 값을 강조하는 이유는 block태그를 inline방식으로 바꿀 수 있는 것처럼, 주축을 수직으로 바꿀 수 있기에 그러는 것이여.
3) 자~! 이제 flex-direction 속성에 대해 알아보자. 내가 계속 위에서부터 주축이 수직이 될 수도, 교차축이 수평이 될 수도 있다고 했제? 그걸 바꾸는 속성이 바로 이 놈이여! 근데 일단 중요한 게 있어. 부모 엘리먼트에 display 값으로 flex;를 선언하면 flex-direction을 건들지 않아도 디폴트 값인 'row'를 기준으로 적용이 돼. 이게 뭔 소리냐? 즉, 주축과 교차축이 각각 수평과 수직에 적용되는 기준이 디폴트 값이다. 이 말이여!
그니까! flex-direction 값을 column으로 바꿔버리면! 아까 말했듯, 주축의 기준이 수직이 되고 교차축의 기준의 수평이 된다! 이 말이여! 알간? 재밌지? 직접 해봐. 그래야 알지 뭐 어차피 까먹을텐데 적어만 놓자고
또 다른 속성 중엔 4) flex-wrap이란 애가 있어. 얘도 flex-direction의 디폴트 값처럼 따로 설정하지 않아도 기본적으로 엘리먼트들에게 nowrap이란 디폴트 값이 설정되어 있지. 얘의 값을 wrap으로 설정해주면! 화면의 크기에 따라 엘리먼트들이 들어갈 수 있을 만큼만 보여지게 되고 나머진 다음 줄로 넘기게 하는 속성이야! 뭐 이런 게 있다~ 이 정도면 하고 끝내. (디폴트인 nowrap일 경우, 엘리먼트들에 설정된 width나 height 값을 뭉개서라도 한 줄로 표시하게 되지! 이 돼지야!)
※ vh(viewport height)란 단위.
ex) 100vh : 100 screen height라고 생각혀(viewport == screen) 즉, 화면 높이의 100%를 의미한다.