About의 구성
이 페이지의 핵심 구현 사항은 아래와 같다.
- 그리드를 활용한 배치, 배치, 그리고 또 배치!
- 그리드 컨테이너의 가운데 정렬
완성된 모습
주요 구현 내용
1. 그리드를 활용한 배치
- 레이아웃을 짜고나니 이건 그리드로 해결해야겠다는 생각이 들었다. 처음해보지만 시도!
- 그리드에 대한 내용은 1분코딩을 참고했다. 해당 사이트는 이곳
- 그리드를 짠 실제 모습은 이러하다.(5행 2열로 그리드를 짠 후 내용을 배치했다.)
2. 그리드의 중앙정렬
- 생각보다 그리드의 상하좌우 중앙 배치가 힘겨웠다. 좌우의 가운데 배치는
justify-content: center;로 쉽게 해결할 수 있었지만 세로축 중앙 배치는 답이 없었다. 나름대로 반응형 웹페이지를 만들고 싶었던 터라 padding값을 고정적으로 줄 수도 없는 노릇이었다. - 계속 검색을 해보아도 해결책을 찾을 수가 없어 어쩔 수 없이 사전스터디 팀원들에게도 도움을 요청했다. 답변대로
margin: auto 0을 해보아도 내가 뭔가를 잘못 설정한 건지 좀처럼 해결되지 않았다. - 결국 내 나름대로 찾은 해결책은
grid-template-rows중 첫 행과 마지막 행을auto로 준 뒤, 첫번째 행의 그리드 아이템에align-self: end값을 주어 아이템을 밑으로 데려오는 것이었다. 이게 최선인지는 잘 모르겠으나 일단 해결한 것에 의의를 두기로...(혹시 더 나은 해결책이 있다면 댓글 달아주세요...제발...ㅠㅠ)
4편을 마치며...
- 원래는 원형 progress bar를 만들고자 했지만, JS가 필요한 탓에 아직 구현하질 못했다. 빨리 JS와 친해지고 싶다..ㅠㅠ
- 그리드는 생각보다 이해하는게 어렵지 않았다. 오히려 그리드 없이 어떻게 배치하나 생각이 들정도로 편리한 기능같다. 다만 구체적인 기능들은 손에 익히는데에 시간이 좀 걸릴 것 같다.
- 이번 편도 즐거웠다. 하나 하나 만들어가고 고치는 재미가 쏠쏠하다!
해결해야할 문제들
- 창 크기에 반응하는 그리드 만들기
- (JS) 활성section에서 header의 메뉴 색 변경하기
- (JS) 원형 progress bar 만들기
- (JS) 스크롤에 따라 fade-in하도록 만들기
인생은 즐거워٩( ᐛ )و