🌿1. welcome-box
<div class="welcome-box shadow p-4 mb-4 bg-body row rounded gx-0">
<div class="col-sm-7">...
</div>
<div class="col-sm-5">...
</div>
</div>Welcome back, Oneill!이라고 써진 div는 flex box를 이용해서 만들었다.
화면의 너비가 부트스트랩 중단점 sm(576px)보다 작을 때는 row가 적용된 전체 12블록을 모두 차지하다가, 중단점을 넘어가면 그때부터 텍스트가 담긴 div는 7블록을, 일러스트가 담긴 div는 5블록을 차지한다.
<div class="welcome-text mb-3 px-0 pe-sm-2">
<h5 class="blue">Welcome back, Oneill!</h5>
<p class="navy">Your tasks are waiting for you. Check your things and Manage your time more effectively.
</p>
</div>텍스트 div는 화면 너비가 576px보다 작을 때는 일러스트 div 위에 쌓이기 때문에 margin-bottom을 적용했고, 부모 요소인 웰컴 박스에 이미 padding이 적용되어 있기 때문에 좌우 padding(padding-x)을 없앤 다음 일러스트와 나란히 정렬되어 있을 때를 대비해 중단점에 이르렀을 때부터 오른쪽에만 padding을 주었다.
내부 제목과 텍스트는 색상만 바꿔주었다.
<div class="welcome-img text-center px-md-4">
<img src="images/undraw_task_list_6x9d.svg" alt="welcome-img">
</div>일러스트는 undraw.co에서 가져왔다. 화면이 클 때는 상관 없지만 텍스트 div 아래에 배치되었을 때를 대비하여 가운데 정렬을 했고, 화면 크기를 조절함에 따라 일러스트가 div를 뚫고 나오는 것을 방지하고자 중단점 이후부터 좌우에 padding을 적용했다.
.welcome-img {
height: 140px;
}
.welcome-img img {
width: 100%;
height: 100%;
}일러스트가 div를 뚫고 나오지 않도록 부모 요소와 동일한 크기로 설정했다.
이 부분은 아직 이해가 필요한데, 이렇게 너비 높이 모두 100%를 주었음에도 화면 크기를 조절하다 보면 일러스트가 div를 뚫고 나오려고 했다. 그래서 일러스트를 감싼 div 자체에 padding을 주었다. 이미지 파일에 대한 공부가 더 필요한 듯.
🌿2. plan-box
플랜 박스는 Wonderful 2002라고 적힌 박스와 그 옆에 4개로 나뉘어 있는 weeks 박스 두 개를 포함한다. 둘은 각각 main-plan과 weeks라는 이름으로 나누었고, 마찬가지로 flex box를 이용해서 부트스트랩 중단점 lg(992px)를 넘어가서부터 각각 7블록과 5블록을 차지하게 만들었다.
2-1. main-plan
main-plan은 연한 회색 선을 기준으로 annual-plan과 monthly-plan으로 나뉘고, 둘은 flex box를 이용하여 각각 7블록과 5블록을 차지한다.(귀찮아서 모두 7:5로 통일한 게 아니라, 6:6부터 8:4까지 적용해 본 결과 7:5가 가장 보기 좋다 보니...)
연한 회색 선은 모바일 화면일 때는 블록 형태로 쌓인 annual-plan과 monthly-plan을 가로지르고, 7블록과 5블록을 차지하면서 일렬로 배치되었을 때는 둘을 세로지른다. 이를 위해 미디어 쿼리를 사용했다.
@media screen and (min-width: 576px) { .monthly-border { border-left: 1px solid #E7ECEF; } } @media screen and (max-width: 576px) { .monthly-border { border-top: 1px solid #E7ECEF; padding-top: 30px; } }
annual-plan은 제목과 체크박스, progress-bar로 구성된다.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Lose weight
</label>
</div>체크박스는 이렇게 생긴 form을 여러 개 복사해서 사용했다. input의 id와 label의 for가 같으면 둘은 연결되어 label에 들어있는 텍스트만 클릭해도 체크박스를 체크하고 해제할 수 있게 된다. server와는 연결되어 있지 않아서 value 값은 비워두었다.
<div class="goals-text d-flex navy">
<div>Goals</div>
<div style="flex-grow: 1"></div>
<div>50%</div>
</div>
<div class="progress mt-2">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100">
</div>
</div>progress-bar는 연간 목표 달성률을 한 번에 보여주기 위해 만들었다.
바 위의 텍스트 div에는 display: flex를 적용한 뒤 가운데 비어 있는 div에 flex-grow 속성을 부여함으로써 양쪽으로 정렬시켰다. 다른 방법도 있지만 간편해서 적용했다.
체크박스와 progress-bar를 연결시키지는 않았는데, JS를 사용해서 둘을 연결한 다음 체크박스 체크 여부에 따라 달성률을 조절하는 기능도 추가하면 좋을 것 같다.
monthly-plan도 특정 달의 목표 달성률을 보여주기 위해 chart.js 라이브러리를 이용해서 도넛 그래프를 삽입했다.
2-2. weeks
weeks는 말 그대로 특정 주의 계획으로 바로 갈 수 있게끔 만들었다. 한 달이 5주일 때도 있으나 5개는 균형이 맞지 않는 관계로 4개만 만들었다. 원래는 각자 다른 일러스트를 넣으려고 했으나, undraw.co에서 제공하는 이미지의 사이즈가 통일되지 않아서 그에 따라 div 크기도 들쭉날쭉 해지는 바람에 하나만 복붙해서 썼다. 이미지 공부... 더 이상 미룰 수 없다...
<div class="col-6 col-sm-3 col-md-6">4개의 div에는 역시 flex box가 사용되었고, 이전 것들과는 달리 중단점이 두 개 설정되었다. small 크기보다 작을 때는 각각 6블록씩 차지해서 한 줄에 두 div씩 총 두 줄로 배치되다가, small을 넘어서면 각각 3블록씩 차지하면서 네 div가 한 줄로 배치된다. 그러다 middle을 넘어서면 다시 6블록씩 차지하면서 처음과 같이 한 줄에 두 div씩 총 두 줄로 배치된다.
화면 사이즈를 조절하는 영상을 찍어서 gif로 만들었는데 어째서인지 벨로그에 첨부가 되지 않는다... 나중에 github readme에 올려야겠다.
🌿3. footer
<footer class="footer">
<div class="navy">ⓒ yujinoneill</div>
</footer>footer는 따로 링크 없이 그냥 아이디만 박아두었다.
🌿4. 가벼운 회고
겨우 Home 하나 정리하는 데에 포스트 두 개가 필요하다니!
지난 모멘텀 클론 코딩에 비해 확실히 코드 양이 늘어난 것 같다.
그때보다 스스로 짠 코드가 늘어나면서 그만큼 시간이 오래 걸리기도 하지만, 성취감은 훨씬 높아서 좋다.
이 다음은 My account 페이지인데, Home을 만들면서 CSS 코드를 미리 짜두어서인지 아니면 form이 대부분을 차지해서인지는 몰라도 완성하기까지 그리 오래 걸리지 않았다.
스스로가 성장하고 있는 것이 눈에 보이는 경험은 언제 해도 짜릿하다.
얼른 완성하고 지금 듣고 있는 리액트 강의도 끝낸 뒤 리액트로 뭔가를 만들어 보고 싶다. 하고 싶은 것과 해야 할 것은 많은데 하루는 왜 이렇게 짧을까...!
