기획을 거쳐 컴포넌트 구현을 시작하였다.
css를 구현하며 새롭게 알게 된 부분이 많아 정리해본다.
✅ 1. grid-template-colums
Flex : 한 방향 레이아웃 시스템(1차원)
Grid : 두 방향 레이아웃 시스템(2차원)
Flex와 마찬가지로 display : gird; 를 설정하는 것으로 시작된다.
-
컨테이너에 적용하는 속성
-
아이템에 적용하는 속성
이렇게 나뉘는데
grid-template-colums : repeat(5, minmax(0, auto)를 주면 한 줄에 5개의 아이템이 자동으로 쭉 배치된다.참고 사이트 : https://studiomeal.com/archives/533
✅ 2. 전역 스타일 불러오기
이번 프로젝트에서 GlobalStyle.jsx 파일에 전역 스타일 설정을 해주고 theme.js파일을 만들어 색깔 등을 통일하고 시작하였는데, 불러오는 방법은 다음과 같다.
필요한 파일에서 theme를 import 해오고 색을 사용하고 싶다면
$(theme.PRIMARY.설정한색깔명) 이런식으로 입력해주면 된다.
대표색을 변경하고 싶다면 theme파일에서 변경해주면 사용하는 모든 파일의 색이 변경되니까 관리하기 좋은 방법이라고 생각한다.
✅ 3. useState는 setState를 사용하지않아도 사용이 가능하다.
const [book] = useState(Dummybooks);
✅ 4. 모든 스타일 컴포넌트 한번에 가지고 오기
프로젝트를 진행하며 스타일드 컴포넌트 안에 많은 컴포넌트들이 생성이 되는데, import 해서 가져다 쓸 때 코드가 길어지는 단점이 있었다. 이번 프로젝트에서는
import * as S from './Book.style';를 이용하여
모든 스타일 컴포넌트를 한번에 가지고 오도록 하였다.
이렇게 진행하니 한 줄 코드로 모든 컴포넌트를 가지고 올 수 있어
코드가 깔끔해져 더욱 보기가 좋았다.
✅ 5. 스크롤바에 스타일 주기
맥과 윈도우의 스크롤 모양이 다르다는 것을 이번에 팀원의 화면 공유를 통해 알게되었다. 통일성을 주기 위해 스크롤바에 스타일을 적용할 수 있는 방법을 찾아보았다.
-
::-webkit-scrollbar : 스크롤바 전체
-
::-webkit-scrollbar-thumb : 스크롤 막대
-
::-webkit-scrollbar-track : 스크롤 막대 외부
처음에 그대로 적용하니 적용이 되지 않았는데
&::~~~ 로 입력해주니 적용이 잘 되었다. 스크롤 막대도 너비, 색, 길이 등 원하는대로 만들 수 있어서 새로운 경험이었다.
✅ 6. 반응형 구현
max-width 값을 화면을 움직이며 수정해주었다.
@media screen and (max-width: 810px) { max-width: 100%; grid-template-columns: repeat(4, minmax(0, auto)); }
그 값 안에서 사용자가 편안하게 볼 수 있도록 그리드값도 수정해주었다.
