Pure CSS : Layer-popup Auto center box #1
레이어팝업을 CSS만으로 자동 중앙 정렬하기
이번 글에서는 CSS 만으로 레이어팝업 콘텐츠를 가로,세로 중앙정렬하는 방법에 대해 알아봅니다.
일반적으로 레이어팝업을 중앙정렬 시키는 방법은 팝업 콘텐츠에 고정(fixed) 또는 절대(absolute) 위치를 정의하고 left: 50%; top:50%; 를 선언한 후 팝업 콘텐츠 너비,높이값에 따라 스크립트로 너비, 높이의 1/2 값을 margin-left, margin-top 에 음수값으로 정해주는 방법을 많이 사용합니다.
하지만 여기서는 스크립트 제어가 필요없이 그리고 레이어 콘텐츠 너비,높이에 상관없이 중앙 정렬시키는 방법에 대해 알아보도록 하겠습니다.
Pure CSS - layer Center Box
간단하게 레이아웃을 구성하고 레이어팝업에 대한 마크업이 다음과 같이 있다고 가정하겠습니다.
<div id="wrap">
<p>#wrap</p>
<!-- Start : header -->
<div id="header">
<p>#header</p>
</div>
<!-- End : header -->
<!-- container -->
<div id="container">
<p>#container</p>
<!-- snb -->
<div class="snb">
<p>.snb</p>
</div>
<!-- // snb -->
<!-- Start : content -->
<div id="content">
<p>#content</p><br>
<div>
Lorem ipsum dolor sit amet,etur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit tetur adipisicing elit. udiandae? <br>
Lorem ipsum dolor sit tetur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amr adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit ng elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit amet, consectetpisicing elit. Ipsa, repudiandae? <br>
Lorem ipsum dolor sit adae? <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, repudiandae? <br><br>
<a href="#layer" class="btn-layer">레이어 팝업보기</a>
</div>
</div>
<!-- End : content -->
</div>
<!-- // container -->
<!-- Start : footer -->
<div id="footer">
<p>#footer</p>
</div>
<!-- End : footer -->
</div>
<!-- Start : layer-popup content -->
<div id="layer" class="layer-wrap">
<div class="pop-layer">
<div class="pop-container">
<div class="pop-conts">
<!--content //-->
<p class="ctxt mb20">
Thank you.<br>
Your registration was submitted successfully.<br>
Selected invitees will be notified by e-mail on JANUARY 24th.<br><br>
Hope to see you soon!
</p>
<div class="btn-r">
<a href="#" class="btn-layerClose">Close</a>
</div>
<!--// content-->
</div>
</div>
</div>
</div>
<!-- End : layer-popup content -->테스트를 위해 간단한 레이아웃 마크업을 진행했으며 레이아웃용 CSS 는 다음과 같이 구성되어 있습니다.
* {
margin: 0;
padding: 0;
}
/* Define Layout */
#wrap {
width: 900px;
margin: 0 auto;
padding: 10px;
border: 1px solid #bdbdbd;
background-color: #f7f7f7;
}
#wrap p {
font-weight: bold;
}
#header,
#container,
#footer {
padding: 15px;
background-color: #e5e5e5;
border: 1px solid #bfbfbf;
margin-bottom: 10px;
color: #2d2d2d;
font-family:Tahoma;
font-size: 14px;
}
#header {
padding: 10px;
margin-top: 10px;
}
#container:before,
#container:after {
display: table;
content:""
}
#container:after {
clear: both;
}
.snb, #content {
margin-top: 10px;
background-color: #fff;
border: 1px solid #bdbdbd;
text-align: center;
}
.snb {
float: left;
width: 220px;
height: 400px;
}
#content {
float: right;
width: 620px;
padding: 0 10px 10px 10px;
text-align: left;
height: 800px;
}Pure CSS : Layer-popup
/**
* ==========================================================+
* Layer-popup Center Box - http://http://webclub.tistory.com
* Copyright © 2016 Jae Hee Kim
* All rights reserved.
* ==========================================================+
*/
.layer-wrap {
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
.layer-wrap:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -.25em;
}
.pop-layer {
display: inline-block;
vertical-align: middle;
width: 500px;
height: auto;
background-color: #fff;
border: 5px solid #3571B5;
z-index: 10;
font-family:Tahoma;
}
.pop-layer .pop-container {
padding: 20px 25px;
}
.pop-layer .btn-r {
width: 100%;
margin: 10px 0 20px;
padding-top: 10px;
border-top: 1px solid #DDD;
text-align: right;
}
a.btn-layerClose {
display: inline-block;
height: 25px;
padding: 0 14px 0;
border: 1px solid #304a8a;
background-color: #3f5a9d;
font-size: 13px;
color: #fff;
line-height: 25px;
}위의 레이어 팝업 콘텐츠에서 위치를 고정(fixed) 위치를 선언하고 html, body 기준으로 해당 콘텐츠 요소가 꽉 차도록 오프셋 값을 모두 0으로 정의합니다.
프로젝트 상황에 따라 고정위치는 절대위치로 변경하여 사용하셔도 상관없습니다.
그리고 자식요소를 중앙정렬하기 위해 text-align: center; 를 선언합니다.
해당 레이어 팝업이 html, body 요소를 기준으로 해당 콘텐츠는 너비,높이를 확보하게 됩니다.
그리고 가상요소를 이용하여 display: inline-block; height:100%; vertical-align: middle; 을 선언합니다.
그 외의 가상요소에서의 스타일링은 숙지하고 있는 가정하에 계속 설명하도록 하겠습니다.
가상 요소에 인라인 블록을 선언함으로써 높이값을 지정할 수 있도록 하였으며 또한 인라인 블록이나 인라인 요소에 세로 정렬이 적용되기 때문에 이 같은 스타일을 정의한 것입니다.
그리고 부모 .layer-wrap 의 자식 요소인 .pop-layer 를 인라인 블록 요소로 만듦으로서 부모 요소에 정의한 text-align: center; 로 인해 팝업 콘텐츠는 가로 중앙정렬되는 효과를 나타내게 됩니다.
여기서부터 팝업 콘텐츠를 세로 중앙정렬하는 마법이 일어납니다. .pop-layer 요소는 인라인 블록 요소로 선언했기 때문에 가상요소
.pop-layer 요소는 인라인 블록 요소로 선언했습니다. 그리고 가상요소도 또한 인라인 블록 요소입니다.
vertical-align: middle; 속성의 특징 중에 하나가 인접한 인라인이나 인라인 블록요소에 상대적으로 세로 중앙정렬을 하게 되는 속성인데 이점을 이용하는 것입니다.
가상요소는 height: 100%; 면서 vertical-align: middle; 이 정의되어 있기 때문에 html 또는 body 의 높이를 지니고 있습니다.
이 높이를 기준, 즉 인접한 인라인 블록 요소인 .layer-popup 가 vertical-align: middle; 을 선언함으로서 인접한 가상요소에 상대적으로 세로 중앙정렬을 시킬 수 있는 것입니다.
다음의 간단한 스크립트를 적용한 코드를 확인하면서 테스트해 보시기 바랍니다.
Result View
스크립트는 단순히 fadeIn, fadeOut 만 시키고 있습니다.
See the Pen 순수 CSS만으로 레이어 중앙정렬하기 by jaeheekim (@jaehee) on CodePen.
참고로 IE8+, Chrome, FF, Safari, Opera 를 지원합니다.
(IE8 이하인 경우 가상요소를 사용하지 않고 빈 태그를 이용한다면 IE8 이하에서도 사용가능)
Center Image in Box
다음의 테크닉은 일정한 박스내에서 이미지 크기에 따라 중앙정렬시키는 기법입니다.
굳이 이미지가 아니더라도 너비,높이를 가진 박스라면 쉽게 중앙정렬을 할 수 있습니다.
See the Pen 이미지 센터 정렬 by jaeheekim (@jaehee) on CodePen.