์ง๋ ๋ฒ ๊ฒ์๊ธ์ A-1 ๊ตฌํํด๋ณด๋ฉด์,
๋ง๋ณด๊ธฐ(๋ผ ์ฐ๊ณ ์ฝ์ง์ด๋ผ๊ณ ์ฝ์)๋ฅผ ํด๋ณด์๋ค ใ
_ใ
๋ชจ๋ ๊ฒฝ์ฐ์ ์๋ฅผ ๋๊ฐ์ด ํด๋ณด๋ ค๊ณ ํ์ผ๋... ์๊ฐ์ด 5์ผ๋ฐ์ ์ ๋จ์์ผ๋ (D,E์ ํ ์ ์ธ)์์ฑ์ผ๋ก ํด๋ณด๋๋ก ํ์...
๊ธฐ๋ณธ ์ธํ
์ค๊ธฐ ์ํ์ ๋ด๊ฐ ํ๋ ํ๋ก์ ํธ๋ ๊ณต๋ถ์๋ ๋ค๋ฅด๊ฒ
์ ํด์ง ๊ท์ฝ์ด ๋ง๊ธฐ ๋๋ฌธ์ ์ผ๋จ ๊ธฐ๋ณธ์ ์ผ๋ก ์์งํ๊ณ ๊ฐ์ผ ํ๋ค.
ํด๋ ์ธํ
๋ฐํํ๋ฉด์ ์ํ์๋ฒํธ๋ก ํด๋๋ฅผ ์์ฑํ๊ณ , ๊ทธ ์์ ํด๋๋ฅผ ๋ง๋ ๋ค.
ํด๋๋ css , images, script ๋ก ๋ง๋ค๊ณ , ๊ฐ์ฅ ๋ฐ๊นฅ์ html ํ์ผ์ ์์ฑํ๋ค.
์ ๊ณต๋๋ ์ด๋ฏธ์ง๋ค์ images ์์ ๋ฃ๊ณ , ์ ์บก์ฒ์ฒ๋ผ ์ ์ด์ฟผ๋ฆฌ, ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ script ํด๋์ ๋ฃ๋๋ค.
์ฌ์ง์ ์์ง๋ง css ํด๋์๋ style.css ํ์ผ์ ๋ง๋ค์ด ๋ฃ์ด์ค๋ค.
HTML
head ๋ถ๋ถ์ ๋ฏธ๋ฆฌ css, js ํ์ผ๋ค์ ๋งํฌํด๋๋๋ค.
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./css/style.css" />
<script src="./script/jquery-3.6.4.js"></script>
<script src="./script/script.js"></script>
<title>์ํ ๋ฒํธ</title>
</head>head ๋ถ๋ถ์ script๋ฅผ ๋ฃ์ ๊ฒฝ์ฐ, html ์์๊ฐ ๋ก๋๋ ๋ค ์คํฌ๋ฆฝํธ๋ฅผ ์๋ํ๋ผ๋ ์ฝ๋๋ ํ์!
$(function(){ //์ฝ๋ })
body ๋ถ๋ถ ์ ์ฒด๋ฅผ ๊ฐ์ธ๋ div ์์ฑ
<div class="wrap">
...
</div>โ๏ธ ๊ทผ๋ฐ B์ ํ์ header๊ฐ ์๋จ์ ๊ฐ๋์ฑ์์ผ ํ๊ธฐ ๋๋ฌธ์,
wrap ์๋ก <header></header>๋ฅผ ๋ง๋ค์ด ์ค๋ค!
CSS
@charset "uft-8" ์ ๊ธฐ๋ณธ ์์ ๋ง์ถฐ ์ฃผ๊ธฐ
@charset "uft-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
body {
background: #ffffff;
color: #333333;
}
.wrap {
width: 1200px;
margin: 0 auto;
}
์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ HTML
index.html
<div class="slideContainer">
<div class="slideWrap">
<div class="slide">
<p>์ฌ๋ผ์ด๋๋ด์ฉ1</p>
<a href="#"><img src="images/slide01.png" alt="์ฌ๋ผ์ด๋1" /></a>
</div>
<div class="slide">
<p>์ฌ๋ผ์ด๋๋ด์ฉ2</p>
<a href="#"><img src="images/slide02.png" alt="์ฌ๋ผ์ด๋2" /></a>
</div>
<div class="slide">
<p>์ฌ๋ผ์ด๋๋ด์ฉ3</p>
<a href="#"><img src="images/slide03.png" alt="์ฌ๋ผ์ด๋3" /></a>
</div>
</div>
</div>๊ฐ๋กํ
css
style.css
.slideContainer {
height: 300px;
overflow: hidden;
}
.slideWrap {
width: 300%;
}
.slide {
position: relative;
float: left;
}
.slide p {
position: absolute;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
color: #fff;
background: #c9b5b5;
border-radius: 50px;
padding: 10px 20px;
z-index: 996;
}script.js
setInterval(function(){
$('.slideWrap').animate({'margin-left':'-100%'},function(){
$('.slide').first().appendTo('.slideWrap')
$('.slideWrap').css({'margin-left':'0%'})
})
},3000)- $(์ ํ์).animate(์คํ์ผ [,์ง์์๊ฐ] [,์๊ฐ๋น์๋ํจ์] [,์ฝ๋ฐฑ ํจ์]);
์ฐธ์กฐ : https://rb.gy/6rpbxd
- $( 'p' ).appendTo( 'aaa' ); p ์์๋ฅผ aaa ์์ ์์ผ๋ก ์ด๋
์ธ๋กํ
CSS
style.css
.slideContainer {
position: relative;
height: 300px;
overflow: hidden;
}
.slideWrap {
position: absolute;
}
.slide {
position: relative;
}
.slide p {
position: absolute;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
color: #fff;
background: #c9b5b5;
border-radius: 50px;
padding: 10px 20px;
}
๊ฐ๋กํ๊ณผ์ ์ฐจ์ด
.slideContainer {
`โ position:relative;`
}
.slideWrap {
`โ width: 300%;`
`โ position: absolute;`
}
.slide {
position: relative;
`โ float: left;`
}script.js
setInterval(function(){
$('.slideWrap').animate({'marginTop':'-300px'}, function(){
$('.slide:first').appendTo('.slideWrap')
$('.slideWrap').css({'marginTop':'0px'})
})
},3000)
ํ์ด๋
style.css
.slideContainer {
height: 300px;
}
.slideWrap {
position: relative;
}
.slide {
position: absolute;
}
.slide p {
position: absolute;
left: 0;
top: 0;
width: 20%;
font-weight: 600;
text-align: center;
color: #000;
background: rgb(218, 204, 250, 0.8);
padding: 10px 20px;
}script.js
$('.slide:gt(0)').hide()
setInterval(function(){
$('.slide:first').fadeOut(1500).next().fadeIn(1500)
$('.slide:first').appendTo('.slideWrap')
},3000):gt()๋ ์ง์ ๋ ์ซ์๋ณด๋ค ์ธ๋ฑ์ค ๋ฒํธ๊ฐ ํฐ ์์๋๋ฅผ ๋ฆฌํด
position ์ ๋ฆฌ
'์๊ฒฉ์ฆ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์น๋์์ธ ๊ธฐ๋ฅ์ฌ 4 - D์ ํ (์ ์ ํ ์ ๋ฆฌ) (0) | 2023.05.19 |
|---|---|
| ์น๋์์ธ ๊ธฐ๋ฅ์ฌ 3 (A~C์ ํ) ๋ฉ๋ด (0) | 2023.05.19 |
| ์น๋์์ธ ๊ธฐ๋ฅ์ฌ ์ค๊ธฐ 1 - ๊ฐ์ก๊ธฐ (A-1) (0) | 2023.05.19 |
