강의

멘토링

커뮤니티

Inflearn Community Q&A

chohyein945057's profile image
chohyein945057

asked

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

Practical Publishing 05: Using Pseudo-class hover (App UI Layer 3D Hover Animation)

요소를 중앙으로 배치할 때 높이값 (flex 사용)

Written on

·

598

1

4:57 쯤에 중앙으로 배치할 때,
align-items: center; 를 작동하게 하려면
body값의 height를 줘야 한다는 것 까지는 이해를 했습니다.

그런데 height를 꼭 100vh로 써야하는 이유가 무엇인가요?
100%, 또는 다른 px 값을 사용하면 안되는건지,
100%로 사용하려면 따로 설정해야 하는 것이 있는지 궁금합니다!

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
jqueryHTML/CSS

Answer 1

0

codingworks님의 프로필 이미지
codingworks
Instructor

body에 높이를 100% 주어도 적용이 안됩니다.
부모요소인 html에 높이가 auto이기 때문입니다.
그래서 html에 높이fmf 100%로 하면 body에 높이를 100% 주면 적용됩니다.
그래서 html에 높이fmf 100%로 주지 안고 body의 높이를 100%로 하는 방법이 body에 높이를 100vh로 주는거에요.

chohyein945057's profile image
chohyein945057

asked

Ask a question