CSS : width/height 값 헷갈림 방지 (px, %, vh/vw)

 

요소들의 레이아웃을 만들어 나가는 것은 쉬워보이지만 할 때마다 문제가 발생한다.

이것 저것 다 시도 해보다가 얻어걸리는 것으로 넘어가게 된다. 

 

참고하면 좋을 유투브가 있어서 보고 정리해 보았다. 

https://www.youtube.com/watch?v=zBHxp3xKsF0

 

 

화면을 가득 채우고 싶은 요소가 있다면,

그 요소에 height : 100% 주면 화면 세로 부분 전체에 채워질까?

먼저 height와 width값의 기본값을 알아야 한다.

height와 width에 값을 따로 설정하지 않았다면 두 속성의 값은 default값인 auto로 지정된다.

.pig {
  width: auto;
  height: auto;
}

auto값은 브라우저가 그 크기를 계산해준다.

 

display가 block일 때의 width : auto; height : auto;

block요소일 경우 width: auto;는 width: 100%;와 같이 해석 되어 사용 가능한 최대 가로너비를 사용한다.
(=요소의 부모요소 너비 기준으로 가득찬다)

height: auto;는 높이값이 0부터 시작해서 필요한 만큼의 값을 갖도록 해석된다.
(=요소의 자식높이 기준으로 자동 조절된다)

display가 inline일 때

inline요소일 경우 자식요소가 없을 때 width: auto;와 height:auto;는 둘 다 0과 같은데,
inline요소는 크기를 지정할 수 없고 필요한 만큼의 높이와 너비만 갖게 되어있기 때문이다.

 

div의 표현

위의 그림을 background-image로 넣은 div요소를 화면에 가득차게 하려한다.

<div class="image"></div>

.image {
  background-image: url(./swallow.jpg);
 }

 

위의 상태에서는 당연히 width와 height값이 모두 auto이다.
block요소의 특성 때문에 높이에 따로 값을 지정해주지 않은 default값인 경우 자식요소가 없다면 높이가 0이 된다.

text를 추가하였더니 text의 높이 값 만큼 높이가 지정되어 아래처럼 나타난다.

 

높이를 화면에 꽉차게 만들기

div를 화면에 꽉 채워보기 위해

.image {
  background-image: url(./swallow.jpg);
  height: 100%;
 }

이렇게 height:100%값을 주었다.

그러나 결과는 달라지지 않고 그대로 나타난다.
height값을 100%로 준다는 것은 부모요소를 기준으로 100%만큼의 높이를 갖겠다는 것인데,

현재 .image요소의 부모요소는 body요소이므로 body요소의 높이가 화면을 꽉 채우지 않았다는게 된다.

body또한 height값을 따로 지정하지 않았기 때문에 default값인 auto로 되어있으므로 자식요소인 .image요소만큼의 높이만 갖게 된다.

그러므로 최상위 요소인 html에까지 height: 100%;를 설정해야 한다.

html, body {
  height: 100%;
}

.image {
  background-image: url(./swallow.jpg);
  height: 100%;
 }

 

CSS3의 방법으로 화면에 꽉 채우기_vh단위 사용

.image {
  background-image: url(./swallow.jpg);
  height: 100vh;
 }

vh단위는 viewport기준의 height비율이다.
100vh를 하게되면 화면의 높이 100%를 의미한다.

이렇게 하면 상위요소에 일일이 100%의 height를 줄 필요가 없다.

 

 

https://www.youtube.com/watch?v=zBHxp3xKsF0 

https://velog.io/@ursr0706/height100%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC