강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

chohyein94님의 프로필 이미지
chohyein94

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 hover 활용한 실전 퍼블리싱 05(앱 UI 레이어 3D 호버 에니메이션)

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

작성

·

600

1

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

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

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

답변 1

0

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

chohyein94님의 프로필 이미지
chohyein94

작성한 질문수

질문하기