푸으름

https://flexboxfroggy.com/#ko  Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.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번  ✏️ 정답 모음  재밌으니까 다들 한 번씩 풀어보세요~

✏️ 미디어 쿼리의 속성종류설명width, height웹 페이지의 가로 너비, 세로 높이min-width, min-height웹 페이지의 최소 너비, 최소 높이max-width, max-height웹 페이지의 최대 너비, 최대 높이device-width, device-height단말기의 가로 너비, 세로 높이min-device-width, min-device-height단말기의 최소 너비, 최소 높이max-device-width, max-device-height단말기의 최대 너비, 최대 높이orientation: landscape단말기의 가로 모드orientation: portrait단말기의 세로 모드✏️ 플렉스 박스 레이아웃의 속성종류설명속성값display플렉스 컨테이너를 지정flex, inline-f..

✏️ 플렉스 박스 레이아웃의 용어플렉스 컨테이너(부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소플렉스 항목(자식 박스) : 플렉스 박스 레이아웃을 적용할 대상으로 위 그림에서 1~6까지 모두 해당주축 : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이며 기본적으로 왼쪽에서 오른쪽이며 수평 방향으로 배치. 플렉스 항목의 배치가 시작되는 위치를 '주축 시작점', 끝나는 위치를 '주축 끝점'이라고 함교차축 : 주축과 교차하는 방향을 말하며 기본적으로 위에서 아래로 배치. 플렉스 항목의 배치가 시작되는 위치를 '교차축 시작점', 끝나는 위치를 '교차축 끝점' 이라고 함✏️ 플렉스 박스 항목을 배치하는 속성종류설명justify-content주축 방향의 정렬 방법align-items교차축..

✏️ 그리드 레이아웃(Grid Layout)반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 함, 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용하게 됨. 그리드 레이아웃은 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말하며 화면을 규칙적으로 배열하므로 레이아웃을 일정하게 유지 ✏️ 그리드 레이아웃의 특성시각적으로 안정된 디자인을 만들 수 있음업데이트가 편한 웹 디자인을 구성 가능요소를 자유롭게 배치할 수 있음✏️ 플렉서블 박스 레이아웃(flexible box layout)그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것. 여유 공간이 생길 경우 너비와 높이를 적..