min

코드 리뷰 사이트 개인 회고 8일차 본문

프로젝트 회고

코드 리뷰 사이트 개인 회고 8일차

minprogramming 2023. 8. 31. 17:05

<회고록>

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다.

 

1. flex 정말 너란 친구는..... 최고야....!

오늘의 가장 큰 주제는 css에서 flex였다. css에서 flex란 정말 중요한 개념이다. 사물들을 배치하는데 있어서 즉 정렬 하는 데 있어서 중요한 속성이다. 특히 비율과 관련된 부분이 flex 핵심인데 이번 프로젝트에서는 그 비율과 관련해서 여러 이슈가 있었다.

내가 프로젝트를 보면 다음과 같은 페이지가 구현되어야 한다. 

여기서 가장 큰 문제는 저 3개의 비율을 어떻게 조정할 것인가 였다. 특히 저 큰 박스가 가운데에 있고 나머지 2개의 박스가 양옆에 가로로 배치되어야 한다. 이때 나는 저 3개의 박스를 담는 하나의 박스를 만들고 이 하나의 박스에서 3개의 박스를 나란히 배치하는 방법이다. 즉 부모 박스의 크키를 데스크탑 기준으로 맞추고 나머지 3개의 박스를 부모 박스를 기준으로 비율을 나누는 것이다. 이렇게 나눴을 때 가운데 박스의 위치는 가운데로 고정되며 화면이 커도 작아도 저 비율을 유저하면서 화면이 줄어들었다 늘어났다 한다. 따라서 모든 유저에게 똑같은 페이지를 보여줄 수 있는 것이다. 이처럼 flex는 화면의 크기에 상관없이 비율로 보여주기 때문에 모든 유저에게 똑같은 페이지를 보여줄 수 있다.