์์ธ์์ฒญ
- -
๐ ์์ธ์์ฒญ
๐ ์ฌ์ดํธ๋ช
: ์์ธ์์ฒญ
๐ ์์
๊ธฐ๊ฐ : 3์ผ
๐ ์ฌ์ฉ์ธ์ด : HTML5, CSS3, JQuery
๐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ : Swiper
๐ ๋ถ๋ฅ : ์ ์ํ PC, ํด๋ก ์ฝ๋ฉ
๐ URL : https://codenablog.github.io/Seoul-cityhall/
โจPOINT
โ๏ธ ์๋ฉํฑ์น์ ์ ์ํ๋ฉฐ ์์ฑ
โ๏ธ swiper custum
๐ก ๋ ์ด์์
์์ธ์์ฒญ ์ฌ์ดํธ๋ class: common-inner๋ก ์ ์ฒด width๊ฐ๋ง ์ก์์ฃผ์๋ค.
๊ทธ๋ฆฌ๊ณ section๋ง๋ค ๋ค๋ฅธ inner๊ฐ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์น์ ๋ค์ ๋ฌถ์์ inner1 ,inner2…๋ฑ์ผ๋ก ํด๋์ค ๋ช ์ ์ฃผ์๋ค.
์ ์ด๋ฏธ์ง ์ฒ๋ผ 3๊ฐ์ section์ ์ ์๋์ padding๊ฐ์ ๋ฃ์ด์ฃผ์ด์ผ ํ ๋๋ฅผ ์ํด section์ ๋ฌถ์ด์ฃผ๋ inner๋ฅผ ๋ ํ๋ ๋ง๋ ๊ฒ์ด๋ค.
๐ ์น ์ ๊ทผ์ฑ
1. skip nav ํ์ฉํ๊ธฐ (๋ณธ๋ฌธ ๋ฐ๋ก๊ฐ๊ธฐ)
๐ Markup
<div class="skip-nav">
<a href="#contents">๋ณธ๋ฌธ๋ด์ฉ๋ฐ๋ก๊ฐ๊ธฐ</a>
</div>
<header class="header">
</header>
<main class="main" id="contents">
</main>
๐ CSS
.skip-nav{
position: relative;
z-index: 3000;
}
.skip-nav a{
position: absolute;
top: -30px;
left: 0;
width: 138px;
height: 30px;
border: 1px solid #4ec53d;
background: #333;
text-align: center;
}
.skip-nav a:active,
.skip-nav a:focus{
text-outline: 0;
text-decoration: none;
z-index: 1000;
}
2. ํ๋จ ๋ฉ๋ด tab์ผ๋ก ์ด๋ (keyUP, keyDowna)
ํญ์ ์ฌ์ฉํ์ฌ ์ด๋ํ๋ ์ฅ์ ์ธ๋ค์ ํธ์์ฑ์ ์ํด tab์ด sub item ๋๊น์ง ๊ฐ๋ฉด ์๋์ผ๋ก ์ฐฝ์ด ๋ซํ์ผ ํ๋ค.
sub-item์ ์ฒซ๋ฒ์งธ์ ๋งจ ๋ง์ง๋ง ์์์์๋ง ๋์์ด ๋๊ธฐ ๋๋ฌธ์ ํด๋์ค ์ง์ ์ :first-chlid์ last-child๋ฅผ ์ฌ์ฉํ๋ค.
๐ ๊ธฐ๋ณธ Animation
$('.sc-relrate .sub-list li:first-child').keydown(function(e){
});
$('.sc-relrate .sub-list li:last-child').keydown(function(e){
});
โญ keyCode์ด์ฉํ๊ธฐ
ํค๋ณด๋๋ชจ๋ ์ํ์ ์ซ์๋ก ๊ฐ์ด ํ ๋น ๋์ด์๋ค. ์ด keyCode๋ฅผ ๊ฐ์ง๊ณ ์๋ฅผ๋ค๋ฉด ๊ฒ์์ ๋ง๋๋ ๊ฐ๋ฐ์๋ค์ ์์ง์์ ์ ์ดํ๊ฒ ๋๋๋ฐ
์ฌ๊ธฐ์ tab์ ๋ฒํธ์ธ 9์ ์ฌ์ฉํ์ฌ item์์ tab, shift tabํค๋ฅผ๋๋ ์๋ sub-list์ฐฝ์ด ๋ซํ๋ ์ฝ๋๋ฅผ ๊ตฌ์ฑํ๊ณ ๋ง๋ฌด๋ฆฌํ์๋ค.
๐ Animation
$('.sc-relate .sub-list li:first-child').keydown(function(e){ // sub-li์ ์ฒซ๋ฒ์งธ ์์
key = e.keyCode;
if(key === 9 && e.shiftKey){ // keyCord๊ฐ 9์ shiftํค ์ผ๋ (tab + shift)
$('.relate-btn').removeClass('on');
$('.sub-area').slideUp();
}
});
$('.sc-relate .sub-list li:last-child').keydown(function(e){// sub-li์ ๋ง์ง๋ง ์์
if(key === 9 && !e.shiftKey){ // keyCord๊ฐ 9์ด๊ณ shiftํค๋ ์๋๋ (tab)
$('.relate-btn').removeClass('on');
$('.sub-area').slideUp();
}
});
๐ Option
์์ฑ value๊ฐ์ผ๋ก ์ฃผ์ ์ด๋ํ๊ธฐ
๐ Markup
<div class="len-area">
<select name="select" class="len-selcet">
<option class="en" value="http://english.seoul.go.kr/?SSid=101-01">ENGLISH</option>
<option class="ja" value="http://japanese.seoul.go.kr/?SSid=101-02">ๆฅๆฌ่ช</option>
<option class="ch1" value="http://chinese.seoul.go.kr/?SSid=101-04">็ฎไฝไธญๆ</option>
<option class="ch2" value="http://tchinese.seoul.go.kr/?SSid=101-03">็นไฝไธญๆ</option>
<option class="ww" value="http://world.seoul.go.kr/">WorldWide</option>
</select>
<input class="go" type="button" value="GO">
</div>
๐ swiper
โญ swiper์ html๊ธฐ๋ณธ ๊ตฌ์กฐ
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
</div>
< ํ์ ํด๋์ค ์์ >
์ด ์ธ๊ฐ์ ํด๋์ค๋ง ์๋ค๋ฉด ์ค์์ดํผ๋ฅผ ๋ง๋๋๋ฐ ๋ฌธ์ ๊ฐ ์๋ค!
" swiper mySwiper(์์ ์ง์ ๊ฐ๋ฅ) "
" swiper-wrapper "
" swiper-slide "
โญ swiper ์ต์
slidePerView : ํ๋ฉด์ ํ๋ฒ์ ๋ณด์ฌ์ง ์ฌ๋ผ์ด๋์ ๊ฐ์
spaceBetween : ์ฌ๋ผ์ด๋ ์ฌ์ด ๊ฐ๊ฒฉ
loop : ์ฌ๋ผ์ด๋ ๋ง์ง๋ง์์ ๋์
- ture : ๋ฌดํ ๋ฃจํ
- false : ๋ง์ง๋ง ์ฌ๋ผ์ด๋์์ ๋ฉ์ถค
pagination : ์ฌ๋ผ์ด๋ ํ์ด์ง
pagination: {
el: ".swiper-pagination",
clickable: true,
},
- bullets : ํ๋ ์
- progressbar : /๊ฐ ์๋ ์ซ์ (๋ถ์)
- fraction :
- scrollbar : ์คํฌ๋กค ๋ฐ
- custom
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
๐ Swiper targeting
๊ด๊ณ ์ ์นดํ ๊ณ ๋ฆฌ๊ฐ 1-4๋ฒ์ ์ฃผ์๋ด์ค, 5~12๋ ์๋ฏผ์ฐธ์ฌ์ ํด๋น๋๋ค.
- ‘์นดํ ๊ณ ๋ฆฌ’๋ฅผ ํด๋ฆญํ์๋ ํด๋น๋๋ ‘๊ด๊ณ ์ด๋ฏธ์ง’๋ก ์ด๋์ ํด์ผํ๋ค.
- ‘์ค์์ดํผ’ ๋๋ฉด์ ์ผ์ชฝ์ ‘์นดํ ๊ณ ๋ฆฌ’๋ ๋ฐ๋์ด์ผ ํ๋ค.
1. ‘์ฌ๋ผ์ด๋ ์นดํ ๊ณ ๋ฆฌ’ ํด๋ฆญ ์ ํด๋น๋๋ ์ด๋ฏธ์ง๋ก ์ด๋
๐ Markup
<section class="sc-mainslide">
<div class="group-tab">
<!-- 1. ์ค์์ดํผ ์นดํ
๊ณ ๋ฆฌ -->
<button href="" class="tab news active">
<i class="ico-news"></i>
<em class="title" >์ฃผ์๋ด์ค</em>
</button>
<button href="" class="tab citizen">
<i class="ico-citizen"></i>
<em class="title">์๋ฏผ์ฐธ์ฌ</em>
</button>
</div>
</section>
๐ Animation
$('.sc-mainslide .group-tab .tab').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
์ด์ ๋ ํด๋ฆญํ ํญ๋ถ๋ถ๋ง ์ ํ์ด ๋๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
2. ‘์ฌ๋ผ์ด๋ ์ด๋ฏธ์ง’๊ฐ ๋์ด๊ฐ๋ฉด์ ํด๋น๋๋ ์นดํ ๊ณ ๋ฆฌ๋ฅผ ์๋ ์ ํ
โญ slideTo ์ฌ์ฉํ๊ธฐ
"์ฌ๋ผ์ด๋ ์นดํ ๊ณ ๋ฆฌ๋ฅผ ํด๋ฆญํ์๋ ํด๋น๋๋ ์ฌ๋ผ์ด๋๋ก ์ด๋ํ๊ธฐ"์์ ํต์ฌ์ slideTo()์ด๋ค. (swiper์์ ์ ๊ณต๋๋ ๋ช ๋ น์ด)
๋๋ html์ data-tab์ผ๋ก ์์๋ฅผ ๋ฏธ๋ฆฌ ์์ฑํด ๋๊ณ data ๊ฐ์ ์ซ์ ๊ฐ ์์ผ๋ก ๋ถ๋ฌ์ค๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ค.
๐ Animation
$('.sc-mainslide .group-tab .tab').click(function(){
index = $(this).data('tab');
$(this).addClass('active').siblings().removeClass('active');
mainswiper.slideTo(index
});
on:{
"slideChange":(function(){
if (this.realIndex >= 3) {
$('.sc-mainslide .group-tab .tab.citizen').addClass('active').siblings().removeClass('active');;
} else {
$('.sc-mainslide .group-tab .tab.news').addClass('active').siblings().removeClass('active');;
}
})
}
'Code Review' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์ฌ๋ฆฌ๋ธ์ ์จ๋ผ์ธ๋ชฐ (์ ์ํ PC, Mobile) (1) | 2024.01.31 |
---|---|
์ํฐํ๋ผ์ด์ฆ๋ธ๋ก์ฒด์ธ (0) | 2024.01.10 |
๋ค์ฐ์คํผ์ค (0) | 2023.09.19 |
NAVER Careers (0) | 2023.02.25 |
์์คํ ๊ณต๊ฐ ๊ฐ์ฌํฉ๋๋ค