2021. 11. 3. 10:33ใHTML + CSS + JS/JS ์๋ฐ์คํฌ๋ฆฝํธ
1. jquery-cookie ํ๋ฌ๊ทธ์ธ
jquery-cookie ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ๋ฉด ๊ฐํธํ๊ฒ ์ฟ ํค๋ฅผ ์์ฑํ๊ณ ์ฟ ํค ๋ง๋ฃ์ผ์ ์ค์ ํ ์ ์๋ค.
โ ์ฟ ํค
์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํ ์ฌ์ฉ์์ ์๋์ ๋ธ๋ผ์ฐ์ ์ ๋ณด๋ฅผ ์ ์ฅํ ์ ์๋ ๊ณต๊ฐ์ ์๋ฏธํ๋ค.
์ฟ ํค๋ ํ๋์ ๋๋ฉ์ธ๋น ์ต๋ 20๊ฐ๊น์ง ์์ฑํ ์ ์๊ณ ์ต๋ 4kb๊น์ง ์ ์ฅํ ์ ์๋ค.
์ฟ ํค๋ฅผ ์ฌ์ฉํ์ฌ '3์ผ๋์ ์ด์ง ์๊ธฐ', '์ต๊ทผ์ ๋ณธ ์ํ' ๋ฑ์ ๊ตฌํํ ์ ์๋ค.
https://cdnjs.com/libraries/jquery-cookie
jquery-cookie - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
A simple, lightweight jQuery plugin for reading, writing and deleting cookies. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests ea
cdnjs.com
์ฌ๊ธฐ์ jquery-cookie ํ๋ฌ๊ทธ์ธ์ ๋ค์ด๋ฐ๋๋ค.
2. jquery-cookie ๋ฉ์๋ ์ฌ์ฉ๋ฒ
$.cookie("์ฟ ํค์ด๋ฆ", "์ฟ ํค๊ฐ", {expire:๋ง๋ฃ์ผ, path: "์ ์ฅ ๊ฒฝ๋ก"});
$.cookie("์ฟ ํค์ด๋ฆ"); -> "์ฟ ํค ์ด๋ฆ"์ผ๋ก ์ ์ฅ๋ ์ฟ ํค์ ๊ฐ์ ๋ฐํํ๋ค.
$.removeCookie("์ฟ ํค ์ด๋ฆ"); -> "์ฟ ํค ์ด๋ฆ"์ผ๋ก ์ ์ฅ๋ ์ฟ ํค๋ฅผ ์ ๊ฑฐํ๋ค.
3์ผ๋์ ์ด ์ฐฝ ์ด์ง ์๊ธฐ๋ฅผ ์ฒดํฌํ๊ณ ๋ซ์ผ๋ฉด ์ฟ ํค๊ฐ ์์ฑ๋์ด 3์ผ๋์ ์ด ํ์ ์ด ์๋ณด์ด๊ฒ ํ๋ค.
๊ทธ๋ฆฌ๊ณ ์ฒดํฌ์ํ๊ณ ๋ซ์ผ๋ฉด ์๋ก๊ณ ์นจํ๋ฉด ํ์ ์ ๋ค์ ๋ณผ ์ ์๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> Plugin </title>
<style>
*{margin: 0;padding: 0;}
body{font-size: 12px;}
input{vertical-align: middle;}
#notice_wrap{
width: 300px;
position: absolute;
left: 30px;
top: 30px;
box-shadow:0 0 8px #000;
}
.closeWrap{
background-color: #000;
color:#fff;
text-align: right;
padding:5px 10px;
}
.closeWrap button{
margin-left: 20px;
cursor:pointer;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
$(function() {
if($.cookie("popup") == "none") {
$("#notice_wrap").hide();
}
var $expChk = $("#expiresChk");
$(".closeBtn").on("click", closePop);
function closePop(){
if($expChk.is(":checked")){
$.cookie("popup", "none", {expires : 3,path:"/"});
}
$("#notice_wrap").fadeOut("fast");
}
});
</script>
</head>
<body>
<div id="notice_wrap">
<img src="images/pic_1.jpg" alt="๊ณต์ง์ฌํญ">
<p class="closeWrap">
<input type="checkbox" name="expiresChk" id="expiresChk">
<label for="expiresChk">3์ผ ๋์ ์ด ์ฐฝ ์ด์ง์๊ธฐ</label>
<button class="closeBtn">๋ซ๊ธฐ</button>
</p>
</div>
</body>
</html>
์ฟ ํค๊ฐ ์์ฑ๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
๋ง์ฝ ๋ค์ ํ์ธํ๊ณ ์ถ๋ค๋ฉด ์ ๊ฑธ ์ง์ฐ๊ณ ๋ค์ ์๋ก๊ณ ์นจํ๋ฉด ํ์ ์ ๋ค์ ํ์ธํ ์ ์๋ค.
'HTML + CSS + JS > JS ์๋ฐ์คํฌ๋ฆฝํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JS + jquery] bxSlider ํ๋ฌ๊ทธ์ธ ์ด์ฉํด์ ๊ฐ๋จํ ๊ฐค๋ฌ๋ฆฌ ๋ง๋ค๊ธฐ (0) | 2021.11.03 |
|---|---|
| [JS + jquery] ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ๋ง๋ค์ด๋ณด๊ธฐ (0) | 2021.11.03 |
| [JS + jquery] bxSlider ํ๋ฌ๊ทธ์ธ (0) | 2021.11.03 |
| [JS + jquery] ์ ์ด์ฟผ๋ฆฌ UI ํ๋ฌ๊ทธ์ธ draggable(), Datepicker() (0) | 2021.11.03 |
| [JS + jquery] ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ (0) | 2021.11.03 |