On.

CSS

1) grid안에 img 꽉 채우는 방법

✔️ 100vw

const Container = styled.div`
  display: grid

  & > .img {
  width: 100vw
  }
`

2) content 빙글빙글 돌리기 권법!

const Content = styled.div`
  transform: rotate(숫자deg)
`

3) medium 쿼리를 사용하지 않고, 반응형 구현

✔️ 여전히 어려움ㅎ
✔️ 이번 스프린트에서 느낀점이라고 하면, width/height는 padding으로, Element의 position은 top,bottom,left,right로 적절히 반응형을 구현할 수 있다는 점이다.
✔️ 문득 갑자기 반응형이 무얼까....하고 고민이 들어서 살짝 찌끄려보잨ㅋㅋ
내가 원하는 컴포넌트를 화면 아래에서 약 12px, 왼쪽에서 200px 떨어진 곳에 위치시키고 싶다! 근데 이걸 화면이 작든,,,,크든,,,,똑같이 화면 아래 12px, 왼쪽 200px에 두고 싶은 것을 반응형이라고 하는것 같다!ㅋㅋㅋㅋㅋ

4) CSS 수정 Tip! (크롬 디버거)

✔️ CSS 수정할 곳이 생김 (특히 display, position, z-index 등등 위치 관련ㅎ)
✔️ 크롬 디버거를 킨다.
✔️ 고칠 곳에 해당하는 Element를 찾는다.
✔️ 해당 부분에 무엇을 고쳐야 하는지 정확히 판단하자
✔️ padding을 고쳐야할지, margin을 좀 줘야할지,,,정확히 property로 판단하도록 하자 (길이를 손봐야할지,,,위치를 손봐야할지,,,등의 판단은 정확하지 못함! 길이든 위치든 바꾸는 방법이 너무 다양함ㅎㅎ css색깋ㅎㅎㅎ)

5) 중앙 맞추기

const Container = styled.div`
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
`

✔️ 이 외에도 컴포넌트를 중앙에 위치시키는 방법은 다양하다!

Off.

프론트와 백을 넘나드는 리드 개발자가 되는 그날까지 🔥🔥🔥