class App extends Component {

  render() {

    return (

      <div className="body">

        <Login />

    );

  }

}


이렇게 있는데, 가로 100%, 세로 100%로 크기를 지정하고 싶다면,


쉽게 생각하면


가로 width : 100%


세로 height : 100%


로 하면 될 것 같다. 하지만, 가로는 적용되지만, 세로는 적용되지 않는다.




위에 사진의 경우 아랫쪽 배경이 흰색이라 보이지 않지만, 로그인 폼 부분의 높이만 aqua색이 적용된 것이다.

그렇다면, 어떻게 높이를 전부 바꿀 수 있을까?

HTML이라면, body를 바꾸면 되지만, React에서는 다른 방법이 존재한다.

바로, 단위를 % 말고, 다른 것으로 하면 된다.


여기서 답을 찾았다.


https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573


바로 vh와 vw 단위를 사용하면, 너비값과 높이값을 부모 요소에 맞게 사용할 수 있다. 


vh 요소는 높이값의 100분의 1의 단위입니다. 


예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이다. 즉, 100vh는 브라우저 높이의 전체이다.


이와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다. 따라서, 100vh는 브라우저 너비 전체이다.


즉, 최대 높이값이를 제작할때 100vh로 사용하면 된다.


height를 px등으로 지정하는 것과 달리, 브라우저의 높이가 줄어들거나 늘어나도


vh단위는 1/100 이므로 100vh 설정을 했기 때문에 항상 전체 높이를 잡을 수 있다.


















Posted by sungho88
,