저번 과제에서는 CSS를 만 질 일이 없기도 했고 아침 11시까지 과제를 하다가 하루 종일 잠에 빠져버려 복습을 안 했다. 그래서 이번 과제에서 globalstyle과 theme 사용을 처음 해봤는데 theme는 유지 보수할 때 정말 좋아 보인다. GlobalStyle styled.createGlobalStyle로 글로벌로 쓸 컴포넌트를 만들어 준다. yarn add styled-reset을 이용해 기본적인 글로벌 스타일을 제거하고 위와 같이 코드를 입력해준다. 폰트도 설정할 수 있고, h1, p 값 등의 크기도 조절할 수 있다. index.tsx에 위와 같이 쏵 깔아주면 글로벌 스타일 적용 완성! Theme 예전부터 적용해봐야지 적용해봐야지 하다가 이제야 적용해본다. 이 좋은걸 왜 여태까지... Typ..

grid flex는 1차원으로 조정하는 것이라면, grid는 2차원으로 조정하는 레이아웃 시스템. 보통 전체적인 틀을 grid로, 세부적인 틀을 flex로 잡는 게 좋아 보인다. (header, footer, section 등은 grid로, grid로 잡은 틀 속에 디테일은 flex로) grid container - display: grid; 를 적용하는 grid의 전체 영역. grid item - grid container의 자식 요소. grid track - grid의 행 또는 열. grid cell - grid의 한 칸을 가리키는 말. grid item 하나가 들어가 있는 가상의 공간. grid line - grid 셀을 구분하는 선. grid number - grid line의 각 번호. grid..

display block - 한 줄에 한 개 상자!! (div, p, h1 태그가 기본적으로 block 형태임) inline-block - 한 줄에 여러 개의 상자!! (button, input, select 태그 등) inline - 상품의 크기만큼!! width, height, margin, padding 등 못 바꿈(span, a, em 태그 등) position 태그를 어떻게 위치시킬지 정의 static - 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다. absolute - 절대 좌표와 함께 위치를 지정해 줄 수 있다. relative - 원래 있던 위치를 기준으로 좌표를 지정 fixed - 스크롤과 상관없이 항 상 문서 최 좌측 상단을 기준으로 좌표를..