[웹 UI 개발] 팝업 - 2 / 레이어 팝업 중앙 정렬
이전에 만든 레이어 팝업을 중앙 정렬하는 방법을 알아본다.
만들어 놓은 레이어 팝업의 코드는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>레이어 팝업</title>
<link rel="stylesheet" href="css/layer_popup.css">
</head>
<body>
<!--콘텐츠 영역-->
<div class="content">
<div>
<img src="https://i.namu.wiki/i/gfHw0epFUberrBfEwnfYxOkcBSAL6POdji9UmI8Jw2hoW78dSfIeo7UDn3DZb78ZM2Jb8vHnUcRH4p0Kug_Ep5u6Ec3hGedWLOKCl3JzOL1-xmWPHV-wnVLrfSv2A0FojXRKoHx5gEXQ2DfGZmYNSg.webp" alt="식은땀흘리는 페페">
</div>
</div>
<!--레이어 팝업-->
<div class="popup">
<div class="popup_layer">
<div class="text_area">
<strong class="title">팝업 타이틀</strong>
<p class="text">팝업 텍스트 영역</p>
</div>
<div class="button_area">
<button type="button" name="button" class="btn">예</button>
<button type="button" name="button" class="btn no">아니오</button>
</div>
</div>
<div class="popup_dimmed"></div>
</div>
</body>
</html>
@charset "UTF_8";
.popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.popup_layer {
position: relative;
width: 300px;
min-height: 150px;
padding-bottom: 50px;
background-color: #fff;
z-index: 10;
}
.text_area {
padding: 50px 30px 30px;
text-align: center;
}
.button_area {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
}
.button_area::after {
display: block;
content: "";
clear: both;
}
.btn {
float: left;
width: 50%;
height: 100%;
border: 0;
background: pink;
font-size: 15px;
font-weight: bold;
}
.btn.no {
background: lightblue;
}
.popup_dimmed {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.3;
}
팝업 사이즈가 고정일 때
/*IE7 이상 대응*/
.popup_layer {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 150px;
margin: -100px 0 0 -150px;
padding-bottom: 50px;
background-color: #fff;
z-index: 10;
}
/*IE8 이상 대응*/
.popup_layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 300px;
height: 150px;
margin: auto;
padding-bottom: 50px;
background-color: #fff;
z-index: 10;
}팝업 사이즈가 고정일 때는 요소를 absolute로 띄워서 위치를 조절하는 방법을 사용한다.
IE7까지 대응할 경우는 "top: 50%, left: 50%"로 브라우저의 중앙에 팝업의 좌측 상단이 위치하도록 하고, 팝업의 가로, 세로 길이의 절반만큼을 margin으로 설정하여 위치를 조정해준다.
IE8까지 대응할 경우는 "margin: auto;"로 간단하게 중앙 정렬할 수 있다.
margin은 absolute의 top + bottom + height 혹은 left + right + width 값이 함께 있는 요소는 각각 상하를 기준으로 중앙 정렬, 좌우를 기준으로 중앙 정렬해준다.
팝업 사이즈가 가변일 때
.popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
.popup::after {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: "";
}
.popup_layer {
position: relative;
display: inline-block;
vertical-align: middle;
width: 300px;
min-height: 150px;
padding-bottom: 50px;
background-color: #fff;
z-index: 10;
}popup_layer를 inline-block 요소로 만들어 중앙 정렬하는 방법이다.
부모 요소인 popup의 "text-align: center;"로 가로 중앙 정렬을 해주고 popup 요소 안에 빈 요소 혹은 가상 요소를 추가하여 popup_layer와 "vertical: middle;"로 세로 중앙 정렬을 해준다.
이 방법은 빈 요소나 가상 요소가 추가된다는 단점이 있다.
.popup_wrap {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.popup_inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.popup_layer {
position: relative;
display: inline-block;
width: 300px;
min-height: 150px;
padding-bottom: 50px;
background-color: #fff;
z-index: 10;
}popup_layer를 table 내의 요소로 취급해서 중앙 정렬하는 방법이다.
popup_layer를 서로 다른 두 div로 감싸고 그 div들의 display를 각각 table, table-cell로 수정한다.
popup_inner에 "vertical-align: middle;", "text-align: center;" 속성을 추가해서 내부 요소인 popup_layer가 중앙 정렬되도록 한다.
이 방법은 많은 코드가 중첩된다는 단점이 있다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 폼 - 1 / 폼 커스텀 (텍스트 박스) (0) | 2023.03.27 |
|---|---|
| [웹 UI 개발] 폼 - 0 (0) | 2023.03.27 |
| [웹 UI 개발] 팝업 -1 / 레이어 팝업 + 딤드 배경 제작 (0) | 2023.03.27 |
| [웹 UI 개발] 팝업 - 0 (0) | 2023.03.27 |
| [웹 UI 개발] 표 - 4 / 달력 제작 (0) | 2023.03.24 |
