TIP

CSS 멋진 팝업창을 만들기

doyeon on 2021년 4월 2일

안녕하세요. 퍼블팀 김주임입니다 😎
이번에도 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 필터를 함께 사용해주시면 시선 분산을 어느정도 막을 수 있습니다.

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

 

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;         //최대 높이
}
4번까지 적용 시

 

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
Post a comment

error: 우클릭 허용하지 않습니다