2021-04-27 (15일차) 높이에 % 주는 방법, vh(viewport height), calc, !important

70강~72강

 

 

- 태그의 높이에 퍼센트가 안 먹는 이유

  : 부모의 속성에 정확한 값이 입력이 안 되어 있기 때문

   → 태그의 부모 body에 확실한 값을 줘야함 (원래 body의 높이는 auto)

  ※ body의 부모는 html (원래 html의 높이는 auto)

  ※ html의 부모는 window(우리가 보는 창)

  ※ window는 딱 우리에게 보이는 창만 window에 속함 (스크롤X)

 

 

높이에 %를 주고 싶으면

상위태그 > body > html 모두에게 height:100%를 줘야함

  ▽

해결책

  ▽

단위 'vh' 이용하기

 

 

- vh (viewport height)

  실제로 보이는 화면의 높이

  1vh=1% (1vh = 1% of Viewport Height)

  Viewport를 기준으로 한 상대적인 size

 

- height:100% 와 height:100vh 의 차이

  100%는 부모 요소를 기준으로 한다.

  100vh는 viewport를 기준으로 한다.

​

- calc()

  이들을 calc()와 결합하면 좋은 시너지를 낼 수 있음

 

- !important

  모든 우선순위를 무시하고 속성값을 적용시킴