[Front-end๐ฅ] Adobe ๋ฉ์ธ ํ์ด์ง ํด๋ก !
1210~1212 : ๋ชจ๋ํ
1213~1218 : ๋ฉ์ธ ํ์ด์ง ๋งํฌ์
, JavaScript
1219~1220 : JavaScript ๋ชป ๋ถ์ธ ๊ฒ, ๋ฏธ๋์ด์ฟผ๋ฆฌ (4๋จ๊ณ)
1. ์ฌ์ดํธ ๋ถ์
๋งํฌ์
์ ํ๊ธฐ ์ ์ ๊ฐ๋จํ๊ฒ ์ฌ์ดํธ๋ฅผ ๋ถ์ํด ๋ณด์๋ค.
์ฌ์ดํธ๊ฐ ๋๋ฌด ๊ธธ์ด์ ์์ ๊ธ์จ๋.. ์กฐ๊ธ ์๋ค.
2. ๋งํฌ์
1. ๋ชจ๋ํ!!
์ด๋๋น๋.. ์ ๋ง ๋ฉ๋ด๊ฐ ๋ง์๋ค.
- ๋ฉ๋ด ์ ๊ธฐ ํผ์น๊ธฐ ๋ฒํผ
- ์ผ์ชฝ ๋ถ๋ถ ์ ๋ชฉ ๋์ ๋งํฌ๊ฐ ๋ค์ด๊ฐ ul / ์ค๋ฅธ์ชฝ ์ ๋ชฉ์ด ์๋ ul
- ๋งจ ์์ ์ ์ฒด ๋๋น๋ฅผ ์ฐจ์งํ๋ ์น์
- ์นด๋ (์นดํ ๊ณ ๋ฆฌ ์์ / ์์)
- footer ๋ฉ๋ด
์ฌ์ฏ ๊ฐ์ง๋ฅผ ํฌ๊ฒ ๋ชจ๋ํํด๋ณด์๋ค. ์์ค์ฝ๋๋ ์๋์!
3. ํ๋ฉด์ ์ด๋ ค์ ๋ ๋ถ๋ถ
1. ๋ฉ๋ด ๋๋ฌ์ ์์ ๋ฉ๋ด ๋์์ ๋, dim ์ฒ๋ฆฌ
dim ์ฒ๋ฆฌ ์์ฒด ๋ง๊ณ 1440px ์ด์์ด๋ฉด ์ค์์ผ๋ก ๊ฐ๋ ๊ฑฐ..
position absolute ๋ก ์ก์ผ๋ฉด ํด๋น ๋ฉ๋ด ๋ฐ๋ก ๋ฐ๋ถํฐ ๊ฐ๋ก๋ก ์์ํ๋.. ํ์ ๋ฐ์
์ฌ๊ธฐ์ left right ๋ก ์ก์๋ฒ๋ฆฌ๋ฉด....? ์ค์ ์ ๋ ฌ์ ํ ์ ์์์..? ํ๊ณ ๋ฌดํ์ ๊ตด๋ ์ ๋น ์ก๋๋ฐ, ์๊ฐ๋ณด๋ค ๊ฐ๋จํ๊ฒ ํด๊ฒฐํ๋ค. ๋ฉ๋ด ๋ฐ๊นฅ์ div.dim์ผ๋ก ๊ฐ์ธ์ dim์ ์์์ผ๋ก ๊ฝ์ฐจ๊ฒ ์ก๊ณ , ์์ menu๋ margin์ ์ด์ฉํ์ฌ ์ค์์ ๋ ฌ ํ๋ค. ๊ทธ์น๋ง dim์ ์ํด ๋งํฌ์ ์ ์ถ๊ฐํด์ผ ํ๋ค๋ ์ ์ด ์กฐ๊ธ ์์ฝ๋ค.
<div class="dim">
<div class="sub-menu">
</div>
</div>
.dim {
position: absolute;
left: 0;
right: 0;
}
.sub-menu {
margin: 0 auto;
/* ๋ถ๋ชจ๋ width ๊ฐ ์์ผ๋๊น left right ๋ฅผ ๋ถ์ฌ๋ margin์ด ๋จน๋๋ค! */
left: 0; right: 0;
margin: 0 auto;
width: 100%;
max-width: 1440px;
}
2. JavaScript ๋ถ์ด๊ธฐ
- ํด์ผ ํ ๊ฒ
- ๋ฉ๋ด ๋๋ฅด๋ฉด ์๋ธ ๋ฉ๋ด ๋์ด
- ์๋ธ ๋ฉ๋ด ๋์จ ์ํ๋ก ์คํฌ๋กคํ๋ฉด ์๋ธ๋ฉ๋ด ์์ด์ง
- ๋ชจ๋ฌ์ฐฝ ์คํฌ๋กค ๋ถ๊ฐ๋ฅ
- ๋ฐ๊นฅ ์์ญ ์๋ฌด๋ฐ๋ ๋๋ฅด๋ฉด ๋ชจ๋ฌ์ฐฝ ๊บผ์ง๊ฒ
- ์๊ฐํ์ง ๋ชปํ๋ ๊ฒ
1+. ์๋ธ ๋ฉ๋ด๊ฐ ๊ฐ์๊ฑฐ ๋๋ฒ ๋๋ฅด๋ฉด ๊บผ์ง๊ณ (toggle) + ๋ค๋ฅธ๊ฑฐ ๋๋ฅด๋ฉด ์ด๋ ค์๋๊ฑฐ ๊บผ์ง๋ ๊ฒ๊น์ง ๊ตฌํํด์ผ ํ๋ค. ์๊ฐ๋ณด๋ค ๊ตฌํํ๋๋ฐ ์์ฒญ ์ค๋ ๊ฑธ๋ ธ๋ค..
5. ๊ฒ์์ฐฝ - ์ด๊ฒ๋ ์ญ์.. toggle +์๋ธ๋ฉ๋ด ์ด๋ฆฐ ์ํ์์ ๊ฒ์์ฐฝ ๋๋ฅด๋ฉด ์๋ธ๋ฉ๋ด ๊บผ์ง๊ณ , ๊ฒ์์ฐฝ ์ด๋ฆฐ ์ํ์์ ์๋ธ๋ฉ๋ด ๋๋ฅด๋ฉด ๊ฒ์์ฐฝ ๊บผ์ง๊ณ
6. ์คํฌ๋กค ํ๋ฉด ์ฝ๊ฐ์ ๋๋ ์ด ํ์ ํค๋๊ฐ ์ฌ๋ผ์ง๋ ๊ฒ.
js ์ฝ๋! ์ฝ๋๊ฐ ์ด๋ค ๋์์ ํ๋์ง ์์ ํ ์ผ ๋ชฉ๋ก ๋ฒํธ์ ๋ง๊ฒ ์ฃผ์์ ๋ฌ์๋์๋ค.
// menu.js
const body = document.body;
const header = document.querySelector('.header');
const menuItems = document.querySelectorAll('.menu__item');
const menuButtons = document.querySelectorAll('.menu__title');
const dims = document.querySelectorAll('.dim');
const MENU_OPEN = 'menu__item--open';
const MENU_CLOSE = 'menu__item';
const DIM_OPEN = 'dim--open';
// 1. ๋ฉ๋ด ๋๋ฅด๋ฉด ์๋ธ ๋ฉ๋ด ๋์ด.
// ๋ฉ๋ด ๋๋ถ๋ฅ(4๊ฐ)์ ์ ๋ถ ์ ์ฉํด์ผํด์ forEach ์ ์ฉ. -> IE ๋ฏธ์ง์...
menuItems.forEach((item, index) => item.addEventListener('click', function () {
// 5. ์๋ธ ๋ฉ๋ด๋ฅผ ๋๋ฅด๋ฉด ๊ฒ์์ฐฝ์ด ๊บผ์ง๊ฒ!
closeSearch();
// 1. ๋ฉ๋ด ๋๋ฅด๋ฉด ๊บผ์ง๊ฒ ํ๋๋ฐ,
menuItems.forEach((item, index2) => {
if (index == index2) {
// 1. ๊ฐ์ ๋ฒํผ์ ๋ ๋๋ ๋ค? ๋ฉ๋ด๊ฐ ๊บผ์ง๋ฉด ๋จ.
item.classList.toggle(MENU_OPEN);
}
// 1. ๋ค๋ฅธ ๋ฒํผ์ ๋๋ ๋ค? ์ผ์ ธ์๋ ๋ฉ๋ด๋ฅผ ๋ชจ๋ ๊บผ์ง๋ฉด ๋จ.
else if (item.classList.contains(MENU_OPEN)) {
item.classList = MENU_CLOSE;
}
});
}));
// 4. ์๋ธ๋ฉ๋ด๊ฐ ๋์ค๊ณ ์๋ธ๋ฉ๋ด ์๋์ dim ์ฒ๋ฆฌ๋ ๋ถ๋ถ์ ๋๋ฅด๋ฉด ์๋ธ ๋ฉ๋ด๊ฐ ๊บผ์ง๊ฒ.
// ๊ทผ๋ฐ dim์ ๋๋ ์ ๋๋ง ๊บผ์ ธ์ผํด์ event target ๊ฒ์ฌ.
// ์ํ๋ฉด sub-menu ๋ฅผ ๋๋ฌ๋ ๊บผ์ง.
dims.forEach(dim => dim.addEventListener('click', function (event) {
if (event.target.classList.contains(DIM_OPEN)) {
dim.classList.remove(DIM_OPEN);
}
}));
// 6. ์คํฌ๋กค ํ๋ฉด ์ฝ๊ฐ์ ๋๋ ์ด ํ์ ํค๋๊ฐ ์ฌ๋ผ์ง๋ ๊ฒ.
let lastScroll = 0;
function headerScrolled() {
const currentScroll = window.pageYOffset;
if (currentScroll > lastScroll ) {
// down
header.classList.add(SCROLL_DOWN);
} else if (
currentScroll < lastScroll
) {
// up
header.classList.remove(SCROLL_DOWN);
}
lastScroll = currentScroll;
}
window.addEventListener('scroll', function () {
// 2. ์๋ธ๋ฉ๋ด ๋์จ ์ํ์์ ์คํฌ๋กคํ๋ฉด ๊บผ์ง๊ฒ!!
menuItems.forEach(menuItem => menuItem.classList = MENU_CLOSE);
const currentScroll = window.pageYOffset;
headerScrolled();
});
<!-- ๋งํฌ์
์ ๋๋ฌด ๋ง์์ ์์ ์๋ ๊ตฌ์กฐ์์ ํ์ํ ๊ฒ๋ง ๊ฐ์ ธ์ด. -->
<li class="menu__item">
<!-- ์ด ํ์ดํ์ด ๋๋ฅด๋ฉด ์๋ธ ๋ฉ๋ด๊ฐ ํผ์ณ์ง๋ ๋ฒํผ์ ์ญํ ์ ํ๊ฒ ๋๋ค.
๊ทผ๋ฐ ๊ตฌ์กฐ์ menu__item ์ ๋๋ฅด๋๊ฑฐ๋ ๋ค๋ฆ ์์ด์
menu__item ์ ๋๋ฅด๋ฉด, ์์์ ์๋ menu__item ์ menu__item--open class ๋ฅผ ์ถ๊ฐํ์ฌ
์์์ธ dim, sub-menus ๊ฐ ํ๋ฉด์ ๋ํ๋๊ฒ ์ฒ๋ฆฌ.
-->
<h2 class="menu__title">Creativity & Design</h2>
<div class="dim">
<div class="sub-menus">
<ul class="menu__sub-menu">
<li class="sub-menu__item sub-menu__item--img">
.dim {
display: none;
}
.menu__item--open {
display: block;
}
4๋ฒ๊ณผ ๋ชจ๋ฌ์ ๊ฐ์ ๋ก์ง์ผ๋ก ์ ์ฉํ๊ณ , ๊ฒ์์ฐฝ์ ์๋ธ ๋ฉ๋ด์ ๊ฑฐ์ ๋ค๋ฅผ๊ฒ ์์ผ๋ฏ๋ก ๋๋จธ์ง ์ฝ๋๋ ์๋ตํ๋ค. github ์ ์ฌ๋ ค๋์๋ค.
3. ๋ฏธ๋์ด์ฟผ๋ฆฌ
์ก์์ผ ํ๋ ๋ถ๋ถ ์ค ๊ฐ์ฅ ํฐ ๋ถ๋ถ์ด ์์ ์ฌ๋ฆฐ ๋ฉ๋ด 900px ๋ฏธ๋ง์์ ๋ฉ๋ด ๋ฒํผ์ผ๋ก ์ค์ด๋ค๊ณ , ๋๋ฅด๋ฉด ๊ฒ์์ฐฝ ๊ณผ ๋ฉ๋ด๊ฐ ๊ฐ์ด ๋์จ๋ค๋ ์ ์ด์๋ค.
1. ๊ฒ์์ฐฝ๊ณผ ๋ฉ๋ด๊ฐ ๊ฐ์ด ๋์ค๋ ๋ฌธ์
์ผ๋จ ์ด ๋ฌธ์ ๋ ์ด๋ ๊ฒ ๋๋ฝ๊ฒ ํด๊ฒฐ์ ํด๋๋๋? ์ถ์์ง๋ง.. ๋๋ฝ๊ฒ ํด๊ฒฐ์ ํ๋ค.
์๋ ๋ฐ๋ก๋ฐ๋ก ์ด๋ฆฌ๋ .dim--search์, .dim--menu ์ toggle ์ ๊ฐ์ด ์ค์ ๋์์ ์ด๋ฆฌ๊ณ ๋ซํ๊ฒ ๋ง๋ค์๋ค. CSS ๋ position์ ์ด์ฉํด์ ๊ทธ๋ฅ ์ ํฉํ๋ฏ์ด(...) ์์น๋ฅผ ์ก์๋ค. ๊ทธ๋์ ์ผ๋ฐ ์ฌ์ฉ์์ฒ๋ผ ํ๋ํ์ง ์๊ณ ์ฐฝ ํฌ๊ธฐ๋ฅผ ๋๋ ธ๋ค ์ค์๋ค ๋ฉ๋ด๊ฐ ์ด๋ ธ๋ค ๋ซํ๋ค ํ๋ฉด์ ์๋ํ๋ฉด.... ํ๋๋ง ์ผ์ ธ์๋ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ๋ค. window ์ฌ์ด์ฆ๋ฅผ ์ค์ผ ๋ ๋ชจ๋ ๋ซํ๊ฒ ํ๋ฉด ํด๊ฒฐ๋ ๊ฒ ๊ฐ์๋ฐ ์๋ฌด๋ฆฌ ์ฌ์ฉ์๋ ๊ธฐํ์์ ๊ฐ๋ฐ์์ ์์์ ์ด์ํ๋ค๊ณ ๋ ํ์ง๋ง ๊ทธ๋ฐ ์ฌ์ฉ์๊ฐ ์์๊น์ถ๋ค.
// media query max-width 899
menuButton.addEventListener('click', function() {
dimSearch.classList.toggle('dim--search--open');
dimMenu.classList.toggle('dim--menu--open');
menuButton.innerText = "menu";
if (dimMenu.classList.contains('dim--menu--open')) {
menuItems.forEach(item => item.classList = MENU_CLOSE);
subMenuTitles.forEach(title => title.classList = 'sub-menu__category');
menuButton.innerText = "close";
}
});
2. ๋ฉ๋ด๊ฐ ์์ฝ๋์ธ ํ์์ด๋ค.
์์ฝ๋์ธ ํ์์.. ์ฌ์ค ๋ธ๋ญ ์์๊ฐ ์์ด์ก๋ค ๋์ค๋ฉด ๋ฐ์ ์์๋ค์ด ๊ฐ์ด ๋ด๋ ค๊ฐ์ ์๋์ ์ผ๋ก ์ก์ ์ ์๋ ๊ตฌ์กฐ์ธ๋ฐ...
์ด๊ฒ media query ์ ์ฉ ์ ์น ํ์ด์ง ๊ธฐ์ค ์ฌ์ดํธ์์ position์ด๋ flex ์จ์ ๋์ฌ๋์ ๋ฉ๋ด๋ผ ํผ์ณ์ง๊ธด ํ๋๋ฐ ๋ฉ์ง๊ฒ ๊ฒน์น๋!!! ๋ฌธ์ ๋ฐ์..
์ด๋ป๊ฒ ํ๋ฉด ์ด๋ ๊ฒ ๋ง๋ค ์ ์์๊น? ์์ง ๋ชจ๋ฅด๊ฒ ๋ค... ์น ํ์ด์ง ๋น์ฐํ PC ๊ธฐ์ค์ผ๋ก ์ก๊ณ ๋ชจ๋ฐ์ผ ๊ธฐ์ค์ผ๋ก ์ก๋๋ค๊ณ ์๊ฐํ๋๋ฐ.. ์์ฆ ๊ธฐ์ ๋ค์ ๋ชจ๋ฐ์ผ ํ์ด์ง ๋จผ์ ๋ง๋ค๊ณ PC ํ๋ฉด ์ก๋ ์ด์ ๊ฐ ์๋๋ณด๋ค... ๊ทธ์น๋ง ์ด๋ฏธ ์น ๊ธฐ์ค์ผ๋ก ์ก๊ณ ์ขํ ๋ค์ด๊ฐ์ ๋ฌด๋ฅผ ์ ์๋ค...
-> ํด๋น ๋ฉ๋ด๋ฅผ position: static
์ผ๋ก ๋ฐ๊ฟ๋ ์๋์๋๋ฐ, ๋ฐ๊นฅ ์์ ์ค์ position์ด ๊ฑธ๋ ค์์ง๋ง, ์๊ฑธ๋ ค์์ด๋ ๋๊ฐ์ด ๋์ค๋ ๊ฒ๋ค์ ๋ค ์ ๊ฑฐํ๋๋!!! ํด๊ฒฐ์ด ๋๋ค. position์ absolute๋ก ๊ฑธ๋ ค์๋ ๊ฒ์ static์ผ๋ก ์ ๊ฑฐํ๋๊ฒ ์ ๋ต์ด์๋๋ฐ ๋ค๋ฅธ ๊ฒ๋ค์ด position์ด ๊ฑธ๋ ค์์ด์ ์๋๋ ๊ฒ ๊ฐ๋ค.
4. ๋๋ ์
์ฌ์ค Adobe ๊ธฐ๊ฐ์ 12์ 6์ผ๋ถํฐ ์๋๋ฐ, ์ฒซ ์ผ์ฃผ์ผ์ ๋ฐ๋น ์, ๋์งธ์ฃผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ ๋๋ ๋งํฌ์ ์ด ์ง๋ฆฐ๋ค๊ณ (...) ์ํํ ํ๋ค๊ฐ ์ ์งธ์ฃผ์ ์ด์ฌํ ํด์ ์์ฑ์ ํ๋ค.
๊ทธ๋ฐ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๋ถ์ฌ๋ณด๋๊น ๋ด๊ฐ ์ง ๋งํฌ์ ์ด ๋๋ฌด ๋๋ฝ๊ณ ... ๋ด๊ฐ ์ง ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ ๋๋ฝ๊ณ ... ๋ด ์์๋๋ก ๊ธฐ๋ฅ์ด๋์๊ณ ํ์ผ์ ๋ถ๋ฆฌํ๊ธด ํ์ง๋ง, ํ์ผ ๊ฐ์ ๊ฒฝ๊ณ๊ฐ ๋ชจํธํด์ ๊ฒฐ๊ตญ ๋ค๋ฅธ ํ์ผ์ ๋ณ์๋ ํจ์๋ฅผ ์จ์ผํ๋ ์ผ์ด ๋ฐ์ํ๋ค. ์ด๋ฐ ์ผ์ ๊ฒช์ด๋ณด๋๊น ์์๋ค์ ์ ์ปดํฌ๋ํธํ ํ๋ ค๋์ง ์๊ฒ ๊ณ ... ํ๋ ์์ํฌ๋ฅผ ๊ดํ ์ฐ๋๊ฒ ์๋๊ตฌ๋ ํ๋ ์๊ฐ์ด ๋ค์๋ค.
๋ฆฌํฉํ ๋ง์ ๋๋ฌด ์ด์ํ html class ์ด๋ฆ์ด๋ CSS ํ์ด๋ณด๋ฉด์ ๊ฒน์น๋ ์์ ๋นผ๊ณ , ํฉ์น๊ณ ํ๋ ๊ณผ์ ์ ์ํํ๊ธฐ๋ ํ๋ค. ๊ทธ๋ฐ๋ฐ ์ ์ผ ๋๋ฌ์ด(?) ๋ถ๋ถ์ ์ด๋ฏธ์ง ํ์ผ์ card--big์๋ img ํ๊ทธ๋ก card--medium์๋ background-image ๋ก ์์ด์ฝ์ img, ๊ฐ์์์ + background-image, svg ... ๋ฅผ ๋ค ์จ์ ํต์ผ์ฑ์ด ์๋ค๋ ์ ๊ฐ๋ค. ๊ทธ์น๋ง ๋ด๊ฐ ์ด์ํ ์ฌ์ดํธ๋ผ๋ฉด ๋ํํ ์ด๋ฏธ์ง ํ์ผ๋ค์ด ๋ค ์์ผ๋๊น ํต์ผ์ฑ ์๊ฒ ๋ง๋ค๊ณ CSS Sprite ๊ธฐ๋ฒ๋ ๋์ ํ ์ง ๊ณ ๋ฏผํด๋ดค์ ๊ฒ ๊ฐ์๋ฐ, ์์ด์ฝ์ด ์ ๋ถ ๋ํํ ์๋๊ฒ ์๋๋๊น.. ์ด ๋ถ๋ถ์ ๋ฆฌํฉํ ๋งํ๋๊ฒ ์๋ฏธ๊ฐ ์์ ๊ฒ ๊ฐ์์ ๋ค๋ฅธ ๊ณต๋ถ๋ฅผ ํ๊ธฐ๋ก ํ๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Front-end๐ฅ] Adobe ๋ฉ์ธ ํ์ด์ง ํด๋ก !), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ddosang/Front-end-Adobe-Clone์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค