오늘은 이제 구상한 웹페이지를 만들어보는 날이다. 내가 구현한 기능을 모두 담고 있는 최소한의 프로토타입으로 만들어 볼 것이다. 내가 만든 컨트롤러는 타임리프를 사용하기에는 적절하지 않아 html, css, js를 사용할 것이다..! 너무 오랜만이라 기억이 하나도 안나므로 더듬더듬 만들어봐야지..😭
생각보다 기억이 하나도 안나서..약 2년전에 했던 과제를 참고해보았다.
이런 식으로 화면을 구현했었다. 우선 css는 욕심부리지 말고 기본만 하고 최대한 이것을 참고해서 어제 내가 설계한 화면과 비슷하게 만들어보고 싶다.
1. 기본 화면 (index.html)
여기서 필요한 것은 아래와 같다.
1. 메뉴바 (각 페이지로 넘어가는 링크 포함)
2. 가운데 정렬
3. 프로젝트 설명 정리
이렇게 만들고 나서 디자인과 레이아웃을 수정하여서 설계 화면과 비슷하게 만들어보았다.
페이지 설명 밑에 공백이 너무나도 많아서 이것만 해결하고 다음 페이지로 넘어가야 겠다.
CSS로 무엇이든 중앙 정렬하는 방법 - Div, 텍스트 등
> 중앙 정렬은 CSS에서 가장 어려운 것 중 하나입니다. 방법 자체를 이해하는 것은 그다지 어렵지 않지만, 너무나도 다양한 방법이 존재한다는 사실이 중앙 정렬을 어렵게 합니다. 중앙 정렬 하는
www.freecodecamp.org
위와 같은 방법을 이용해서 해결하였다!
justify-content: center와 align-items: center를 부모 요소에 적용하는, Flexbox 방법을 사용해보았다.
적용된 코드 (style.css)
index.html의 <main> 태그에 main-content-centered라는 클래스를 주고 이를 부모 요소로 설정했다.
/* [신규] 홈 화면의 내용을 가로/세로 정가운데 정렬 */
.main-content-centered {
display: flex;
flex-direction: column;
justify-content: center; /* 세로 정렬 */
align-items: center; /* 가로 정렬 */
}
푸터와 헤더는 위아래로 고정한 채 가운데 페이지 설명 컨텐츠 부분만 가운데 정렬되도록 수정했다!
2. RandomLotto (랜덤 로또 생성 화면)
뭐지 같은 방식으로 가운데 정렬을 하니 뭔가 컨텐츠들이 옹졸(?)해졌다.. 우선은 이 문제를 해결하기 전까지는 그냥 가로 정렬만 해야할 것 같다. 왜그러는거지,,,
3. MyLotto (나만의 로또 관리 페이지)
나만의 로또 페이지에서는 수동으로 저장하는 로직이 필요하므로 번호 저장 페이지를 따로 만들어줬다.
그리고 예전에 데이터가 추가되면 표가 자동으로 늘어나는? 그런 기능이 있었던 것 같은데 아마 나중에는 그것을 활용해볼 것이고 지금은 뷰만 만들고 있기 때문에 목업 데이터로 추가해서 구현했다.
번호(순서)는 아이디와는 관련이 있을 지 없을 지는 아직 잘 모르겠다.. 아이디가 밖으로 보여도 되려나? 구매와 삭제 버튼을 표 안으로 넣어버리니 아주 깔끔하고 마음에 든다!!
추가하고 싶은 버튼이 있을 때는 나만의 로또 번호 추가하기 버튼을 통해서 페이지를 넘어면 된다.👍 구매로또 페이지도 이와 거의 동일하게 구현하면 될 것 같다.
4. purchasedLotto (구매 로또 관리 페이지)
구매 로또 표(목록) 형식은 나만의 로또와 거의 동일한데 나만의 로또에서는 구매 로또에 추가하기 버튼이 있었는데 여기서는 필요없으니 표 행만 하나 빼서 구현했다. 아! 이름도 빠졌다ㅎㅎ
로또 추가하기에서는 이름 입력 대신에 날짜를 입력하도록 바꿔서 입력 폼을 구성했다.
여기까지 페이지 구현은 완료했다! 이제 내일은 이 페이지의 각 입력폼, 버튼 등의 요소를 내가 만들어둔 API와 연결시키는 작업을 해야한다:) 내가 직접 프론트를 구현해 API를 연결해보는 것은 처음이여서 시간이 좀 걸릴 수도 있지만 난! 할 수 있다! 는 마음으로 꼭 완성시킬 것이다. 오늘 오랜만에 프론트를 구현해보면서 궁금한 점이 생겼다. 다들 프론트와 백엔드를 동시에 작업할 때는 어떻게 작업하는 거지?? 내가 처음에 만들었던 API설계도를 공유하고 프론트는 그것을 바탕으로 작업을 시작하는건가? 지금은 내가 둘 다 하니까 소통의 영역은 생각할 필요가 없었지만 만약 협업미션으로 진행했다면 어떻게 이 오픈미션이 진행되었을 지 궁금해졌다 예전에는 프론트를 먼저 작업하고 넘겨주면 백엔드를 구현하기도 했었던 것 같다. 이제 2일밖에 안남았는데 얼른 프로젝트를 완성시켜서 우선 엄마한테 자랑하고 싶다 헤헷 그리고 제출기한이 일주일로 주어졌으니 통계 기능도 꼭 추가하고싶다. 아자자 힘내보자
