css
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: cornsilk; }
li { list-style: none; }
.wrap {
max-width: 1080px;
min-width: 700px;
margin: 100px auto;
}
.list {}
.list li {
float: left;
width: 25%;
height: 200px;
padding: 6px;
}
.list li img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pop {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
display: none;
justify-content: center;
align-items: center;
}
.pop section {
position: relative;
padding: 50px;
background: #fff;
}
.pop section .pop_img {
max-height: 70vh;
}
.pop section .closeBtn {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
border-radius: 50%;
width: 50px;
height: 50px;
background: steelblue;
color: #fff;
text-decoration: none;
font-size: 30px;
text-align: center;
line-height: 40px;
}
.pop p {
text-align: center;
margin-top: 20px;
}
.pop p button {
border: none;
padding: 5px 10px;
cursor: pointer;
}
.pop.active { display: flex; }
html
<div class="wrap">
<h2>Modal PopUp</h2>
<ul class="list">
<li><img src="../img/pic1.jpg" alt=""></li>
<li><img src="../img/pic2.jpg" alt=""></li>
<li><img src="../img/pic3.jpg" alt=""></li>
<li><img src="../img/pic4.jpg" alt=""></li>
<li><img src="../img/pic5.jpg" alt=""></li>
<li><img src="../img/pic6.jpg" alt=""></li>
<li><img src="../img/pic7.jpg" alt=""></li>
<li><img src="../img/pic8.jpg" alt=""></li>
<li><img src="../img/pic9.jpg" alt=""></li>
</ul>
</div>
<div class="pop">
<section>
<img src="../img/pic1.jpg" alt="" class="pop_img">
<a href="#" class="closeBtn">x</a>
<p>
<button class="prev">< μ΄μ </button>
<button class="next">λ€μ></button>
</p>
</section>
</div>
js
const elList = document.querySelectorAll(".list li img"); // μΈλ€μΌ μ΄λ―Έμ§
const elPop = document.querySelector(".pop") // νμ
μ°½
const elClose = document.querySelector(".closeBtn") // λ«κΈ° λ²νΌ(νμ
μ)
const elPopImg = document.querySelector(".pop_img") // ν° μ΄λ―Έμ§(νμ
μ)
const elBtns = document.querySelector(".pop p") // λ²νΌλ€μ λΆλͺ¨ p(νμ
)
let elTotalImg = elList.length;
let num = 0; // μ΄λ―Έμ§ μμλ₯Ό λνλΌ λ³μ
// μΈλ€μΌ μ΄λ―Έμ§λ₯Ό λλ₯΄λ©΄ νμ
μ°½ λ°μ
elList.forEach(function(item, index){ // index : parameterλ‘ λͺ λ²μ§Έ μ ννλμ§ μμμ¬ μ μμ
item.onclick = function(){
elPop.classList.add("active");
elPopImg.src = item.src;
num = index; // λͺ λ²μ§Έ μμ΄ν
μ λλ λμ§ μμμμ μ μλ³μ numμ λμ
}
});
// νμ
μ°½ λ«κΈ°
elClose.onclick = function(e){
e.preventDefault();
elPop.classList.remove("active");
};
// μ΄μ , λ€μ λ²νΌ
elBtns.onclick = function(e){
if(e.target.classList.contains("prev")) { // eκ° λ³΄λ΄μ£Όλ μ 보 μ€ classListλ§
if (num == 0) { // 무ν루ν
num = elTotalImg;
}
num = num - 1;
} else {
// if (elTotalImg - 1) {
// num = -1;
// }
// num++;
if (num != (elTotalImg - 1)) { // numμ΄ 8μ΄ μλλλ§ 1μΆκ°
num++;
} else {
num = 0;
}
}
console.log("νμ¬ num : ", num);
elPopImg.src = elList[num].src;
};
css
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: #d3d3d3;
}
h1 { font-weight: normal; }
.banner { background: #fff; }
.banner div {
position: relative;
max-width: 1000px;
margin: auto;
height: 80px;
}
.banner span {
font-size: 3em; /* 16px * 3 */
line-height: 80px;
font-weight: bold;
}
.banner img {
height: 60px;
}
.banner a {
position: absolute;
top: 30px;
right: 0;
}
main {
display: table; /* λΆλͺ¨ μμ */
width: 100%;
background: #818181;
}
main > div {
display: table-cell; /* μμ μμ */
height: 600px;
}
main > div > h1 {
font-size: 1px;
opacity: 0;
color: #fff;
text-align: center;
}
footer { padding: 30px 0; }
footer div {
max-width: 1000px;
margin: auto;
text-align: right;
}
footer small {
color: #fff;
font-size: 0.8em;
}
html
<div class="banner">
<div>
<img src="./img/logo.png" alt="">
<span>JUST DO IT.</span>
<a href="#">λ«κΈ° X</a>
</div>
</div>
<main>
<div>
<h1>Practice jQuery</h1>
</div>
</main>
<footer>
<div><small>jQuery μ°μ΅ νμ΄μ§ μ
λλ€.</small></div>
</footer>
js
// $(document).ready(function () {});
$(function () {
// $("main h1").css({ fontSize: 150, opacity: 1 }); // μ λλ©μ΄μ
μμ΄ ν λ²μ λ³κ²½
$("main h1").animate({ fontSize: 150, opacity: 1, color: "red", "font-size": 150 }, 2000, "linear"); // μ λλ©μ΄μ
ν¨κ³Ό μ μ©
/*
A.animate({ key: value,... }, μκ°, easing)
- μμ κ΄λ ¨ μμ±μ μ μ©β
- css style μμ±λ μ μ©λ¨(fontSize = "font-size")
- easing : swing / linear
*/
$(".banner a").click(function () {
$(".banner").animate({ height: 0, opacity: 0 }, 500);
// $(".banner").slideUp(500); // μμ λμΌνκ² λμ
});
});
css
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background: #d3d3d3;
}
h1 { font-weight: normal; }
.banner { background: #fff; }
.banner div {
position: relative;
max-width: 1000px;
margin: auto;
height: 80px;
}
.banner span {
font-size: 3em; /* 16px * 3 */
line-height: 80px;
font-weight: bold;
}
.banner img {
height: 60px;
}
.banner a {
position: absolute;
top: 30px;
right: 0;
}
main {
display: table; /* λΆλͺ¨ μμ */
width: 100%;
background: #818181;
}
main > div {
display: table-cell; /* μμ μμ */
height: 600px;
}
.b1, .b2 {
width: 150px;
height: 150px;
margin: 50px;
}
.b1 { background: powderblue; }
.b2 { background: thistle; }
footer { padding: 30px 0; }
footer div {
max-width: 1000px;
margin: auto;
text-align: right;
}
footer small {
color: #fff;
font-size: 0.8em;
}
html
<div class="banner">
<div>
<img src="./img/logo.png" alt="">
<span>JUST DO IT.</span>
<a href="#">λ«κΈ° X</a>
</div>
</div>
<main>
<div>
<div class="b1"></div>
<div class="b2"></div>
</div>
</main>
<footer>
<div><small>jQuery μ°μ΅ νμ΄μ§ μ
λλ€.</small></div>
</footer>
js
// $(document).ready(function () {});
$(function () {
$(".banner a").click(function () {
$(".banner").animate({ height: 0, opacity: 0 }, 500);
// $(".banner").slideUp(500); // μμ λμΌνκ² λμ
});
$(".b1").mouseover(function () {
$(this).animate({ "margin-left": "1000px" }, 2000, "swing", function () {
$(this).animate({ marginLeft: 50 }, 300);
});
});
$(".b2")
.mouseover(function () {
$(this).animate({ marginLeft: "+=100px" }, 300, "swing");
})
.click(function () {
$(this).animate({ marginLeft: "50px" }, 100, "swing");
});
// λ©μλ μ²΄μΈ - μ νμκ° κ°μ κ²½μ° λ§¨ μ νλ²λ§ μ κ³ .μΌλ‘ μ°κ²°
});
/*
A.animate({ key: value,... }, μκ°, easing, μ½λ°±ν¨μ)
- μμ κ΄λ ¨ μμ±μ μ μ©β
- css style μμ±λ μ μ©λ¨(fontSize = "font-size")
- easing : swing / linear
*/
μμ 1
μμ 2
μμΉμ΄λ