스파르타코딩클럽 내일배움캠프 42일차

오늘 일과 간단 요약

• 프로젝트 마무리

 

 

 

 

CSS 마무리하기

어제 메인 페이지에서 boardlist css를 완성했는데 중간에 검색창이 있는 걸 까먹고 있었다 ㅋㅋㅋㅋ

오전에 국취제 상담 갔다가 카페에서 하느라 너무 시끄러워서 마이크를 잘 키지 못했지만...

열심히 검색창을 만들었다.

 

참고한 코드들은 아래 링크에.

https://codepen.io/mihaeltomic/pen/vmwMdm

CSS effect for search input

 

여기 검색창을 가져와서 사용했다.

뭔가 예쁘게 하고 싶어서 이런저런 검색바들을 찾아보다가 요게 가장 예뻐보여서 그냥 이걸로...!

 

적용된 걸 보니까 확실히 신기하다.

css를 어떤 식으로 적용해야 예쁘게 나올까. 그 부분을 고민해보고 싶은데 맨날 디자인은 뒷전으로 미루게 된다 ㅋㅋ

일단은 프로젝트니까 최대한 깔끔하고 예쁜 디자인을 하기 위해서 저기 링크에서 가져와서 리액트 버전(?)으로 바꾸었다.

 

그렇게 오전은 메인 페이지 css 수정하는 걸로 하루를 다 보냈다...!

 

 

 

 

메인페이지 CSS 계속 마무리

오전에 이어 글쓰기 버튼 역시 스타일을 줘야 해서 그부분을 바꿨다.

 

원래는 header 에 글쓰기 버튼을 추가하려고 했는데 header를 컴포넌트로 분리하고 layout에서 바뀌지 않는 부분으로 나눴기 때문에 글쓰기 버튼이 다른 페이지에서도 나올 가능성이 있어서 프레임을 변경했다.

 

검색바와 나란히 있는 형식으로 바꿨다.

버튼 디자인도 위의 링크처럼 다른 형식을 사용할까 하다가 어차피 버튼 스타일을 이미 정했었기 때문에 내가 그냥 css를 수정했다.

 

메인페이지

그래서 만든 부분이 바로 이 부분.

 

나란히 두려고 space-between을 사용했다. 사이즈도 좀 줄여보고 이렇게저렇게 좀 바꾸다가 저게 최종 버전으로.

우리 웹페이지가 주황색이 메인이기 때문에 버튼도 주황색으로 만들어줬다.

 

이렇게 한 뒤에 다른 분이 만든 것까지 합치면 메인 페이지 css는 완료...!

 

 

 

 

되는 줄 알았지만...

기능과 style을 합치는게 이렇게 어려운 일인 줄 몰랐따...!

아니 사실은 css를 만드는게 더 어려웠다.

 

나는 메인페이지라서 잘 몰랐는데 detail page는 아예 정해진 큰 틀이 있었고 그 틀 안에서 작업해야 해서 그 부분이 까다로웠을 것 같다.

그래서 오늘도 어제에 이어서 하루종일 css를 수정하고 다 늦은 밤이 되어서야 기능과 css를 합칠 수 있었다.

 

사실은 아직 전부 완료되지는 않았다.

추가로 구현된 기능이 있어서 그 기능까지 css를 입혀야 하고, 조금씩 수정해야 할 부분들이 있어서 진행 중이다.

내일 오전이 되어서야 제대로 배포까지 할 수 있을 것 같다.

 

 

 

 

 

 

짧은 일기

css로 이렇게나 시간이 오래 걸리다니...ㅠ

기능 구현을 완료해서 시간을 조금 앞당긴게 다행인 것 같다.

주말 안에 전부 기능을 구현했기 때문에 기능에 대한 오류 없이 마음 편하게 css를 구현할 수 있었다.

그래도 합치는 게 조금 번거롭기는 하지만...그래도 css가 입혀진 페이지를 보니 너무 귀엽다!!

내일 발표할 때 웃으면서 볼 수 있을 것 같다.

 

프로젝트 기간이 짧았기에 지난 프로젝트보다 시간을 더 오래 할애한 기분이다.

물론! 그 때도 열심히 안했다는 건 아닌데 지난 프로젝트에서는 발표 전날 모든걸 마무리하고 발표 당일에는 발표 준비만 했었는데 이번에는 아니어서...ㅠ 생각보다 css가 어렵다 정말..

그래도 이번 프로젝트 결과도 아주 마음에 든다. 넘 뿌듯하다. 귀엽게 만들어졌기 때문에...ㅋㅋ

 

내일 발표까지 하고 나면 긴장이 풀릴 것 같은데, 우선은 전부 완료하고 쉬는 게 좋을 것 같다.

아침에 일어나서 마무리까지 하고 나서야 진정한 TIL이 마무리되지 않을까 싶다 ㅋㅋㅋ