1. 클론 할 페이지
2. 예상 클론 레이아웃
3. 클론 후 페이지
경일게임아카데미 클론 4회 차이다. 4번째 홈페이지는 특별히 애니메이션이나 다른 기능 없이 개발을 진행할 수 있었다. 지금까지 페이지들이 반응형 웹을 고려하지 않고 픽셀값과 고정된 크기로 주었다면, 4페이지부터는 반응형 웹을 고려하여 박스들을 배치하고, flex를 이용하여 개발을 진행하였다. 이 전 페이지들은 여러 css 들과 애니메이션을 배워 어려웠다면, 오늘 만든 페이지의 경우 화면의 변화에 따라 변화하는 반응형 웹을 고려하여 개발을 진행하였다.
1. 클론 할 페이지
2. 예상 클론 레이아웃
위의 클론 할 페이지를 바탕으로 큰 레이아웃을 구상하였다. 기본적으로 텍스트 박스 두 개는 제목태그를 이용하여 text-align center와 미디어쿼리를 이용하여 480px에 도달 시 fontsize를 조절하여 주었다. h2에는 word-break: kee를 주어 띄어쓰기가 나오면 자동으로 다음줄로 넘어가는 속성을 부여하였다. 화면이 줄어들면 2개의 아이템만 보이는 것을 위해 빨간 큰 row1으로 묶어 주었고, 빨간색 row1 아래에 row2와 img class를 주어 웹이 줄어들고 바뀜에 따라 줄어들면 2가지 아이템 박스가 보이는 반응형 웹을 만들었다.
3. 클론 후 페이지
오늘 웹을 개발하면서 특별히 어려운 부분의 html과 css는 아니었지만, 반응형 웹을 구상할 때 어떻게 자를 것인지와 어떤 비율로 나누어질 것인지에 대해 고민하여 보았다. 또한 media쿼리에 대한 사용법을 알게 되었고, 가상요소, ::before와 ::after 사용법의 숙지와 이에 대해 더 공부하여야겠다.
'블록체인 개발 > 클론코딩' 카테고리의 다른 글
| 코인마켓캡 클론 코딩 (0) | 2023.07.17 |
|---|---|
| 경일게임아카데미 클론코딩 - 5 (2) | 2023.06.23 |
| 경일게임아카데미 클론코딩 - 3 (0) | 2023.06.21 |
| 경일게임아카데미 웹사이트 클론하기- 2 (0) | 2023.06.20 |
| 경일게임아카데미 웹사이트 클론하기 (2) | 2023.06.19 |