웹 UI 개발

들어가기 전에

팝업과 딤드레이어를 완성하셨나요?

이번 실습에서는 팝업 사이즈가 고정일 경우와 가변일 경우로 나누어, 각 상황에 맞게 중앙 정렬하는 방법에 대해 살펴보도록 하겠습니다.

제작하기

기본 HTML, CSS

<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>레이어 팝업</title>
<link rel="stylesheet" type="text/css" href="layer_popup.css">
</head>
<body>
<div class="content">
<!-- 콘텐츠 -->
</div>
<div class="popup">
	<div class="popup_layer">
		<div class="text_area">
			<strong class="title">팝업 타이틀</strong>
			<p class="text">팝업 텍스트 영역</p>
		</div>
		<div class="btn_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>

.content {
	height: 5000px;
}

.popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.popup_layer {
	position: relative;
	width: 300px;
	min-height: 150px;
	padding-bottom: 50px;
	background: #fff;
	z-index: 10;
}

.text_area {
	padding: 50px 30px 30px;
	text-align: center
}

.btn_area {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	overflow: hidden;
}

.btn {
	float: left;
	width: 50%;
	height: 100%;
	font-size: 15px;
	font-weight: bold;
	border: 0;
	background: pink;
}

.btn.no {
	background: lightblue;
}

.popup_dimmed {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000;
	opacity: 0.3;
}

위 코드를 기본으로 하여 조금씩 수정하도록 하겠습니다.

1. 팝업 사이즈 고정

/* IE7 이상 대응 */
.popup_layer {
	position: absolute;
    top: 50%;
    left: 50%;
	width: 300px;
	height: 150px;
	padding-bottom: 50px;
    margin: -100px 0 0 -150px; 
	background: #fff;
	z-index: 10;
}

/* IE8 이상 대응 */
.popup_layer {
	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	width: 300px;
	height: 150px;
	padding-bottom: 50px;
    margin: auto; 
	background: #fff;
	z-index: 10;
}

팝업 사이즈가 고정일 경우에는 position: absolute;로 요소를 띄워서 margin 으로 위치를 조절하는 방법을 사용합니다.

IE7까지 대응할 경우에는 팝업 크기만큼 마이너스 마진으로 위치를 옮겨주고, IE8 이상 대응할 경우에는 margin: auto; 를 사용하여 보다 쉽게 중앙 정렬할 수 있습니다.

margin: auto;

margin의 top, left, right, bottom 모두 auto로 적용할 경우, margin: auto; 로 축약하여 사용할 수 있습니다. 하지만 경우에 따라 auto는 0으로 처리되기도 합니다.

0으로 처리되는 경우
- 상하 margin
- inline, float 요소, 혹은 absolute, fixed로 위치가 고정된 요소의 모든 margin
auto로 처리되는 경우
- width가 있는 요소의 좌우 margin
- absolute의 top + bottom + height 혹은 left + right + width 값이 함께 있는 요소의 모든 margin

2. 팝업 사이즈 가변

display: inline-block; 이용

.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: #fff;
	z-index: 10;
}

.popup_layer를 inline-block 요소로 만들어 .popup의 text-align: center로 가로 중앙 정렬을 합니다. 그리고 .popup 요소 안에 빈 요소 혹은 가상요소를 추가하여 .popup_layer와 vertical-align: middle; 로 세로 중앙정렬을 합니다.

display: table;과 table-cell; 이용

<div class="popup">
		<div class="popup_wrap">
			<div class="popup_inner">
				<!-- 팝업 영역 -->
				<div class="popup_layer">
					<div class="text_area">
						<strong class="title">팝업 타이틀</strong>
						<p class="text">팝업 텍스트 영역</p>
					</div>
					<div class="btn_area">
						<button type="button" class="btn">예</button>
						<button type="button" class="btn no">아니오</button>
					</div>
				</div>
				<!-- // 팝업 영역 -->
			</div>
		</div>
		<div class="popup_dimmed"></div>
	</div>

팝업 요소인 .popup_layer를 감싸는 두개의 DIV가 추가로 필요합니다.

. 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: #fff;
	z-index: 10;
}

추가한 요소에 각각 display: table;과 display: table-cell;을 적용하고, .popup_layer를 inline-block 요소로 변경합니다. 그리고 그 부모인 .popup_inner에 vertical-align과 text-align를 적용해서 중앙 절렬을 합니다.

참고 링크

[LECTURE] 5) 속성-position : edwith
https://www.edwith.org: 들어가기 전에 요소의 레이아웃을 설정하는 대표적인 속성은 position 속성입니다. position은 요소의 위치를 원하는 곳으로 이동할 수 있게 합니다. position을 사용... - 남동샹

[LECTURE] 8) 속성-margin : edwith
https://www.edwith.org: 들어가기 전에 박스모델 강의에서 margin은 border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역이라고 배웠습니다. 즉, 이 말은 다른 요소와의 간격을 만들 수 있다는 ... - 남동샹

[LECTURE] 1) 속성-display : edwith
https://www.edwith.org: 들어가기 전에 모든 요소는 자기가 기본적으로 가지고 있는 display 값이 있습니다. 그리고 그 값에 따라 블록 레벨, 인라인 레벨 등 렌더링 박스의 유형이 결정됩니다. disp... - 남동샹

웹 UI 개발

3) 레이어팝업 중앙정렬-2

수식 입력도움말

웹 UI 개발

comment

수식 입력도움말