게임으로 배우는 CSS Flex (Flexbox Froggy) https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 게임으로 CSS Flex를 공부할 수 있는 사이트를 발견했습니다. Flex를 사용하여 개구리들을 연잎 위로 옮겨주시면 되는 아주 간단한 게임입니다. 총 24단계로 되어있고, Flex(1), Flex(2)를 충분히 이해하셨다면 어렵지 않을 거라 생각합니다. 문제를 푸는데 많이 막히신다면 다시 한 번 Flex(1), (2)를 복습하고 오시길 권장해 드립니다. Flex(1) https://ghvhdh321.tistory.com/entry/CSS-Flex-container [CSS]..

Before you learn ● Flex container에 적용하는 속성들 Flex item에 적용하는 속성들 flex-basis 아이템 최소 크기 지정 (default value : auto) 1 22 333 4444 55555 HTML Code flex-basis 입력 전 OR flex-basis: auto; 인 경우 (아이템 최소 크기 = content 크기) flex-basis 입력 후 (아이템 최소 크기 = flex-basis value) flex-grow 아이템 크기 늘리기 (↔ shrink) (default value : 0) 아이템이 갖는 최소한의 크기를 제외한 나머지 여백을 기준으로 1/N 하여 나눠 갖는다. (flex-basis 참고) flex-grow 입력 전 flex-grow 입..

Flex Flex contatiner에 적용하는 속성들에 알아보기에 앞서 Flex의 기본적인 성향에 대해 알아보겠습니다. 위의 말대로라면 배치된 방향이 가로 또는 세로인지에 따라 중심축과 교차축이 달라지겠죠? 밑그림은 가로배치, 세로배치에 따라 중심축과 교차축이 달라짐을 보여주는 그림입니다. 나중에 나올 내용 하나 더 암기해 갑시다. (밑에 나와요) Flex container에 적용하는 속성들 display : flex; 1 22 333 4444 55555 HTML Code style.css & result (1) tag는 block level element의 속성을 가집니다. style.css & result (1) container에 flex를 입력하면 flex 아이템들은 가로 방향으로 배치되고, 자..