flex개구리
개구리: flex-item (텍스트)
1단계
목적: flex-item인 개구리를 오른쪽으로 정렬
문제점: 개구리가 왼쪽에 정렬되어있다.
원인: flex-item justify-content 기본값이 flex-start이기 때문
해결: justify-content: flex-end로 바꿔준다.
2단계
목적: 2마리의 개구리를 가운데로 옮긴다
문제점: 개구리가 왼쪽으로 정렬되어있다.
원인: flex-item justify-content 기본값이 flex-start이기 때문
해결: justify-content: center
3단계
목적: 3마리의 개구리를 가운데로 옮긴다, 연잎 양 끝에 여백이 있다.
문제점: 개구리가 왼쪽으로 정렬되어있다
원인: flex-item justify-content 기본값이 flex-start이기 때문
해결: 여백이 있게 정렬시키는 justify-content: space-around 사용
4단계
목적: 3마리의 개구리를 간격에 맞춰 연잎 위로 올린다
문제점: 개구리가 왼쪽으로 정렬되어있다, 양 끝 여백이 없이 맞춰야한다.
원인: flex-item justify-content 기본값이 flex-start이기 때문
해결: 양 끝 여백없이 정렬시키는 justify-content: space-between 사용
5단계
목적: 3마리의 개구리를 아래로 옮긴다.
문제점: 개구리가 왼쪽으로 정렬되어있다, 수직이동을 시켜야한다.
원인: flex-item justify-content 기본값이 flex-start이기 때문
해결: 수직 이동을 시킬 수 있는 align-items: flex-end 사용
6단계
목적: 개구리를 화면 중앙에 맞춘다. 1. 수평 중앙으로 이동 2. 수직 중앙으로 이동
문제점: 개구리가 왼쪽으로 정렬되어있다.
원인: flex-item justify-content 기본값이 flex-start이기 때문
해결: 1. 수평이동 justify-content: center; 사용 2. 수직이동 align-items: center; 사용
7단계
목적: 1. 수직 하단으로 이동 2. 양 끝 여백있는 정렬
문제점: 개구리가 왼쪽상단으로 정렬되어있다.
원인: flex-item justify-content 기본값이 flex-start이기 때문
해결: 1. 수직 하단이동 align-items: flex-end; 사용 2. 양 끝 여백있는 정렬 justify-content: space-around; 사용
8단계
목적: flex-direction을 사용하여 각각의 색에 맞는 연잎으로 이동
문제점: 개구리가 왼쪽상단으로 정렬되어있다. 순서가 뒤집혀야한다.
원인: flex-direction: row;인 기본값으로 설정되어 있다.
해결: flex-direction: row-reverse; 사용 - 요소들을 텍스트의 반대 방향으로 정렬 ( 뒤집힘)
9단계
목적: flex-item 한줄에 한개씩 배치
문제점: "
원인: flex-direction: row;인 기본값으로 설정되어 있다.
해결: flex-direction: column; 으로 바꿔준다.
10단계
목적: 1. flex-item 텍스트 반대방향 정렬 2. flex-item 왼쪽 정렬
문제점: flex-item을 뒤집어야 한다. 뒤집으면 오른쪽으로 정렬된다.
(reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀐다.)
원인: flex-direction: row;인 기본값으로 설정되어 있다.
해결: 1. flex-direction: row-reverse; 로 바꿔준다. 2. justify-content: flex-end;로 바꿔준다.
11단계
목적: 1. flex-item을 수직으로 정렬해야한다. 2. flex-item을 맨아래로 정렬해야한다.
문제점:
원인:
해결:
12단계
목적:
문제점:
원인:
해결:
16단계
목적:
문제점:
원인:
해결:
18단계
목적:
문제점:
원인:
해결:
19단계
목적: 1.줄바꿈을 시킨다. 2. 수직으로 바꿔준다.
문제점:
원인:
해결:
20단계
목적:
문제점:
원인:
해결:
21단계
목적:
문제점:
원인:
해결:
22단계
목적:
문제점:
원인:
해결:
23단계
목적: 1. 노랑색 개구리를 처음으로 보내야한다. 2. 수직 정렬로 바꿔야한다. 3. 객체사이의 여백을 없애야한다.
문제점:
원인:
해결:
24단계
목적: 1. 개구리를 펴준다 (줄바꿈) reverse 2. column-reverse로 수직 정렬로 바꾼다. 3. 객체 사이의 여백이 있어야하고 양옆끝의 여백은 없어야 한다. 3. 수직 세로 정렬까지 맞춰줘야한다.
문제점:
원인:
해결: