์ปค๋ฒ์ ์ต์
์ ์ถ๊ฐํ์ ์์ ์ ๋ง์ด ํด์ ๋ช ๋ฒ์ ์ธ์ง......
ํฌ๋กฌ ์ต์ ํ
๋ฐ์ํ
- ์นดํผ๋ผ์ดํธ ์ ๊ฑฐ, ์์ ๊ธ์ง
- ์ด๋ฏธ์ง ํ์ผ๊ณผ ์์ค ํด๋น ์คํจ ์ธ์ ๋ค๋ฅธ ๊ณณ์ ์ฌ์ฉํ์ง ๋ง์ธ์
- ์์ O ์ฌ๋ฐฐํฌ,๊ณต์ X
๊พธ๋ฏธ๊ธฐ - ์คํจ ํธ์ง - ๊ธ ๋ชฉ๋ก ํํ : ๋ชฉ๋ก+๋ด์ฉ or ๋ด์ฉ
๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ์ผ - ์ฌ์ฉํ์ง ์์ต๋๋ค.
๊พธ๋ฏธ๊ธฐ - ์คํจ ํธ์ง - ๊ธฐ๋ณธ ์ค์ - ๊ธ ๋ชฉ๋ก ๊ธ ์ 3์ ๋ฐฐ์(3, 6, 9 ๋ฑ)
์ฝํ
์ธ - ์ค์ - ๊ฐ๋กํญ 368px
ํฌ์ธํธ ์ปฌ๋ฌ
- โ #8EA6B4
ํ
์คํธ ๋ธ๋ก๊ทธ
-
๋ชจ๋ฐ์ผ ๋ฒ์ ํ
์คํธ
- http://troy.labs.daum.net/
๋์์ธ ์ฐธ๊ณ
- https://codepen.io/mandycodestoo/pen/gBPoPe
(์ด๊ฑฐ ๋ณด๊ณ ๊ตฌ์์ ํ๊ธด ํ๋๋ฐ ๋๋ฌด ๋ฌ๋ผ์ง....^^;)
์ปค๋ฒ, ์ต์
์ปค๋ฒ๋ฅผ ์ฌ์ฉํ ๊ฑฐ๋ฉด ํ ํ๋ฉด ๊พธ๋ฏธ๊ธฐ์์ ์ปค๋ฒ๋ฅผ ์ผ์ฃผ์
์ผ ๋ผ์ ํธ์ํฐ ์์ ฏ์ ์ปค๋ฒ ์ ์ผ๋ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค (์ต์
์ผ๋ก ๋ฃ์์)
-์ปค๋ฒ
1. ์ฌ๋ผ์ด๋
์ฌ๋ผ์ด๋ - ์์ ๋๋ฅธ ํ ์
๋ ฅํ ๊ธ ๋ชฉ๋ก - ์ ๊ธ ์ถ๊ฐ ๋๋ฅด๋ฉด ์ด๋ ๊ฒ ๋จ๋๋ฐ ๊ทธ๋ฅ ์ฌ๋ผ์ด๋์ ๋ฃ๊ณ ์ถ์ ์ด๋ฏธ์ง ์
๋ก๋ํ๋ฉด ๋ฉ๋๋ค ์ ๊ธ์ ์ฌ๋ฌ๊ฐ ์ถ๊ฐํ๋ฉด ์ฌ์ง์ด ์ฌ๋ฌ๊ฐ ๋จ๋ ๊ฑฐ์์,, ์ฐธ ์ฝ์ฃ ,,? ๊ทธ๋ฅ ์ฌ์ง๋ง ์
๋ก๋ํ๋ฉด ์ฌ๋ผ์ด๋ ๋จ
2. ๊ณต์ง
๊ณต์ง์ฌํญ - ์์ ๋๋ฅธ ํ ์
๋ ฅํ ๊ธ ๋ชฉ๋ก - ์ ๊ธ ์ถ๊ฐ ๋๋ฅด๋ฉด ์ด๋ ๊ฒ ๋จ๋๋ฐ ๋ด์ฉ ๋ถ๋ถ์ ์
๋ ฅํ๋ฉด ๋ฉ๋๋ค
์ด๋ ๊ฒ ๋ด์ฉ์ด ๋์ต๋๋ค. html๋ ์ ์ฉ๋ผ์ ์ฝ๋ฉํ๋ฏ์ด ํด๋ ์ ์์ ์ผ๋ก ์ ์ฉ์ด ๋ฉ๋๋น
sns๋ ์ต์
์์ ์
๋ ฅํด์ผ ๋ผ์ ์
๋ ฅ ์ ํ๋ฉด ์ ๋น๋๋ค
3. ๊ฐค๋ฌ๋ฆฌ
๊ฐค๋ฌ๋ฆฌ - ์์ ๋๋ฅด๋ฉด ์ด๋ ๊ฒ ๋จ๋๋ฐ ์นดํ
๊ณ ๋ฆฌ ์ ๋ถ๋ถ๋ง ์ํ๋ ์นดํ
๊ณ ๋ฆฌ๋ก ์์ ํ๋ฉด ๋ฉ๋๋ค. ์ ์ฒด ๊ธ์ ์ํ๋ฉด ๊ทธ๋ฅ ๋ฌ๋ ๋ผ์ ๊ทผ๋ฐ ๊ธ ์๋ ๋น์จ์ 4๊ฐ์ ๋ง๊ฒ ํด๋จ๊ธฐ ๋๋ฌธ์ 4๊ฐ ์ด์์ผ๋ก ์ค์ ํ๋ฉด ์ด์ํ ๊ฑฐ์์
๊ฐค๋ฌ๋ฆฌ๋ฅผ ์ฌ๋ฌ๊ฐ ๋ฃ๊ณ ์ถ์ผ๋ฉด ์ปค๋ฒ ์์ดํ
์ถ๊ฐํ๋ฉด ๋ฉ๋๋ค
์ปค๋ฒ ์์ดํ
์์ ํ๊ณ ์ ์ฅ ๋ฒํผ ํ ๋ฒ๋ง ๋๋ฅด๋ฉด ์ ์ฅ์ด ์ ๋ผ์ ์ ์ฅ ๋ฒํผ ๋ฐฐ๊ฒฝ์ด ์ฃผํฉ์์ด๋ฉด ์ ์ฅ์ด ์ ๋๋ค๋ ๋ป์ด๋ ํ ๋ฒ ๋ ๋๋ฌ์ฃผ์ธ์
-์ต์
์ต์
๋ญ๊ฐ ๋ง์ง๋ง ์ด๋ ต์ง ์์์,,
1. ์ปค๋ฒ ์ฌ์ฉ ์ฌ๋ถ
๋ง ๊ทธ๋๋ก ์ปค๋ฒ ์ฌ์ฉ ์ฌ๋ถ๋ฅผ ํ์ธํ๋ ๊ฑฐ์์. ์ปค๋ฒ ์ฌ์ฉํ ๋๋ง ์ผ์ฃผ์๋ฉด ๋ผ์. ๊ผญ ์ฌ์ฉํ ๋๋ง ์ผ์ฃผ์
์ผ ๋ผ์
์ปค๋ฒ ์ฌ์ฉ ์ ํ๋ ๊ธฐ์ค
๊ป์ ๋
์ผฐ์ ๋
์ด๋ ๊ฒ ์ ์ฉ์ด ๋๋๊น ๊ผญ ํ์ธํด์ฃผ์ธ์
2. ๊ณต์ง ๋๋ค์ ํ์ ์ฌ๋ถ
์ผฐ์ ๋
๊ป์ ๋
๋๋ค์์ ๋ฐ๊พธ๋ ค๋ฉด ๊ธฐ๋ณธ ์ ๋ณด์์ ๋ฐ๊พธ์๋ฉด ๋ผ์
3. ์คํ ๋ฆฌ ๊ธฐ๋ฅ ์ฌ์ฉ ์ฌ๋ถ
์ฌ์ด๋๋ฐ ํ๋กํ ์ฌ์ง์ ๋๋ฅด๋ฉด ์ธ์คํ๊ทธ๋จ ์คํ ๋ฆฌ๋ ๋น์ทํ ํ์
์ฐฝ์ด ๋จ๋๋ฐ ๊ทธ ๊ธฐ๋ฅ ์ฌ์ฉ ์ฌ๋ถ๋ฅผ ํ์ธํ๋ ๊ฑฐ์์ ์ฌ์ฉํ์ง ์์ ๋ ๋๋ฉด ๋จ์ง ์์ต๋๋ค.
4. ํธ์ํฐ ์์ ฏ ์ฌ์ฉ ์ฌ๋ถ
ํธ์ํฐ ์์ ฏ ์ฌ์ฉํ ๊ฑฐ๋ฉด ์ผ์ฃผ์๋ฉด ๋๊ณ ์๋๋ฉด ๊บผ์ฃผ์ธ์ ์์ ํ์ ์ ํ์๋ฏ์ด ๊ธฐ๋ณธ์ ๊ธฐ์์ฒญ ๊ณ์ ์ธ๋ฐ ๋ณธ์ธ ๊ณ์ ์ผ๋ก ํ๋ ค๋ฉด ์ต์
์ ํธ์ํฐ ์์ด๋๋ฅผ ์
๋ ฅํด์ฃผ์๋ฉด ๋ฉ๋๋ค(@ ์ ์ธ)
5. ํธ์ํฐ ์์ด๋ ~ ๋ฉ์ผ
์ด ๋ถ๋ถ์ ์
๋ ฅํ๋ฉด ์ปค๋ฒ ๊ณต์ง์ฌํญ์ ๋น๋๋ค ํธ์ํฐ ์ ์ธ ๊ณต์ง์ฌํญ ์ฌ์ฉํ์ง ์์ผ๋ฉด ์
๋ ฅํ์ง ์์๋ ๋ผ์
6. ์คํ ๋ฆฌ ๋๋ค์
์
๋ ฅ์ ํ๋ฉด ์ ๋นจ๊ฐ ๋ฐ์ค ๋ถ๋ถ์ ์ ์ฉ์ด ๋ฉ๋๋ค.
์ํ๋ ๋๋ค์์ ์
๋ ฅํด์ฃผ์ธ์.
7. ์คํ ๋ฆฌ ์๊ฐ, ์ฌ๋ผ์ด๋ ์๊ฐ
์คํ ๋ฆฌ ์๊ฐ : ์๋ฅผ ๋ค์ด 7์ ์
๋ ฅํ๋ฉด ์คํ ๋ฆฌ ํ์
์ฐฝ์ด 7์ด ํ์ ๋ซํ์.
์ฌ๋ผ์ด๋ ์๊ฐ : ์๋ฅผ ๋ค์ด 7์ ์
๋ ฅํ๋ฉด ์ฌ์ง์ด 7์ด ํ์ ๋ค๋ฅธ ์ฌ์ง์ผ๋ก ๋์ด๊ฐ๋๋ค.
7์ด ์ด๋ ๊ฒ ์
๋ ฅํ์๋ฉด ์ ๋ ์ ๋๊ณ ๊ทธ๋ฅ ์ซ์๋ง ์
๋ ฅํด์ฃผ์ธ์. ์ด ๋จ์๋๊น 1๋ถ โ 60 ์ด๋ ๊ฒ ์
๋ ฅํด์ฃผ์๋ฉด ๋ฉ๋๋ค.
8. ํ๋กํ ์ด๋ฏธ์ง
์ฌ์ด๋๋ฐ, ์คํ ๋ฆฌ ์ ํ๋กํ ์ฌ์ง์ ์ ์ฉ์ด ๋ฉ๋๋ค ์ด์ ๋ฒ๊ฑฐ๋กญ๊ฒ html ์์ ์ ํ์
๋ ๋ฉ๋๋ค..........!
๋ฐ๋์ ์ ์ฌ๊ฐํ์ ์ฌ์ง์ ์
๋ก๋ํด์ฃผ์ธ์!
9. ์คํ ๋ฆฌ ์ด๋ฏธ์ง
์
๋ก๋ํ๋ฉด ์ด๋ ๊ฒ ์ฌ์ง์ด ๋น๋๋ค. ๋น์จ์ ์์ ํ์ ์ ์ด๋์ด์
10. ๊ฐค๋ฌ๋ฆฌํ ๊ธฐ๋ณธ ์ด๋ฏธ์ง
๋
ธ์ด๋ฏธ์ง๋ผ๊ณ ์๊ฐํ์๋ฉด ๋ผ์. ์
๋ก๋ํ์ง ์์ผ๋ฉด images ํด๋ ์ noimg ํ์ผ์ด ๋น๋๋ค. ๊ทธ ํ์ผ์ ์ฌ์ฉํ๊ณ ์ถ์ผ์๋ฉด ๊ตณ์ด ์
๋ก๋ x
๊ธฐ์กด 19์คํจ๋ณด๋ค ์์ ํ๊ธฐ ์ฝ๊ฒ ์ต์
์ ๋ฃ์์ด์ ์ ์ฒด์ ์ผ๋ก ์คํจ์ ๊ฐ์์์ง ์๋ ์ด์ ์ต์
๋ง ์ ํ์ฉํ๋ฉด ์์ํ๊ฒ ์์ ํ ์ ์๋ต๋๋ค....,, ๋ค์ ์คํจ์ ํฌ์ธํธ ์ปฌ๋ฌ๋ ์ต์
์ผ๋ก ๋ฃ๋๋ก,,,,
์์ํ ์์ ํ
html์์ category ์ฐพ์ ํ ์์ ํ๋ฉด ๋จ.
๋์ด๊ฐ ํ์ ๋ผ์์ผ๋ฏ๋ก 7๊ฐ ์ด์์ ๋น์ถ
๊พธ๋ฏธ๊ธฐ - ์ฌ์ด๋๋ฐ ์ฌ๊ธฐ์ ์์ ํ ์ ์์
html ํ๋จ ์คํฌ๋ฆฝํธ ์์
๋ ์ถ๊ฐํ๊ณ ์ถ์ผ๋ฉด || ptn == '/category/์นดํ
๊ณ ๋ฆฌ๋ช
' ์ถ๊ฐ
์นดํ
๊ณ ๋ฆฌ๋ช
์ ํ๊ธ & ํน๋ฌธ ๋ค์ด๊ฐ๋ฉด
(์คํจ ์ ์ฉ ํ) ํด๋น ์นดํ
๊ณ ๋ฆฌ ์ฐํด๋ฆญ - ๋งํฌ ๋ณต์ฌ
http://shore24-test2.tistory.com/category/%EA%B8%80%EB%AA%A9%EB%A1%9D
์ฃผ์๊ฐ ์ด๋ ๊ฒ ๋์ค๋๋ฐ category/ ์ด ๋ค์ ์ฝ๋๋ง ๋ณต์ฌํ๋ฉด ๋จ
%EA%B8%80%EB%AA%A9%EB%A1%9D
์ด ๋ถ๋ถ๋ง
ํ๋กํ ์ฌ์ง์ ๋ฌด์กฐ๊ฑด ์ ์ฌ๊ฐํ์ผ๋ก ์ ์ฉํด์ฃผ์ธ์
์คํ ๋ฆฌ
350x500
๋ชจ๋ฐ์ผ์
๊ฐ๋ก ์ธ๋ก 100%
(๋น์จ์ ๋ฐ๋ผ ์ฌ์ง์ด ์๋ฆผ)
์ฌ๋ผ์ด๋
384x200
๋ชจ๋ฐ์ผ์
๊ฐ๋ก100%, ์ธ๋ก 150px
(๋น์จ์ ๋ฐ๋ผ ์ฌ์ง์ด ์๋ฆผ)
๊ธฐ๋ณธ ์ค์ ์ ๊ธฐ์์ฒญ ๊ณ์ ์ผ๋ก ํด๋๋๋ฐ ๋นํฉํ์ง ๋ง์๊ณ ์ต์
์ ์์ด๋ ์
๋ ฅํด์ฃผ์ธ์(@ ์ ์ธ)
์ด๋ฌ๋ฉด ๊ณต์ง์๋ ์์ด๋๊ฐ ๋จ๋๋ฐ ๊ทธ๊ฒ ์ซ๋ค๋ฉด
css์ .n-twitter { display: none; } ์ด๊ฑฐ ์ถ๊ฐํ๋ฉด ๋จ
(๊ณต์ง์ฌํญ sns๋ ์
๋ ฅ ์ ํ๋ฉด ์ ๋ธ)
์ ๊ฐ ์คํ์ ํด๋ณด๊ธด ํ๋๋ฐ ๋์์์ด๋ ์ฌ์ง์ ๋์์ ๋ฃ๋ ๊ฑด ๋ถ๊ฐ๋ฅํ ๊ฒ ๊ฐ๋๋ผ๊ตฌ์.... ๊ทธ๋์ ์คํฌ๋ฆฝํธ ๋ด์ฉ์ ์์ ํด์ผ ๋ฉ๋๋ค
html ํ๋จ์ ๋ณด๋ฉด owl ์ด์ฉ๊ตฌ~ ์คํฌ๋ฆฝํธ๊ฐ ์์
auto ๋ค์ด๊ฐ๋ ๊ฑฐ ๋ค ์ง์ฐ๊ณ
merge:true,
center:true,
video:true
์ด๊ฑฐ ๋ฃ์ด์ฃผ์ธ์ ๊ทธ๋ฆฌ๊ณ
<cover>์ด ๋ถ๋ถ์ ์ฐพ์์ ๊ทธ ์์ ์๋ owl์ ์ฐพ์์ฃผ์ธ์
<div class="item" style="background:url(<s_cover_item_thumbnail></s_cover_item_thumbnail>)"></div>
์ด ๋ถ๋ถ์
<div class="item"><a class="owl-video" href=""></a></div>
์ด๋ ๊ฒ ์์ ํ๋ฉด ๋ฉ๋๋ค
ํ ํ๋ฉด ๊พธ๋ฏธ๊ธฐ - ์ฌ๋ผ์ด๋ - ์์ ๋๋ฅด๊ณ ์ ๊ธ ์ถ๊ฐํ ๋ ์ฃผ์์ ์ ํ๋ธ ์ฃผ์ ๋ฃ์ผ๋ฉด ๋ฉ๋๋ค
์ฌ์ ๋ฒํผ ๋ฃ๊ณ ์ถ์ผ๋ฉด
์ด๊ฑฐ ํ์ผ ์ฒจ๋ถํ๊ณ
css์ .owl-carousel .owl-video-play-icon {
background: url(./images/owl.video.play.png) no-repeat !important;
}
์ด๊ฑฐ ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋น
html์์ ์ปจํธ๋กค+f๋ก sns๋ฅผ ์ฐพ์ ๋ค์ <a href="~~"></a> ์ฌ๊ธฐ์ target="_blank" ์ด๊ฑธ ์ถ๊ฐํ๋ค.
<a href="~~" target="_blank"></a> ์ด๋ ๊ฒ
css์์ @media all and (max-width: 550px) ์ฐพ์ ํ ๊ดํธ ์์ ์๋ .paging a i๋ฅผ ์ฐพ์์ opacity ๋ถ๋ถ์ ์ง์ด๋ค ๊ทธ๋ฆฌ๊ณ .no-more-prev, .no-more-next ์ฌ๊ธฐ์ display: none; ์ด๊ฑธ display: none !important; ์ด๋ ๊ฒ ์์ ํ๋ค
์คํ ๋ฆฌ ๊ธฐ๋ฅ์ ๊ทธ๋ฅ ์๊ฐ์ ํ ์๋ ํ์
์ฐฝ์
๋๋ค..(์๋) ์ง์ง ์ธ์คํ ์คํ ๋ฆฌ๋ ๋ง์ด ๋ฌ๋ผ์
์ฌ๋งํ ๊ฑฐ ์ต์
์ผ๋ก ๋ฃ์๊ธฐ ๋๋ฌธ์ ์์ ํ๊ธฐ ์ฌ์ธ ๊ฑฐ์์
์ปฌ๋ฌ๋ css ์๋จ์ ๋ชจ์๋์ผ๋ ๊ทธ๊ฑฐ ์์ ํ๋ฉด ๋ฉ๋๋น
๊ฒ์ํ๋ฉด ๋์ค๋ ๊ฐ๋จํ ์ง๋ฌธ์ ๋ต๋ณํ์ง ์๊ฒ ์ต๋๋ค ์ค๋ฅ๋.... ํด๊ฒฐ ๊ฐ๋ฅํ ๊ฒ๋ง.............. ํด๊ฒฐํ ์ ์์ด์... (์ผ๋งค์)