1번이 스타일 컴포넌트..? 순서가 잘못 되긴 했지만.. 나중에 순서 고치는걸로 하고..

스타일 컴포넌트 사용해서 꾸미기 부분 중 잘 해결이 안나던 부분을 다른 수강생 분께 질문하여 알게 된 부분을 정리했다.

1. 대시보드 컴포넌트

기존에 내가 써서 고민했던 부분

: 카드를 선택하지 않았을 때 보이는 p태그의 "선택된 포켓몬이 없습니다."가 "나만의 포켓몬" 위치는 그대로 위에 두고 아래부분에서 정가운데 오도록 하고 싶었다.

💡 해결한 내용

: p태그 안에 써둔 marginTop을 지우고, SelectedContainer 스타일 컴포넌트 안에 heigh: 100%;, align-items: center;를 추가했더니 바로 적용되었다. 내가 원하던 대로 였다. 계속해서 높이를 px로 주려했는데 100%로 꽉 채우니 적용되었다.

2. Detail 페이지

1) 전체 내용이 세로에서 가운데에 오도록

처음에 내가 코드를 썼을 땐 전체 내용이 가로에서는 가운데로 왔는데, 세로에서는 위에서 머물렀다.

💡 그런데 와..min-height 를 주는데 심지어 계산식을 넣을 수 있다는 것이다.
처음에 min-height: 100vh; 를 줬더니 스크롤이 생기면서 화면을 넘쳐버렸다. 확인해보니 body태그에 margin이 8px 들어있었다.
아래 사진처럼 calc(100vh-16px)를 넣어줬더니 화면에 꽉차면서 가운데로 올 수 있었다.

2) 이미지 크기 키우기

PokemonDetail 스타일컴포넌트에 img만 따로 스타일을 주는데 원하는 크기로 width와 height 값을 넣어줬더니 됐다. 너무나도 간단한 방법! (뭔가 이미지가 깨지는? 느낌인 것 같은데 일단 이대로...🤫)