[ 꾸미는 원숭이 ] vh와 display block으로 인해 위 흰줄 남는것

예쁘게 꾸며 보아오

 

 

 

 

 

 

css에서 

 

 

vh란

 

100vh 할떄 vh란 화면 비율이다 보고 있는 화면을 기준으로 얼마 줄꺼야? 라는 것 즉 100은 화면을 기준으로 100%를 준다는 것

.App {
    background-color: #eee;
    height: 100vh;
}

하지만 이렇게 하게 되면

 

요상하게 위가 저렇게 된다 저러는 이유는 display 가 blok 으로 자동으로 잡혀있기 때문

 

 

위에 부분이 남게 되는데 콘솔창을 열어서 보면 자체적으로 display 가 block 으로 되어 있기 때문이다

 

그래서 저것을 display : flex; 나 display : inline-flex; 로 해주면 꽈악 채워준다

 

참고로 50vw 할때 vw는 w=width다 즉 넓이다

 

그리고 margin 을 사용할 때 margin: '16px' 이렇게 주게 되면 상하좌우 전부다 margin 이 먹게 되는데

 

margin: '16px 0px' 이렇게 주게 되면 상하가 16px 좌우가 0px이렇게 먹게 된다