개발하지윤👩‍💻

저번 Flexbox 정리 글에서 소개드렸던 Flexbox Froggy 해답 모음입니다. 1번부터 24번 문제까지 모두 한 글에 정리했습니다. 필요한 문제를 Ctrl + F로 검색해서 보시면 편하실 거 같습니다..! Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 1단계 해답 2단계 해답 3단계 해답 4단계 해답 5단계 해답 6단계 해답 7단계 해답 8단계 해답 9단계 해답 10단계 해답 11단계 해답 12단계 해답 13단계 해답 14단계 해답 15단계 해답 16단계 해답 17단계 해답 18단계 해답 19단계 해답 20단계 해답 21단계 해답 22단계 해답 23단계 해답 24단계 해답

flexbox란? flexbox라 불리는 Flexible Box module은 flexbox 아이템 간 공간 배분과 정렬 기능을 편하게 사용할 수 있는 css요소입니다. 이 flexbox만 잘 알아두면 레이아웃을 배치하는 데 큰 어려움이 없습니다. flex는 diaplay의 속성 중 하나입니다. Keypoints 1. flexbox에는 컨테이너에 적용하는 속성과 컨테이너 내부의 아이템에 적용하는 속성이 따로 존재합니다. 2. flexbox에는 중심축(main axis)과 반대축(cross axis)이 존재합니다. 중심축이 수평이면 반대축은 수직, 중심축이 수직이면 반대축은 수평입니다. flexbox의 속성 justify-content 중심축에서 아이템들을 어떻게 배치하는지 설정하는 속성 (컨테이너) 아이..

width와 height width (content의 가로 길이만을 의미, border나 padding 포함X) auto : 브라우저가 계산하여 적용 length : 고정값으로 지정 (px, em ..) percent : 부모 요소의 width에 상대적인 크기 height (content의 가로 길이만을 의미, border나 padding 포함X) auto : 브라우저가 계산하여 적용 length : 고정값으로 지정 (px, em ..) percent : 부모 요소의 height에 상대적인 크기 (height에 percent 사용 시 부모 요소에 명확한 height가 명시되어 있지 않다면 적용X) margin과 padding margin (사람 몸으로 친다면 뼈, 뼈대) length : 고정값으로 지정 ..

CSS란? css는 cascading style sheet라는 뜻이다. cascading은 계단식, 폭포, 단계라는 의미를 가지고 있다. css는 마크업 언어인 html을 꾸며줌으로서 다양한 디자인의 웹사이트를 제작할 수 있도록 돕는 아주 중요한 요소이다. 같은 html파일은 css를 달리함으로서 수백, 수천개의 다른 웹사이트를 만들 수 있다. css는 생각해야 하는 부분이 많으므로 복잡한 경향이 있다. Selector (선택자) 1. 요소 선택자 (태그 선택자) html 태그를 이용하는 선택자다. html문서 내의 해당 태그에 스타일을 적용한다. 여러 개를 쉼표로 구분하여 그룹화를 할 수도 있다. *{ margin: 0 auto; } h1, h2, h3{ color: blue; } div{ backgr..