웹 기록용
flexbox froggy Solutions - 플렉스 개구리 (14번 ~ 풀이진행중) 본문
[1단계]
- justify-content
목적 : flex-item인 개구리를 상단 오른쪽으로 위치시키기
문제 : 개구리가 오른쪽에 위치해야 하는데 상단 왼쪽에 위치해 있음
이유 : flex-item justify-content기본값이 flex-start로 되어 있다
해결 : justify-content: flex-start;를 justify-content: flex-end;로 변경해주면 된다
[2단계]
- justify-content
목적 : flex-item인 개구리를 상단 가운데로 위치시키기
문제 : 개구리가 중앙 위치해야 하는데 상단 왼쪽에 위치해 있음
이유 : flex-item justify-content기본값이 flex-start로 되어 있다
해결 : justify-content: flex-start;를 justify-content: center;로 변경해주면 된다
[3단계]
- justify-content
목적 : flex-item인 개구리를 나뭇잎 위로 위치시키기 (요소들 주위로 많은 간격이 있음)
문제 : 개구리가 중앙 위치해야 하는데 왼쪽에 위치해 있음
이유 : flex-item justify-content기본값이 flex-start로 되어 있다
해결 : justify-content: flex-start;를 justify-content: space-around;로 변경해주면 된다
[4단계]
- justify-content
목적 : flex-item인 개구리를 나뭇잎 위로 위치시키기 (요소들 주위로 동일 간격이 있음)
문제 : 개구리가 중앙 위치해야 하는데 왼쪽에 위치해 있음
이유 : flex-item justify-content기본값이 flex-start로 되어 있다
해결 : justify-content: flex-start;를 justify-content: space-between;로 변경해주면 된다
[5단계]
- align-items
목적 : flex-item인 개구리를 아랫쪽으로 위치시키기
문제 : 개구리가 중앙 위치해야 하는데 위쪽에 위치해 있음
이유 : flex-item align-items기본값이 flex-start으로 되어 있다
해결 : align-items: flex-start;를 align-items: flex-end;로 변경해주면 된다
[6단계]
- justify-content + align-items
목적 : flex-item인 개구리를 flex-item justify-content와 align-items를 사용하여 정중앙에 위치시키기
문제 : 개구리가 중앙 위치해야 하는데 상단 왼쪽에 위치해 있음
이유 : flex-item align-items와 flex-item align-items기본값이 flex-start으로 되어 있다
해결 :
justify-content: flex-start;를 justify-content: center;로 변경해주면 된다
align-items: flex-start;를 align-items: center;로 변경해주면 된다
[7단계]
- justify-content + align-items
목적 : flex-item인 개구리를 flex-item justify-content와 align-items를 사용하여 하단에 위치시키기
(나뭇잎 주변에 여백이 있음)
문제 : 개구리가 중앙 위치해야 하는데 상단 왼쪽에 위치해 있음
이유 : flex-item align-items와 flex-item align-items기본값이 flex-start으로 되어 있다
해결 :
justify-content: flex-start;를 justify-content: space-around;로 변경해주면 된다
align-items: flex-start;를 align-items: flex-end;로 변경해주면 된다
[8단계]
- flex-direction
목적 : flex-item인 개구리를 개구리와 같은 나뭇잎 위에 위치시키기
문제 : 개구리가 나뭇잎과 반대방향으로 배열되어 있음
이유 : flex-item의 기본값이 flex-direction: row으로 되어 있다
해결 :
flex-direction: row를 flex-direction: row-reverse;로 변경해주면 된다
[9단계]
- flex-direction
목적 : flex-item인 개구리를 개구리와 같은 색인 나뭇잎으로 위에서 아래로 이동시키기
문제 : 개구리가 나뭇잎과 세로정렬이 아닌 가로 정렬이 되어 있음
이유 : flex-item의 기본값이 flex-direction: row으로 되어 있다
해결 :
flex-direction: row를 flex-direction: column;로 변경해주면 된다
[10단계]
- flex-direction + justify-content
목적 : flex-item인 개구리를 개구리와 같은 색인 나뭇잎으로 위치시키기
문제 : 개구리가 나뭇잎과 반대 컬러로 매치되어 있음 ( 가로 반전과 반전시킨 개구리를 왼쪽으로 옮겨줘야 함)
이유 : flex-item의 기본값이 flex-direction: row로 되어 있음
또한, flex-direction를 변경해주면 개구리의 위치가 변하기 때문에 다시 한번
justify-content의 정렬이 필요함
해결 :
flex-direction: row를 flex-direction: row-reverse;로 변경해주면 된다
justify-content: flex-start를 justify-content: flex-end;로 변경해주면 된다
[11단계]
- flex-direction + justify-content
목적 : flex-item인 개구리를 개구리와 같은 색인 나뭇잎으로 위치시키기
문제 : 개구리가 나뭇잎과 정렬 방향(가로-세로)이 다르고, 위치(상단-하단)이 다르다
이유 : flex-item의 기본값이 justify-content: flex-start로 되어 있음
또한, flex-direction를 변경해주면 개구리의 위치가 변하기 때문에 다시 한번
justify-content의 정렬이 필요함
해결 :
flex-direction를 flex-direction: column로 변경해주면 된다
justify-content: flex-start를 justify-content: flex-end;로 변경해주면 된다
[12단계]
- flex-direction + justify-content
목적 : flex-item인 개구리를 개구리와 같은 색인 나뭇잎으로 위치시키기
문제 : 개구리가 나뭇잎과 정렬 방향(가로-세로)이 다르고, 위치 컬러(상단-하단)가 다르다
이유 : flex-item의 기본값이 justify-content: flex-start로 되어 있음
flex-item의 기본값이 flex-direction: row으로 되어 있음
해결 :
flex-direction: column를 flex-direction: column-reverse; 로 변경해주면 된다
justify-content: flex-start를 justify-content: space-between; 로 변경해주면 된다
[13단계]
- flex-direction + justify-content + align-items
목적 : flex-item인 개구리를 개구리와 같은 색인 나뭇잎으로 위치시키기
문제 : 개구리가 나뭇잎과 정렬 방향(가로-세로)이 다르고, 위치 컬러(상단-하단)가 다르다
이유 : flex-item의 기본값이 justify-content: flex-start로 되어 있음
flex-item의 기본값이 flex-direction: row으로 되어 있음
align-items의 기본값이 align-items: flex-start으로 되어 있음
해결 :
flex-direction: row를 flex-direction: row-reverse; 로 변경해주면 된다
justify-content: flex-start를 justify-content: center; 로 변경해주면 된다
align-items: flex-start;를 align-items: flex-end;로 변경해주면 된다
[14단계]
- order
해결 : order: 1;
[15단계]
- order
해결 : order: -1
[16단계]
- align-self
해결 : align-self: flex-end;
[17단계]
- order + align-self
해결 : order: 1; align-self: flex-end;
[18단계]
- flex-wrap
목적
문제
이유
해결 : flex-wrap: wrap;
[19단계]
- flex-wrap + flex-direction
해결 : flex-direction: column; flex-wrap: wrap;
[20단계]
- flex-flow
해결 : flex-flow: column wrap;
[21단계]
- align-content
해결 : align-content: flex-start;
[22단계]
- align-content
해결 : align-content: flex-end;
[23단계]
- align-content + flex-direction
해결 : flex-direction: column-reverse; align-content: center;
[24단계]
해결 :
flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
[엔딩😀]
