1. 팝업 소개

팝업이란?

• 특정 영역의 위치에,
• 특정 사이즈의 레이어(창)를,
• 특정 시점에 노출

Popup? Modal? Alert?

• Popup = 새창
• Modal = 레이어 팝업
• Alert = 알림 / 시스템 팝업

2. 레이어팝업 + 딤드 배경 제작

• 텍스트가 길어지면 팝업 창이 세로로 길어지도록 처리
  버튼은 하단 고정

• 팝업창 너비 : 300px
  팝업창 높이 : 200px (가변)
  텍스트 여백 : 50px 30px 30px
  버튼 높이 : 50px, 하단 고정
  딤드 배경 : #000, 투명도 30%

1) HTML 실습

<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" name="button" class="btn">예</button>
                    <button type="button" name="button" class="btn no">아니오</button>
                </div>
            </div>
        </div>
    </div>
    <div class="popup_dimmed">
    </div>

2) CSS 실습

@charset "utf-8";

.content {
    height: 5000px;
}

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

/* IE7 이상 대응 */
.popup_layer {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    width: 300px;
    height: 150px;
    padding-bottom: 50px;
    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;
}

.popup_wrap {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

.popup_inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}


.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*/
    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;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.3;
}

3) 정리

팝업 사이즈 고정일 경우

• position: absoulte; | margin 마이너스 값
  margin 값에 대한 추가적인 연산 필요

• position: absolute; | margin: auto;
  margin 값에 대한 추가적 연산이 필요 없음

팝업 사이즈 가변일 경우

• display: inline-block; | vertical-align: middle; | text-align: center;
  빈 태그 혹은 가상 요소(:after)가 하나 더 필요
• display: table | table-cell;
  많은 코드 중첩