CSS, viewport / margin / height / width / vh , vw

viewport 를 알아보기 이전에 블럭 레벨 요소 와 % 단위의 특성을 한번 더 확인하고 가자.

 

블럭 레벨 요소는 높이는 내부컨텐트에 의해 결정되나 , 너비는 수평영역 전체를 차지.

% 는 부모 요소를 기준으로 부모 요소의 컨텐트 영역 내에서 상대적 백분율 적용.

 

p태그는 블럭 레벨 요소이다.

부모요소에 별도의 높이가 결정되지 않는 이상, p 태그의 높이에 대한 100% 지정은 

부모 요소내에서 그 크기가 상대적으로 결정되는 % 단위의 특성과 내부 컨텐트의 크기에 의하여 

높이가 결정되는 body 와 html등의 블럭 요소 특성이 서로 상쇄되어 의미 없는 높이 지정에 불과하다.

      p{
            height: 100%; /*바보 코딩*/
        }

 

부모의 컨텐트 영역 내에서 상대적 비율이 적용되는 % 단위의 특성으로 인해

p태그의 부모인 body 의 높이에 100% 적용하고 ,

다시 root 요소인 html 태그의 높이에 100% 비율을 연쇄적으로 적용함으로서

html 태그의 부모가 되는 viewport 영역 높이 전체를 차지하게 된다.

        body {
            height: 100%;
            margin: 0;
        }

        :root {
            height: 100%;
        }

 

viewport 란 , 웹페이지가 장치나 플랫폼에 따라 브라우저를 통해 화면에 표시되는 디스플레이 영역.
브라우저 영역은 스크롤 바 영역까지 모두 포함한다.
단 , body 의 영역은 스크롤 바 영역을 포함하지 않음의 주의할 것.

 

vh 단위
vw 단위

vh 단위 : viewport의 높이에 대한 백분율.

vw 단위 : viewport의 너비에 대한 백분율.

      p {
          background-color: gray;

            /*
        블럭요소 p 태그로 브라우저 화면 전체를 채우기 위해
        p 태그에 브라우저에서 기본적으로 지정되는 상/하 마진 삭제.
      */
            margin: 0; 
            width:100vw; 
            height: 100vh; 
        }

 

body 는 별도의 크기를 설정하지 않는 이상 스크롤 바를 제외한 뷰 포트 영역 내에서 그 크기가 결정됨.

브라우저에 기본적으로 지정되는 마진으로 인해 기본적으로 viewport 영역보다는 작을 수 밖에 없는 것이 일반적.

따라서 , p 태그에 대한 100vw 100vh 브라우저 디스플레이 영역 전체의 너비와 높이를 영역으로 할당함으로서,

부모가 되는 body 태그 영역보다 영역이 더 커지는 현상으로 인해 화면 영역을 벗어나게 되고,

이는 수평과 수직에 대한 스크롤 바가 생성되는 문제점이 야기 됨.

 

블럭 요소에 대한 너비 100vw 지정은 지양하자.

어차피 수평 전체를 차지하는 요소니까 ^^

 

body 태그에 대한 마진을 삭제함으로 body와 p 태그의 크기를 viewport 크기로 일치시키면 

화면 전체 다 차지하는 화면 구성이 가능함.

 

margin . padding에 대한 백분율 적용

백분율은 부모 요소에 대한 비율로 결정됨.

주의할 부분은 부모요소의 높이가 아닌 너비에 대한 백분율로 적용됨의 주의

부모가 500px의 width 값을 가지고 , 

10% margin 값을 준다면 , 

50px의 margin 이 생김을 확인 할 수 있다.

padding 과 margin 의 차이점을 사진을 보며 확인하자.