안녕하세요. 퍼블팀 김주임입니다 😎
이번에도 CSS 유익한 코드를 가져봤는데요~!!!!
웹 개발자/ 디자이너라면 로그인이나 배너 등 팝업창을 많이 다루어 보셨을거예요.
그래서 이번 유익한 시간은 바로,
CSS 속성으로 일반 팝업창이 아닌 가독성이 뛰어난 아주 멋진 팝업창을 만들어볼거예요!
CSS가 발전하면서 다른 매체에서는 가능한데
웹 페이지에선 불가능해서 어쩔 수 못 쓰던 기능도 쓸 수 있게 되었습니다.
하지만 현직에 계시는 분들은 오래 전 CSS에 익숙하다 보니 좋은 기능이 있어도
모르고 지나치기가 쉬운 듯 합니다.
자, CSS 속성을 이용한 멋진 팝업을 만들어 볼까요?
첫번째 TIP,
⭕ CSS로 주목도 더 올리는 팝업 만들기
❗ backdrop-filter 속성 사용하기
✔ 주로 많이 사용 되는 팝업 스타일
보통 주로 사용하는 팝업은 반투명한 블랙 background을 둬서 팝업에 좀 더 주목 하게 하려고
합니다. 하지만 여전히 아래에 있는 글자가 많다 보면 시선이 분산되는 것은 어쩔 수 없죠….
광고 등을 유심히 보았다면 일본적으로는 주목해야 할 부분을 제외한 나머지 부분은 흐릿하게
처리하여 컨텐츠를 더 눈에 뜨게 하는 팝업들이 있습니다.
웹 페이지에서는 불가능 했던 동작이였지만 이제는 CSS 만으로 간단하게 처리 할 수 있게 되었죠!!!
그건 바로 background-filter 속성을 사용하여 만듭니다.
✔ background-filter 속성을 이용한 팝업
위의 배경색 엘리먼트에 backdrop-filter: blur(4px)를 추가하면
팝업이 background에 blur 처리가 된 화면을 볼 수 가 있습니다.
backdrop-filter 는 IE를 제외한 최신 브라우저에서 대체로 잘 지원되는 편이며,
위에서 예로 든 blur 외에도 여러 필터를 지원하며 중복 사용도 가능합니다!
간혹 팝업창 밑에 색상이 화려한 사진이 있으면 시선이 분산될 수 도 있는데
이때 grayscale 필터를 함께 사용해주시면 시선 분산을 어느정도 막을 수 있습니다.
blur 적용한 팝업 
필터 중복 적용한 팝업
backdrop-filter를 사용하면 지금까지는 구현하기 어려웠던 더 나은 사용자 경험을 보여줄 수
있습니다. 지원하지 않는 브라우저에서는 그냥 무시될 뿐이라서 오류의 걱정도 없습니다.
사이트에서 팝업창을 보여주고 있다면 위에서 말한 CSS를 한 줄만 추가해봅시다.!!!
두번째 TIP,
⭕ CSS 만으로 반응형 modal 팝업 간단하게 만들기
❗ display flex 활용하기
플러그인이나 라이브러리, 각종 js등을 사용하지 않고 간단하게 css만을 사용하여 만들 수 있습니다.
jquery 가 일부 들어가는데 click 이벤트나 요소를 감추고,
보이게하는 fadeIn(), fadeOut()만 사용합니다.
<div class="container"> //컨테이너
<div class="popup-wrap" id="popup"> //모달을 감쌀 박스
<div class="popup"> //실질적 모달팝업
<div class="popup-head"> //로고 영역
<span class="head-title">BYTHEM</span>
</div>
<div class="popup-body"> //컨텐츠 영역
<div class="body-content">
<div class="body-titlebox">
<h1>Confirm Modal</h1>
</div>
<div class="body-contentbox">
<p> 모달 내용칸 </p>
</div>
</div>
</div>
<div class="popup-foot"> //푸터 버튼 영역
<span class="pop-btn confirm" id="confirm">확인</span>
<span class="pop-btn close" id="close">창 닫기</span>
</div>
</div>
</div>
</div>위 코드가 모달 팝업의 전체 html 입니다.
기본 html 구성과 비슷하게 머리,몸통,다리 영역으루 나누었습니다.
작업 순서
✔ 1. CSS : 모달 팝업을 감쌀 박스의 작성
– display 속성은 팝업을 중앙에 위치 시키기 위해 flex를 사용합니다.
– 버튼 클릭 이벤트를 위해 display:none;을 주고 있지만 처음부터 화면에 뜨게 하려면 flex주시면 됩니다.
.popup-wrap{
background-color:rgba(0,0,0,.3);
//배경색과 투명도로 살짝 어둡지만 투명한 배경
//허공에 붕 떠있는 느낌을 주고 싶으면 안넣어도 무방
justify-content:center; //수평 중앙정렬
align-items:center; //수직 중앙정렬
position:fixed; // 포지션 픽스, 화면이 스크롤되더라도 고정되기 위함
top:0;
left:0;
right:0;
bottom:0; //모든 방향에 0을 주면 화면에 꽉차게 됩니다.
display:none;
//이벤트가 발생할 때 띄우기 위해 숨김
//처음부터 보이게 하는 상황이라면 display:flex;
padding:15px;
//반응형의 경우 padding이 없으면 박스가 화면에 붙어서 안이뻐짐
}
✔ 2. CSS : 모달 팝업의 몸체 작성
– 반응형이기 때문에 가로값(width)은 100%를 잡고, max-width로 최대값을 잡습니다.
– 높이(height)는 내부 요소 크기에 따라가기 때문에 따로 잡지 않습니다.
.popup{
width:100%; //반응형 이기 때문에 가로값은 100%
max-width:400px; //팝업의 최대 크기지정
border-radius:10px; //둥글둥글한 디자인을 위해 각을 없앱니다.
overflow:hidden; //각을 없앴을 때 내부 영역이 튀어나오는걸 방지
background-color:#264db5; //배경색
//팝업이 허공에 떠있는 듯한 느낌을 주기 위한 그림자 효과.
box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3);
}
✔ 3. CSS : 모달팝업 머리부분(로고영역)
– 로고영역은 사이트의 로고이미지나, 텍스트 위치시켜 주시면 됩니다.
.popup-head{
width:100%;
//부모요소를 따라가기 때문에 굳이 가로값을 주지 않아도 되지만 일부 ie에서 인식 못하는 문제가 있음
height:50px; //헤드 영역 높이
display:flex; //로고 이미지나 텍스트를 중앙 정렬하기 위한 flex 및 정렬
align-items:center;
justify-content:center;
}
1,2,3번을 적용 시킨 상태 (어두운 투명배경, 상단로고)
✔ 4. CSS : 모달팝업 몸통부분(contents 영역)
– body영역은 내용에 스크롤이 발생 할 수 있기 때문에 좀 더 세분화 했습니다.
(popup-body 박스안에 body-content)
– 내용은 자유롭게 넣어주시면 됩니다.
– 이미지 팝업을 만들 경우 padding:30px 은 뺴주시면 됩니다.
– 저는 공지사항 형태의 팝업을 만들었기 때문에 제목(body-titlebox)과 내용영역(body-contentbox)이
있지만 하려는 목적에 따라 바꿔 사용하시면 됩니다.
.popup-body{ //몸통
width:100%;
background-color:#ffffff; //컨텐츠 영역의 배경색
}
.body-content{ //몸통 내부 컨텐츠 영역
width:100%;
padding:30px; //좌우에 내용이 붙으면 보기 안좋기 때문에 간격 띄움
}
.body-titlebox{ //컨텐츠 타이틀 영역
text-align:center; //제목 중앙정렬
width:100%;
height:40px;
margin-bottom:10px; //내용과 간격 조정
}
.body-contentbox{ //컨텐츠 내용 영역
word-break:break-word; //단어가 짤리지 않음
overflow-y:auto; //내부요소가 지정한 세로 값보다 클 경우 스크롤 생성
min-height:100px; //최소 높이
max-height:200px; //최대 높이
}
✔ 5. CSS : 모달팝업 다리부분(버튼 영역)
– 2개의 버튼중 가운데 한줄만 줄을 쳐야 하기 때문에 왼쪽버튼에 오른쪽 줄을 쳤습니다.
.popup-foot{ //다리
width:100%;
height:50px;
}
.pop-btn{ //각각의 버튼
display:inline-flex; //한줄로 나열하기 위한 inline속성과 flex속성 혼합
width:50%; //2개 버튼 각각 50% 영역
height:100%; //50px
justify-content:center; //수평정렬
align-items:center; //수직정렬
float:left; //좌측배치
color:#ffffff; //글자색
cursor:pointer; //마우스 포인터 효과
}
.pop-btn.confirm{ //확인버튼
border-right:1px solid #3b5fbf; //오른쪽 줄
}
위의 내용까지 모달의 html & css 코딩이였고,
이제 jquery로 간단한 특정 이벤트만 주면 끝입니다!
❗ jquery 코드 작성하기
– 여기서 중요한 점은 fadeIn(),show() 의 경우 이벤트 해당 박스의 이전 display 속성을 원래대로
돌려준다는 점 입니다.
현재 div#popup 에는 display:none 이 걸려있는데 감춰져 있는 요소를 fadeIn() 으로 노출 시키면
div의 기본 속성인 display:block을 불러옵니다. (그럼 flex로 중앙정렬을 하고 있기 떄문에 UI가 깨집니다)
이를 방지 하기 위해 감춰져있는 요소의 속성을 display:flex로 변경해 준 후 hide()로 다시 숨기고
fadeIn() 으로 다시 노출 시키면 flex 였다가 none 이 되었기 때문에 flex속성을 다시 불러옵니다.
$(function(){
$("#confirm").click(function(){
modalClose(); //모달 닫기 함수 호출
//컨펌 이벤트 처리
});
$("#modal-open").click(function(){
$("#popup").css('display','flex').hide().fadeIn();
//팝업을 flex속성으로 바꿔준 후 hide()로 숨기고 다시 fadeIn()으로 효과
});
$("#close").click(function(){
modalClose(); //모달 닫기 함수 호출
});
function modalClose(){
$("#popup").fadeOut(); //페이드아웃 효과
}
});버튼 이벤트까지 완료하였습니다. 각자 한번 테스트 해보시길 바랍니다 🙂
💬
이렇게 총 2가지의 팝업 스타일에 대해서 알아봤는데요,
첫번째, backdrop-filter 속성 사용하여 주목도 높은 팝업 창 만들기!
두번째, CSS 만으로 모달 팝업창 만들기!
많이 사용 하는 방법들이니 잊지말고 꼭 사용해서 멋진 웹사이트를 만들어봅시다!
참고
https://muzi-muzi.tistory.com/6
https://taegon.kim/archives/10088
0 comments