친절한효자손 취미생활

오늘은 CSS3와 간단한 자바스크립트를 활용해서 전체화면으로 나타나게 되는 팝업창 출력에 대해서 배워보았습니다. 조금 복잡하긴한데 이해하고 나니까 어떻게 돌아가는지 좀 알 것 같습니다. 먼저 HTML 부분부터 살펴보도록 하겠습니다.


    
   
    
    
    
여기를 누르면 전체 팝업이 뜹니다.

본문의 내용을 보시면 크게 두 가지의 div가 존재합니다. 하나는 팝업창이며 다른 하나는 이 팝업창을 띄울 버튼 역할을 하는 div 입니다. 그러면 CSS 스타일시트를 살펴보겠습니다.


@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');

/*RESET*/
* {
    margin: 0;
    padding: 0;
}

body {
    font: 17px 'Nanum Gothic', sans-serif;
}

a {
    text-decoration: none;
    color: #404040;
}

li {
    list-style: none;
}

/*BODY*/

/*팝업창*/
#popup {
    display: none; /*숨기기*/
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
}

#popmenu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 200px;
    text-align: center;
    background: #fff;
}

#popmenu p {
    margin-top: 80px;
}

.exit {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%,0);
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #007AAE;
    cursor: pointer;
}

/*본문내용*/
#contents {
    width: 300px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    color: #fff;
    background: #555;
    cursor: pointer;
}

이렇게 마크업을 할 수 있습니다. id 값이 popup인 div의 속성을 살펴보시면 화면 전체화면에 대한 팝업이므로 해상도에 상관없이 항상 고정값이어야 하기 때문에 position:fixed; 라고 속성을 부여했습니다. 그리고 평상시에는 숨어있어야 하기 때문에 display:none; 으로 입력했습니다. 가로 및 세로 크기는 100% 로 줘야 해상도에 꽉 차게 될 것입니다. reset 부분에 보시면 전체 태그에 대해서 padding 및 margin 을 0으로 줬기 때문에 단 1px의 여백이 없는 상태 입니다.


#popup 안쪽에 내용이 들어가는 div 부분인 #popmenu는 #popup의 정 중앙에 배치되도록 했습니다. 부모요소인 #popup에 position 값이 들어 있으니 position:absolute; 를 부여하고, left, top 값을 각 50%씩 주었습니다. 여기까지 하면 왼쪽 모서리가 정중앙에 배치되게 됩니다. div의 중심점을 중앙으로 오게 하기 위해서 transform: translate(-50%,-50%); 을 부여했습니다. 또는 #popmenu의 가로 및 세로 크기를 알기 때문에 각 margin 값을 -로 넣어줘도 위치가 이동 됩니다. 여기에서 margin을 사용한다면, margin: -100px 0 0 -150px; 또는 margin-top: -100px; margin-left: -150px; 을 넣어도 됩니다.


.exit 라는 클래스명을 부여받은 div는 닫기 버튼입니다. 위치에 대한 설명은 방금 위에서 설명한 #popmenu의 내용과 거의 일치합니다. 여기까지 완료 되셨다면 바로 미리보기 화면을 띄워 보시기 바랍니다.




보시는것처럼 이렇게 출력이 될 것입니다. 하지만 눌러도 변화는 없습니다. 왜냐하면 클릭했을 때의 이벤트 발생에 대한 스크립트를 만들어주지 않았기 때문입니다. 스크립트에 대한 내용은 아래와 같습니다. 여기에서는 내부 스크립트 방식으로 했습니다.



    

아시다시피 제이쿼리(jQuery) 파일이 링크방식으로 연결되어 있거나 파일을 저장해 두셔야 이 스크립트가 작동합니다. 여기에서는 링크로 걸어두었습니다. 클릭 이벤트에 대해서 #contents 라고 하는 id 값을 가진 div를 클릭하게 되면, #popup 이라고 하는 id 값을 가진 div를 fadeIn 방식으로 출력하게 되고, .exit 라고 하는 class 값을 가진 div를 클릭하게 되면 #popup id 값을 가진 div가 fadeOut 한다는 스크립트 내용 입니다.




완성된 모습입니다. 이렇게 만드시면 됩니다. 여기서 추가 설명을 하자면 꼭 닫기 버튼을 눌러서 종료하는것이 아닌, 그냥 아무 화면이나 누르면 팝업창이 닫히게 하는 것 또한 간단하게 수정할 수 있습니다. 아래에서 직접 확인해 보시기 바랍니다.


See the Pen jQuery : Click Event (Full PopUp) by rgy0409 (@rgy0409) on CodePen.

이렇게 완성 되었습니다.


$("#popup").click(function(){
                    $("#popup").fadeOut();
                });

보시는 것 처럼, .exit 대신 #popup을 넣었습니다. 왜냐하면 전체창 형태의 팝업이다보니 현재 화면에 보이는 모든 영역은 #popup 입니다. 그러니 아무곳이나 클릭해도 #popup 내부에 속하기 때문입니다. 이런 내용을 참고하시어 멋진 팝업창을 만들어 보시기 바랍니다. 끝.




"친절한효자손 취미생활" 을 검색!


이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.