💛[부스트코스_웹 UI 개발] 18. 레이어팝업

👾·2021년 2월 1일

UI boostcourse frontend

HTML & CSS

목록 보기

18/20

팝업 소개

웹페이지에서 굉장히 많이 볼 수 있는 UI

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

Popup : 새창. 온전한 새로운 웹페이지
Modal : 레이어 팝업.
Alert : 알림/시스템 팝업. 원래 경고, 알림창을 말하지만 실무에서는 보통 자바스크립트로 띄우는 시스템 팝업을 말한다.

사용 예시

1. 일반 팝업

네이버 뉴스 기사 페이지에서 인쇄하기 버튼을 누르면 완전하게 새로운 창으로 팝업이 뜨게 된다.
이것도 하나의 브라우저이기 때문에 크기를 줄일 수 있고, 위치도 옮길 수 있다.
상단의 페이지 주소를 복사해서 새 탭에서도 열 수 있다.
만약 브라우저 설정에서 팝업 차단하면 팝업은 뜨지 않음

2. Alert 팝업(시스템 팝업)

각자 컴퓨터 환경과 브라우저에 따라서 정해진 디자인으로 뜨는 팝업.
별도로 마크업이나 디자인이 필요하지 않다.

3. 레이어 팝업

원래 있던 콘텐츠에 반투명한 배경으로 깔리고 그 위에 팝업이 뜬다.
상단에 주소창도 없고 옮길 수도 없다.
이 팝업은 온전하게 지금 현재 이 브라우저에 속해있기 때문에 브라우저를 옮겨야지만 옮겨진다. 레이어팝업은 온전히 이 브라우저에 속해있는 마크업 요소일뿐.

이렇게 마크업 요소로 만든 팝업을 Modal, 레이어 팝업이라고 한다.

(Alert는 마크업이 필요 없음.)

일반 팝업 vs 레이어 팝업

일반 팝업
- 새 창으로 열기 때문에 새로운 html과 css파일이 필요
- 팝업 페이지의 고유 주소가 있기 때문에 a 태그로 링크 걸어서 진입하는 방식이 자연스럽다.
- window(화면 모니터 자체) 기준으로 위치를 잡는다.
  (window안에 브라우저가 뜨고, 브라우저 창을 viewport라고 한다.)
- 브라우저 옵션에서 팝업 차단으로 노출을 막을 수 있다.

레이어 팝업
- 숨겨져있던 마크업 요소를 보여주는것
- 현재 웹페이지와 동일한 html과 css파일 사용
- 현재 페이지의 일부 요소를 스크립트로 보여주는것이기 때문에 button 태그를 사용하여 팝업 띄움
- 브라우저 내의 뷰포트 기준으로 위치 잡음
- 스크립트 로딩만 가능하면 노출이 된다.

레이어 팝업

디자인적인 통일성과 사용자에게 노출이 될 확률이 좀 더 높다는 장점으로 요즘에는 레이어 팝업을 좀 더 선호

특히 모바일에서는 새창으로 띄울 경우 PC에 비해서 다시 원래 페이지로 돌아가기 조금 번거롭다. 그래서 모바일 창 안의 브라우저 전체를 뒤덮는 레이어팝업을 종종 사용한다.

레이어 팝업은 팝업 밑으로 반투명한 딤드 배경을 깔아서 팝업 외의 화면의 클릭을 막는다. 어떤 페이지에서는 스크롤 자체를 막는것도 존재한다.

대부분 뷰포트 내에서 중앙정렬이 되도록 처리함.

레이어 팝업 중앙정렬 방법

CSS 속성들 조합

tet-align:center;
인라인 요소를 가로기준으로 중앙정렬
vertical-align:middle;
인라인 요소들을 세로 기준으로 중앙정렬
margin:auto;
블록 요소 중앙정렬
display:table | table-cell;
table안의 table-cell안의 콘텐츠들은 vertical-align:middle;로 자동 정렬됨. 이 기본속성을 이용하는 방법

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

텍스트 영역+하단의 버튼 영역으로 구성

스타일 정보

팝업창 너비 : 300px
팝업창 높이 : 최소 200px (가변)
텍스트가 길어지면 세로로 늘어나도록 가변처리
텍스트 여백 : 50px 30px 30px
버튼 높이 : 50px, 하단 고정
딤드 배경 : #000, 투명도 30%

주요 태그 및 스타일

HTML
div, strong, p, button
CSS
float(float 해제), width, min-height, padding, border, text-align, font-weight, font-size

팝업은 보통 콘텐츠 영역 밖에 만든다.

전체 페이지를 뒤덮어야 되는 컴포넌트이기 때문에 부모에 relative가 있다던지 이런것들에 따라 영향을 받을 수 있다. 그래서 안정적으로 콘텐츠 영역 밖에 팝업 컴포넌트를 넣어서 작업을 하는 편

<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>

.content {
	height: 5000px;
}

.popup {
	position: fixed; /*팝업 전체를 콘텐츠보다 위로 띄움*/
    /*dimmed 영역이 콘텐츠가 길어질때 같이 길어지게 하기 위해 relative대신 fixed 사용. fixed는 뷰포트, 즉 현재 보이는 브라우저 화면 사이즈를 기준으로 하기 때문에 스크롤을 내려도 딤드 레이어가 노출됨*/
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.popup_layer {
	position: relative; /*z-index는 반드시 position:relative 속성 필요*/
	width: 300px;
	min-height: 150px; /*min-height로 되어있어서 텍스트가 길어짐에 따라 높이가 커짐*/
	padding-bottom: 50px; /*텍스트를 온전히 보이게 하기 위해 버튼 부분을 padding으로 밀어줌*/
	background: #fff;
	z-index: 10; /*dimmed보다 z-index 높힘*/
}

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

.btn_area {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	overflow: hidden; /*float 해제*/
}

.btn {
	float: left;
	width: 50%;
	height: 100%;
	font-size: 15px;
	font-weight: bold;
	border: 0;
	background: pink;
    /*button태그의 기본 속성 : box-sizing:border-box;
    따라서 기본적으로 width값 안에 border영역까지 포함됨*/
}

.btn.no {
	background: lightblue;
}

.popup_dimmed {
	position: absolute; /*띄워줌*/
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000;
	opacity: 0.3;
}

2. 레이어팝업 중앙정렬

어떤 요소를 특정 공간 안에서 중앙정렬하는건 레이어 팝업뿐만 아니라 다른 컴포넌트들에서도 많이 사용되니 중요

스타일 정보

팝업 위치 : 뷰포트 기준 중앙 정렬
팝업 사이즈 : 고정/가변
팝업사이즈가 고정/가변인지에 따라 중앙정렬하는 방법이 달라진다.

주요 태그 및 속성

HTML
div
CSS
position, margin, display, vertical-align, text-align, :after

1번 코드에서 수정하여 사용하면 됩니다.

1. 팝업 사이즈 고정인 경우

비교적 중앙정렬하기 쉽다

/* IE7 이상 대응 */
.popup_layer {
	position: absolute; /*위치 옮기기 위해 relative에서 변경*/
    /*전체 뷰포트의 중앙으로 오도록*/
    top: 50%;
    left: 50%;
    
	width: 300px;
	height: 150px;
	padding-bottom: 50px;
    margin: -100px 0 0 -150px; /*음수 margin으로 정중앙으로 당겨줌*/
	background: #fff;
	z-index: 10;
}

/* IE8 이상 대응 */
/*margin auto 사용*/
.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;
}

margin:auto;는 경우에 따라 0으로 처리되기도 한다.

0px로 처리되는 경우
- 상하 margin
- inline, inline-block, float 요소, 혹은 absolute, fixed로 위치가 고정된 요소의 모든 margin -> margin이 0px로 처리됨
auto로 처리되는 경우
- width, 가로값이 있는 요소의 좌우 margin에 적용
  == marign:0 auto;
  (상하 margin은 0px로 처리됨)
- absolute의 1) top+bottom+height 혹은 2) left+right+width값이 함께 있는 경우의 모든 margin
  1) -> 전체화면에서 상하로 중앙정렬
  2) -> 전체화면에서 가로로 중앙정렬

2. 팝업 사이즈 가변인 경우

1) `display:inline-block;` 이용

.popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center; /*부모 요소에 text-align 주어야 안에 있는 자식 요소가 가로 중앙으로 오게됨*/
}

/*vertical-align:middle을 적용하기 위한 가상요소*/
.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;
}

2) `display:table;` , `table-cell;` 이용

div 2개 필요

<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_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;
}

정리

사이즈가 고정일 경우
- position:absoulte; | margin 마이너스 값
  콘텐츠 너비의 반, 높이의 반만큼 margin 마이너스 값으로 top, left로 당겨줌
  margin값에 대한 연산 필요
- position:absoulte; | margin:auto;
  margin값에 대한 연산 필요 없음
사이즈가 가변일 경우
- display:inline-block; | vertical-align:middle; | text-align:center;
  빈 태그 or 가상 요소 하나 필요
- display:table | table-cell;
  많은 코드 중첩 필요

👾

이전 포스트

💛[부스트코스_웹 UI 개발] 17. 표

다음 포스트

💛[부스트코스_웹 UI 개발] 18. 레이어팝업

HTML & CSS

팝업 소개

사용 예시

일반 팝업 vs 레이어 팝업

레이어 팝업

레이어 팝업 중앙정렬 방법

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

스타일 정보

주요 태그 및 스타일

2. 레이어팝업 중앙정렬

스타일 정보

주요 태그 및 속성

1. 팝업 사이즈 고정인 경우

2. 팝업 사이즈 가변인 경우

1) `display:inline-block;` 이용

2) `display:table;` , `table-cell;` 이용

정리

💛[부스트코스_웹 UI 개발] 17. 표

💛[부스트코스_웹 UI 개발] 19. 폼

0개의 댓글

💛[부스트코스_웹 UI 개발] 18. 레이어팝업

HTML & CSS

팝업 소개

Popup 이란?

사용 예시

일반 팝업 vs 레이어 팝업

레이어 팝업

레이어 팝업 중앙정렬 방법

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

스타일 정보

주요 태그 및 스타일

2. 레이어팝업 중앙정렬

스타일 정보

주요 태그 및 속성

1. 팝업 사이즈 고정인 경우

2. 팝업 사이즈 가변인 경우

1) display:inline-block; 이용

2) display:table; , table-cell; 이용

정리

💛[부스트코스_웹 UI 개발] 17. 표

💛[부스트코스_웹 UI 개발] 19. 폼

0개의 댓글

1) `display:inline-block;` 이용

2) `display:table;` , `table-cell;` 이용