본문 바로가기
프로젝트/프리해요(부트캠프 프로젝트)

메인페이지 완성! CSS는 어렵다.... 정말 어렵다!

by hustle-ing 2023. 7. 11.

지금은 메인프로젝트 진행 중....

어제 밤에는 멘토님과의 멘토링이 진행되어서 블로깅을 하지 못해서 오늘 적어본다.

 


메인프로젝트 직전, 프리프로젝트 때는 StackOverflow를 클론코딩하는 것이 주제였다.

 

<로그인 페이지>
<회원가입 페이지>

짧았던 기간에 비해 꽤 높은 싱크로율의 UI가 나왔고 기능 구현도 많이 해내서 다른 팀들에 비해 완성도가 높았다.
그 때 당시에도 CSS 때문에 참 머리가 아팠는데, 그래도 많이 익숙해져서 도움이 많이 되었던 시간이었다.


그래서 이번 메인프로젝트 때는 CSS 부분은 금방 넘어갈 수 있겠지... 라고 생각했는데 그렇지가 않다.
개발을 하다보면 어떻게 매번 이렇게 새로운 문제들이 매일같이 생기는지 정말 신기할 정도다.

프리프로젝트때는 로그인 / 회원가입을 맡았는데 이번에는 우선 헤더와 푸터 그리고 메인페이지를 담당하고 있다.

 

헤더와 푸터의 postion때문에 시간을 참 많이 써먹었다.
fixed가 CSS를 구성할 때 공간차지를 아예 안하는 것으로 된다는 걸 몰랐기 때문이다. (브라우저의 개발자 도구를 적극적으로 사용하자!)

 

그리고 사소한 하나하나의 디자인들이 나를 괴롭힌다.

분명히 피그마에 나온대로 적용했는데, 뭔가 조금씩 중심이 안 맞는다던가 등의 문제이다.
글씨체마다 다른 line-height를 간과했던게 문제였지만, 그 때 당시에는 그걸 몰라서 머리 많이 쥐어 뜯었다. 아직까지도 이유를 모른채 위치가 미묘하게 어긋난 것들을 수정하기 위해 margin: 1px; 등을 이용하고 있다.

멘토님께 여쭤보니 현업에서도 어쩔 수 없을 때는 쓰고 있다고한다..... 
그래도 이런 문제들을 겪다보니 스스로가 조금씩 단단해지는 느낌이 확실히 들고있다. 힘내자!

 

 

💭 오늘의 생각

정말 별 거아닌 것들(??)로 인해 몇 시간씩 고민하다보면 스트레스가 생기지만, 그것들을 해결하기 위해 고민하는 과정에서 분명히 성장하고 있음을 느낀다. 힘내자!

댓글