그럼에도 불구하고

flex layout 연습을 할 수 있는 Flexbox Froggy라는 사이트를 소개해보고자 한다. https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이 사이트에는 flex layout에 대한 각종 연습을 할 수 있다! justify-content, align-items, align-self, align-content, flex-direcion, order 등을 이용하여 단계별로 개구리를 배치하면 된다. 한국어로 번역해서도 볼 수 있으니 flex layout을 연습할 때 참고하길 바란다. :) 개인적인 리뷰로는 24단계까지 있는데 24단계에서 막혔다 ㅎ 막힌 이유는 내가 모르는 속성? ..

오늘은 플렉시블 박스 레이아웃에 대해 알아보자 [ 플렉시블 박스 레이아웃 ] 플렉시블 박스 레이아웃(flexible box layout)은 그리드 레이아웃을 기본으로 하고, 각 박스가 원하는 위치에 따라 배치하는 것이다. 이때 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수 있다. 플렉시블 박스 레이아웃은 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치한다. 예를 들어 아래의 그림처럼 주축을 수평으로 정하면 박스를 왼쪽에서부터 오른쪽으로 순서대로 배치하는데, 화면 너비를 넘어가면 수직으로 이동해서 다시 순서대로 배치한다. ( 플렉시블 박스 레이아웃을 플렉스(flex) 박스 레이아웃이라고도 한다. 아래부터는 플렉스 박스 레이아웃으로 지칭하겠다.) 플렉스 박스 레이아웃에 ..