css - 꽉찬 화면 만들고 활용하기

div {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

이렇게 top, bottom, left, right 에 모두 0 을 주게 되면 저 div 는 화면전체를 뒤덮는 효과를 가지게 된다.

(top: 0, left: 0, width : 100%, height : 100% 와 같은효과)

아무튼 이걸 이용해서 어떤 팝업이나 툴팁 같은 요소들이 있다고 할때

그 요소 밖같영역을 클릭했을때 없애는 기능을 구현할때 사용한다.

 

예제)

<div onClick='onClosePop'>
<somePopup id='pop'></somePopup>

function onClosePop(){
    document.querySelector('#pop').style.display = 'none'
}