푸으름

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..

✏️ CSS 그리드 레이아웃 용어플렉스 박스 레이아웃에서는 가로나 세로 중에서 하나를 주축으로 정해 놓고 플렉스 항목을 배치했다면, CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용함. 플렉스는 1차원이고 그리드는 2차원이라고 생각, CSS그리드 레이아웃은 가로 방향을 가리키는 줄(row)와 세로 방향을 가리키는 칼럼(column)으로 웹 화면을 구성 ✏️ 그리드 컨테이너를 지정하는 display 속성그리드 레이아웃을 지정할 때에는 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어줘야 함. 그리드 컨테이너를 만들 때는 display 속성을 grid나 inline-grid로 지정종류설명grid컨테이너 안의 항목을 블록 레벨 요소로 배치inline-grid컨..

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