레이아웃 짜기

컴포넌트의 설계 시 어떤 기준으로 나누면 좋을 지

1. 고려해야 할 점 (기능을 수행할 때 어떻게 연결되어있는지)

styled-components로 이미지 url를 들고 올때 상단에 주소를 import해서 가져온다

import logoImg from './img/logo.png';
const Logo = styled.h1`background: no-repeat center / 100% 100% url(${logoImg});`

웹페이지의 전체를 백그라운드로 처리할려고

height: 100% 를 사용해도 먹지 않는다.

해결방법으로 height: 100vh 를 사용했다

하지만 문제점으로 스크롤이 생기는 부분까지 되지 않는다

• 그 이유는 vh의 단위는 보이는 화면을 기준으로 했기 때문에 화면을 넘어서 스크롤이 생긴 부분은 적용되지 않는다
• ⇒ 해결방법으로 height: 130vh 을 줘버림

https://codingmania.tistory.com/348

React에서 component 안에서 div의 height를 최대(100%)로 지정하는 방법