오늘한 일
- 세붕이 웹사이트 프로젝트를 진행하였다
- 알고리즘 문제를 풀었다
- 블로그 TIL을 작성하였다
- 1일 1커밋을 하였다
느낌 점
이번에 프로젝트 페이지를 만들면서 chatGPT에 도움을 매우 많이 받았는데 물론 계속해서 엉뚱한 코드를 내는 일도 있었지만 html, css, js, react나 next에 익숙하지 않고 거의 처음하는 내가 chatGPT에게 코드를 요청하고 조금씩 수정하는 것 만으로도 쓸만한 페이자를 만든 것이 놀라웠고 GPT4 버전을 또 얼마나 대단할까?라는 생각이 들었다 하지만 한편으로는 이것이 개발실력 성장적으로는 그리 좋지 않은 것 같다
배운 점
tailwindcss 반응형 디자인
내가 세붕이 웹 페이지를 만들면서 걱정했던 것 중 하나가 반응형으로 어떻게 만들어야 할까?라는 것이였다 물론 반응형 디자인을 지원하지 않은 곳도 꽤 많으니
굳이 안해도 되지만 모바일로 자주 웹 사이트를 보는 내 입장에서도 내가 확인하거나 남에게 보여줄 때도 모바일에 맞게 반응형을 지원하는게 좋을 거 같아 고민중 tailwindcss에서 이러한 반응형 디자인을 손 쉽게 몇가지 태그로 할 수 있다는 것을 알게 되었다
- sm: : 작은 화면(모바일 기기)에서 적용될 스타일
- md: : 중간 화면(태블릿 기기)에서 적용될 스타일
- lg: : 큰 화면(데스크탑)에서 적용될 스타일
- xl: : 매우 큰 화면(큰 디스플레이)에서 적용될 스타일
해당 태그를 통해 반응형을 지원할 수 있는데 예를 들어
1
<h1 className="text-3xl md:text-3xl lg:text-4xl whitespace-pre-line leading-snug font-bold mb-4 text-left ml-5"> {selectedYear}{title} </h1>
위 코드는 실제로 내가 프로젝트에 적용한 코드로 text-3xl들로 작은 화면에서는 3xl로 텍스트 사이즈를 보이게 하고 데스크탑에서는 4xl로 보이게 만들었다
내일 계획
세붕이 웹 사이트 프로젝트를 진행해야겠다