HTML์ ๊ธฐ๋ณธ์์๋ค๊ณผ ์๋ฉํฑ ํ๊ทธ๋ฅผ ์ฐ๋ ๋ฐฉ๋ฒ, ๋ฐ์ํ ์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด ๋ณด๋ ์ฐ์ต์ ํ๊ธฐ ์ํด ํด๋ก ์ฝ๋ฉํ์ต๋๋ค!๐
- Header ์์ญ -๋ฐ์ํ
- ์ ์ฒด ๋ฉ๋ด
- ์ปจํ ์ธ ๋ ์ด์์, ์ปจํ ์ธ ํ์ดํ
- ๋ฉ๋ด, ๋ฉ๋ด ๋ฐ์ํ
- ๊ฒ์ํ ํ์ค ํจ๊ณผ, ๋์ค ํจ๊ณผ
- ๋ธ๋ก๊ทธ ์์ญ ๊ณ ํด์๋ ์ด๋ฏธ์ง
- ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋
- ๋ผ์ดํธ ๋ฐ์ค -lightGallery plugin
- ํํฐ ์ด๋ฒคํธ
- ๋น๋์ค
- Side ์ปจํ ์ธ
- Footer ์์ญ
- ์ ๊ธฐ/ํผ์น๊ธฐ ์คํฌ๋ฆฝํธ
- ์ฌ์ด๋ ์ดํํธ - hover effect
- HTML์์
-
CSS์์
- box-shadow ์์ฑ์ inset์ผ๋ก ์ค์ ํ์ฌ mouseover์ ๋ฐฐ๊ฒฝ์์ด ๋ณํ๋ hover effect๋ฅผ ์ค๋ค.
-
ํ์ค ํจ๊ณผ
.ํด๋์ค์ด๋ฆ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
๋์ค ํจ๊ณผ
{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
-
๋์คํ๋ ์ด ํด์๋์ ๋ฐ๋ฅธ ์ด๋ฏธ์ง ํํ
-
img์ sreset ์์ฑ
<img src="img/[email protected]" srcset="img/[email protected] 1x, img/[email protected] 2x, img/[email protected] 3x" alt="์ด๋ฏธ์ง" width="100%" />
-
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ํด์๋์ ๋ฐ๋ผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๊ฒฝ๋ก๋ฅผ ๋ฐ๊ฟ
.blog2 .img_retina { background-image: url('../img/[email protected]'); background-size: cover; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .blog2 .img_retina { background-image: url('../img/[email protected]'); } } @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 3dppx) { .blog2 .img_retina { background-image: url('../img/blog3*@3.jpg'); } }
-
CSS Filter ์์ฑ์ ์ด์ฉํ์ฌ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ํจ๊ณผ๋ฅผ ์ค
-
์นด๋ ๋ค์ง๊ธฐ (3D CSS ์์ฑ)
- perspective: ์์์ ์๊ทผ๊ฐ์ ๋ถ์ฌ (600px)
-
transform-style: preserve-3D => ์์๋ฅผ 3D ๊ณต๊ฐ์ ๋ฐฐ์น
-
backface-visivility: ์์์ ๋ท๋ฉด์ด ์ฌ์ฉ์๋ฅผ ํฅํ ๋ ๋ณด์ฌ์ผ ํ๋์ง ์ง์ (hidden)
-
transform: rotateY() ์์ฑ์ ์ด์ฉํ์ฌ ๋ค์ง๋ ์์ง์์ ๊ตฌํ (0 => 180deg, -180deg => 0)
-
-
JavaScript(jQuery)
-
์ด๋ฏธ์ง ๊ณต์ ํ๊ธฐ
-
facebook : http://www.facebook.com/sharer.php?u={ํ์ด์ง ๋งํฌ}&t={ํ์ด์ง์ ๋ชฉ}
-
ํ์ด์ค๋ถ ์์ด์ฝ์ ํด๋ฆญํ์ ๋
$('.facebook').click(function (e) { e.preventDefault(); window.open( 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600' ); });
-
encodeURIComponent() : ๋ฌธ์์ด์ ์ธ์ฝ๋ฉํ์ฌ URI๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ก
-
-
์ ๊ธฐ/ํผ์น๊ธฐ
$('.btn').click(function (e) { e.preventDefault(); $('.nav').slideToggle(); $('.btn').toggleClass('open'); if ($('.btn').hasClass('open')) { //open์ด ์์ ๋ $('.btn').find('i').attr('class', 'fa fa-angle-up'); } else { //open์ด ์์ ๋ $('.btn').find('i').attr('class', 'fa fa-angle-down'); } });
-