초보 개발자의 개발 블로그

🐸 Flexbox Froggy란 ? CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임 Flexbox의 속성을 실습하며 익히기 좋다. * FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 13단계. 개구리를 순서를 반대로 + 아래로 이동 + 가로선 상 중앙 정렬 #pond { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-end; } 14단계. 노란색 개구리를 제일 마지막으로 #pond { display..

🐸 Flexbox Froggy란 ? CSS코드 게임으로 Flexbox의 속성을 요구한대로 입력하면 다음 단계로 넘어갈 수 있는 게임 Flexbox의 속성을 실습하며 익히기 좋다. * FLEXBOX FROGGY 이동 https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 1단계. 개구리를 오른쪽으로 이동 #pond { display: flex; justify-content: flex-end; } 2단계. 개구리를 가로선 상 중앙 정렬 #pond { display: flex; justify-content: center; } 3단계. 수련잎 주위의 간격 고려하여 이동 #pond { display:..

CSS Flexbox 오랫동안 CSS Layout을 작성할 수 있는 도구는 float 및 positioning 뿐이었다. 그로 인해 문제가 있는 것은 아니었지만, 어떤 면에서는 제한적이고 한계가 존재 Flexbox라 불리는 Flexible Box module은, Flexbox 인터페이스 내의 아이템 간 "공간 배분"과 강력한 "정렬"기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었다. 요소 간 공간 배분과 정렬 기능을 위한 1차원(단방향) 레이아웃 크게 딱 2가지만 기억할 것! 요소! 그리고 축! 요소 Flex Container (부모 요소) Flex Item (자식 요소) 축 main axis (메인축) cross axis (교차축) Flexbox의 시작 Flex Container를 선언하는 것으로..