홈앤숍

팝업편집 안내 매뉴얼

팝업을 디자인/코딩하기 위해 필요한 모든 기능이 제공됩니다. 웹빌더 또는 편집창의 에디트 기능을 이용하여 작업할 수도 있고, 로컬에서 작업한 소스를 소스코드 창에 붙여넣을 수도 있습니다. 소스코드 창은 무료제공되는 템플릿 소스를 복사/붙여넣기하기에 최적의 기능을 제공합니다. css와 script 소스 및 링크를 전부 포함 할 수 있습니다. 텍스트와 이미지 수정은 편집창에서 직관적으로 진행하면됩니다.

팝업 편집

리스트

팝업 정렬은 페이지에서 맨위좌측/맨위중앙/맨위우측 등과 같은 위치를 지정합니다. 각각의 팝업에 대해서 지정합니다.

정렬:

팝업 이름을 정하고, 팝업이 노출되는 순서를 지정합니다. 일시적으로 팝업 노출을 중단할 수도 있습니다.

팝업 이름(필수)

순위

사용: 0

마진은 간격을 의미합니다. 톱 마진은 맨위의 간격, 좌마진은 왼쪽 간격 등 입니다. 숫자만 입력하세요. 단위는 px입니다.

톱 마진(필수)

좌 마진(필수)

우 마진(필수)

하단 마진(필수)

팝업에 적용되는 css파일의 링크를 등록합니다. "전체코드" 를 입력하세요!!

팝업에 적용되는 css 코드를 등록합니다. "<style> </style>" 은 제외하고 입력하세요!!

input[id=item-1] + label.label-box {
                left: 0;
            }
            input[id=item-1] + label.label-box .pic-box {
                left: 0;
            }
            label{
                font-size: 13px;
                font-weight: 300;
                line-height: 20px;
                font-family: "Noto Sans KR", sans-serif !important;
                color: #6f6f6f;
            }

button {
                border: none;
                outline: none;
            }

a {
                display: inline-block;
                text-decoration: none;
            }

.pop {  z-index: 9000;  position: fixed; display: flex; }

.pop .popup {
                width: 300px;
                background-color: #ffffff;
                border: 1px solid #364e8f;
            }
            .pop .popup__content-box {
                width: 100%;
                height: 300px;
                display: flex;
                align-items: center;
                flex-direction: column;
                background-color: #ffffff;
            }
            .pop .popup__content-box dl {
                position: relative;
                display: flex;
                flex-direction: column;
                width: 100%;
                padding: 25px;
            }
            .pop .popup__content-box dl dt {
                width: 100%;
                font-size: 16px;
                font-weight: 500;
                line-height: 34px;
                font-family: "Noto Sans KR", sans-serif !important;
                color: #364e8f;
            }

.pop .popup__content-box dl dd {
                margin-top: 10px;
            }
            .pop .popup__content-box dl dd p {
                font-size: 13px;
                font-weight: 300;
                line-height: 20px;
                font-family: "Noto Sans KR", sans-serif !important;
                color: #6f6f6f;
                margin: 5px 0;
            }
            .pop .popup__content-box dl dd p span {
                font-weight: 400;
                color: #c12eb5;
            }
            .pop .popup__content-box a {
                width: 150px;
                height: 30px;
                font-size: 13px;
                font-weight: 300;
                line-height: 30px;
                font-family: "Noto Sans KR", sans-serif !important;
                color: #ffffff;
                text-align: center;
                background-color: #364e8f;
            }
            .pop .popup__bottom-box {
                display: flex;
                width: 100%;
                height: 40px;
                background-color: #ffffff;
                border-top: 1px solid #bbc3da;
            }
            .pop .popup__bottom-box--left {
                width: 70%;
                height: 100%;
                display: flex;
                align-items: center;
                padding-left: 10px;
            }
            .pop .popup__bottom-box--left a {
                font-size: 13px;
                font-weight: 300;
                line-height: 40px;
                font-family: "Noto Sans KR", sans-serif !important;
                color: #2f3033;
            }
            .pop .popup__bottom-box--left span{
                display: flex;
                align-items: center;
            }
            .pop .popup__bottom-box--left span input{
                margin-right: 10px;
            }
            .pop .popup__bottom-box--right {
                width: 30%;
                height: 100%;
            }
            .pop .popup__bottom-box--right a {
                padding-right: 10px;
                text-decoration: none;
                font-size: 13px;
                font-weight: 300;
                line-height: 40px;
                font-family: "Noto Sans KR", sans-serif !important;
                color: #2f3033;
                float: right;
cursor: pointer;
            }

@media (max-width: 575.99px) {
                .pop {
                    display: none !important;
                }
            }

팝업에 적용되는 js 파일의 링크를 등록합니다. "전체코드" 를 입력하세요!!

잘못된 스크립트는 사이트에 심각한 문제를 발생시킬 수 있습니다. 복구에는 오랜 시간이 소요되므로 유의해주세요.

팝업에 적용되는 스크립트 코드를 등록합니다. "<script> </script>" 는 제외하고 입력하세요!!

잘못된 스크립트는 사이트에 심각한 문제를 발생시킬 수 있습니다. 복구에는 오랜 시간이 소요되므로 유의해주세요.

줄 바꿈은 'enter', 줄바꿈하면서 한줄간격을 주려면 'shift+enter' 키를 사용합니다. 소스코드 창 아이콘 " 〈〉 " 소스정렬 소스정렬

button {
                border: none;
                outline: none;
            }

a {
                display: inline-block;
                text-decoration: none;
            }

.pop {  z-index: 9000;  position: fixed; display: flex; }

@media (max-width: 575.99px) {
                .pop {
                    display: none !important;
                }
            }
</style>
<div class="pop">
<div id="pop" class="popup">
<div class="popup__content-box">
<dl>
<dt>데모디자인 안내</dt>
<dd>
<p>상단 매뉴바와 카피라이트 영역은 데모제작의 편의를 위해서 동일한 레이아웃을 사용하는 경우가 많습니다.</p>
<p>다른 데모의 디자인 요소와 교체가능합니다. 또는 새로운 레이아웃을 주문형 데모디자인으로 요청하실 수 있습니다.</p>
</dd>
</dl>
<a target="_blank">자세한 내용보기</a></div>
<div class="popup__bottom-box">
<div class="popup__bottom-box--left"><span id="check" class="btnTodayHide"><input id="chkday" name="chkbox" type="checkbox" value="checkbox"><label for="chkday">오늘 하루동안 보지 않기</label></span></div>
<div class="popup__bottom-box--right"><span id="close" class="btnClose"> <a target="_blank">닫기</a></span></div>
</div>
</div>
</div>

처음에는 에디터백업을 합니다.
이후에는 업데이트 백업만 하시면됩니다.

에디터 백업 업데이트 백업

백업 리스트

백업 날짜

업데이트 날짜

편집

2022-08-02 04:19:38

2023-01-22 17:19:59

보기 삭제 복구