๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ ํฌํธํด๋ฆฌ์ค with Figma
ํผ๋ธ๋ฆฌ์ ์ทจ์ ๊ณผ ํผ๋ธ๋ฆฌ์ ์ค๋ฌด์์ ๊ฐ์ฅ ๊ฒฝ์๋ ฅ์ด ์๋ ๋ชจ๋ฐ์ผ ์น ์ ์ ๋ฅ๋ ฅ์ ํฅ์ํ ์ ์์ต๋๋ค. ํผ๋ธ๋ฆฌ์ ๋ก์ ๋ชจ๋ฐ์ผ ์น์ ์ ์ํ๊ธฐ ์ํ ๊ฑฐ์ ๋ชจ๋ ์ ์ ๋ฐฉ๋ฒ๊ณผ ๋ ธํ์ฐ๋ฅผ ๋ค์ง ์ ์์ต๋๋ค. ํนํ ์์ฆ ํผ๋ธ๋ฆฌ์ ์ ๊ฐ๋ฐ์์๊ฒ ์๊ตฌ๋๋ ๋์์ธ ๋ฅ๋ ฅ์ ํผ๊ทธ๋ง(Figma) ํ์ต์ผ๋ก ๋ง์ ๋ถ๋ถ ์ปค๋ฒํ ์ ์๋๋ก ํผ๊ทธ๋ง(Figma)๋ก ๋ชจ๋ฐ์ผ ์น UI ๋์์ธ ์์ ์ ํ๋ ๊ณผ์ ๋ ์์ธํ๊ฒ ์ค๋ช ํ์์ต๋๋ค. ๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ ์์ ์์ ๊ฐ์ฅ ๊ฐ์ ์ธ ๋ถ๋ถ์ธ HTML ์์ด์ดํ๋ ์ ์์ธํ ์์ฑ๋ฒ์ ๋ชจ๋ ํ์ด์ง ํ๋ํ๋ ์์ธํ๊ฒ ์ค๋ช ํฉ๋๋ค. ๊ฐ์๋ฅผ ํตํด HTML ์์ด์ดํ๋ ์ ์ ์ ๋ฅ๋ ฅ์ด ํฌ๊ฒ ํฅ์๋ ๊ฒ์ ๋๋ค. ๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ์ CSS ๋ณ์(Var) ํ์ฉํ ๋ชจ๋ฐ์ผ๊ณผ ํ๋ธ๋ฆฟ์ ๋ง์ถ ๋ ์ด์์์ ์๋ฒฝํ๊ฒ ๋ง์ถ๋ ํ์ต์ ํตํด์ ์ค๋ฌด ์์ ๊ณผ ๋๋์์ดํ ์ ๋์ ์์ ๋ฅ๋ ฅ์ ๊ฐ์ถ๊ฒ ๋ฉ๋๋ค. Flex ๋ ์ด์์์ ์ค์ฌ์ผ๋ก ์ค์๊ธ CSS ์ค์ ๋ฅ๋ ฅ์ ์ถฉ๋ถํ ๊ฐ์ถ์๊ฒ ๋ฉ๋๋ค.
์๊ฐ์ 439๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
์ ๊ณต๋ ๊ฐ์์๋ฃ figํ์ผ import
<img src="https://cdn.inflearn.com/public/files/posts/148aee5a-f170-4512-8e6b-9a0bb93958bd/ebd603be-944d-433c-ab0b-213d4bf81311.png" media-type="img"
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์์ผ๋ฆฌ์ธ์ค๋
ใป
9๋ฌ ์
1
45
2
- ๋ฏธํด๊ฒฐ
๋ชจ๋ฐ์ผ ์น ๋ ์ด์์ ๋์์์ฒญ๋๋ฆฝ๋๋ค! (์์ด๋ณด)
CSS ๊ตฌ์กฐ ๋ฌธ์๋๋ฆฝ๋๋ค.<img src="https://cdn.inflearn.com/public/files/posts/a3aa54d2-5b2e-41a2-9d69-ede2cebd4f3e/094a7654-aecd-47dc-94c9-ebc68f733cca.p
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คJOONBUM
ใป
1
134
2
- ๋ฏธํด๊ฒฐ
๊ฐ์๋ฃ๋ค๊ฐ ๊ถ๊ธํด์ ธ์ ๋ฌธ์ ๋จ๊น๋๋ค. (๋นผ๊ผผ์ด ์ฌ๋ผ์ด๋ ๋ฐ์ํ)
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์ค์ฎธ๋
ใป
1
55
1
- ๋ฏธํด๊ฒฐ
ํผ๋ธ๋ฆฌ์ฑ ์์ ๋ง๋ฌด๋ฆฌ ํ๊ธฐ 01 ๊ฐ์
์๋ ํ์ธ์. ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค !๊ฐ์๋ฅผ ๋ฃ๋ค ๊ถ๊ธํ ์ ์ด ์๊ฒจ ๋ฌธ์๋ฅผ ๋จ๊น๋๋ค. ํผ๋ธ๋ฆฌ์ฑ ์์ ๋ง๋ฌด๋ฆฌ ํ๊ธฐ 01 ๊ฐ์ ์ค .btn-fold์ left : 0 ์ ์ฃผ๋ผ๊ณ ํ์ จ๋๋ฐ, ์ด์ ๊ฐ์ ์์ .goods-order-final ์
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค๋๋
ใป
1
145
2
- ๋ฏธํด๊ฒฐ
ํ๋ก ํธ ํ์ด์ง ๋น ๊ผผ์ด ์ฌ๋ผ์ด๋ ๋ง์ง๋ง ๋ถ๋ถ ๋ฌธ์ ๋๋ฆฝ๋๋ค.
์ถ์ฒ์ํ ์ฌ๋ผ์ด๋ ๋ง์ง๋ง ์์๊น์ง ๋น๊ฒผ์ ๋๋ ๋ง์ง๋ง ์์๊ฐ ๋น ๊ผผ์ด๋ก
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คd111
ใป
1
225
1
- ๋ฏธํด๊ฒฐ
reset.css ์ style.css ์ ๋ฃ์ ๋ฌธ์ฅ๋ค ๊ตฌ๋ถํ๊ธฐ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
๊ฐ์์์h1, h2, h3 ์ ํฐํธ์ฌ์ด์ฆ๋ reset.css ํ์ผ์ ๋ค์ด๊ฐ๊ณ body์ ํฐํธ์ฌ์ด์ฆ๋ style.css ํ์ผ์ ๋ค์ด๊ฐ๊ณ *์ box-sizing: border-box ๋ reset.css ํ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คd111
ใป
1
247
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์ ๊ฐ์๋ค์ ํ ๊ฐ์ธํฌํด์ฉ์ผ๋ก ๋ชจ๋ฐ์ผ์ฑ ๋ง๋ค๊ณ ์๋๋ฐ์..!
์์ด์ดํ๋ ์ ๋ง๋ค ๋ ๊ตฌ์กฐ๋ฅผ ์ด๋ป๊ฒ์ง์ผํ๋์ง .. (๋ฐ์ค๋ฅผ ์ด๋ป๊ฒ ์ณ์ผํ๋์ง ) ๊ฐ์ด ์์์์์ ใ .ใ ๋ฐ์ค์น๊ฑฐ์ฒ๋ผ ๋ฌถ์ด์ ๊ตฌ์กฐ์ง๋๋๋์ง ์ฌ์ญค๋ณด๊ณ ์ถ์๋ฐ, ํน์ ๋ฉ์ผ๋ก๋ ์ง๋ฌธ ๋ฐ์ผ์ค๊น์ฉ ?ใ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์๋ฆผ
ใป
1
223
1
- ๋ฏธํด๊ฒฐ
display flex ์ง๋ฌธ,,
์๋ ํ์ธ์ ! gnb๋ถ๋ถ ํ๋ค๊ฐ ํท๊ฐ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์๋ฆผ
ใป
1
185
1
- ๋ฏธํด๊ฒฐ
๊ฐ์์๋ฃ ์ง๋ฌธ
๊ฐ์ฌ๋ ใ ๊ฐ์์๋ฃ์ ํ์ํ ์๋ฃ ๋ค์ด ๋ฐ์ ์ ์๋ ๋งํฌ ์๋ ค์ฃผ์๋ฉด ๊ฐ์ฌํฉ๋๋ค๊ฒฐ์ ํ ๋ค์ด๋ฐ์ผ๋ ค๋๋ฐ ํ์ผ์ด ์ด๋์ ์๋ ์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋คใ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คtkdrb228
ใป
1
245
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์! ๊ฐ์๋ด์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ๋ณํํด์ ๊ฐ์ธํฌํธํด๋ฆฌ์ค์ฉ์ผ๋ก ๋ง๋ค ๋
๊ฐ์๋ด์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ๋ณํํด์ ๊ฐ์ธํฌํธํด๋ฆฌ์ค์ฉ์ผ๋ก ๋ง๋ค ๋1.์ค์ ์๋ ๋ชจ๋ฐ์ผ ์น์ฌ์ดํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ ๊ฐ ๋ฆฌ๋ด์ผํด์ ๋ง๋ค์ด์ผํ๋๊ฑด๊ฐ์ ?? 2.๊ทธ๋ผ ์ฌ์ดํธ ์์ ๋ค์ด๊ฐ๋ ์ด๋ฏธ์ง ๊ฐ์ ๊ฑด๊ทธ ์น์ฌ์ดํธ์ ์๋ ์ฌ์ง์
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์๋ฆผ
ใป
1
206
1
- ํด๊ฒฐ
๋ชจ๋ฐ์ผ ๋ชฉ์ iframe ์คํฌ๋กค
์ ์๋ ์๋ ํ์ธ์~ ๋ชจ๋ฐ์ผ ๋ชฉ์ ์์ iframe ๋ฃ์์๋ ์ธ๋ก์คํฌ๋กค์ ๊ธฐ๋ฅ์ ์ด๋ฆฌ๊ณ ์ฐ์ธก ๋ง๋ ๋ถ๋ถ๋ง ์์ ๊ณ ์ถ์ด์ ๊ตฌ๊ธ๋ง ํด๋ณด์๋๋ฐ์.. ๊ตฌ๊ธ๋ง ํ๋๋ก ํด๋ณด๋ฉด ์ฐ์ธก ๋ง๋๋ ์์ด์ง๋๋ฐ ๊ธฐ๋ฅ๋ ๊ฐ์ด ์ฃฝ๋๋ผ๊ตฌ์.. ๊ธฐ๋ฅ์ ์ด๋ฆฌ๊ณ ์ฐ์ธก ๋ง๋๋ง ์์ ๋ ๋ฐฉ๋ฒ์ด ์์๊น์?
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์ด์ข ์ฃผ
ใป
2
386
2
- ๋ฏธํด๊ฒฐ
์ ์ด์ฟผ๋ฆฌ load ๋ฉ์๋ ํฌํธํด๋ฆฌ์ค ์ฐ๊ฒฐ ์ง๋ฌธ
์๋ ํ์ธ์ ์ ์๋! ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ๋ง๋ค๋ค ๊ถ๊ธํ ์ ์ด ์์ด ์ฌ์ญค๋ด ๋๋ค :)ํด๋น ๊ฐ์์์ ๋ง๋ ์์ ๋ฌผ์ ๋ณํํ์ฌ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง์ ๋ฃ์ผ๋ ค๊ณ ํ๋๋ฐHeader๋ GNB ๋ถ๋ถ์ ์ ์ด์ฟผ๋ฆฌ load ๋ฉ์๋๋ก ์ฐ๊ฒฐํด์ ๊ทธ๋ฐ์ง</p
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์ฐฌ๋ฏธ
ใป
1
220
1
- ๋ฏธํด๊ฒฐ
์ํ ์์ธํ์ด์ง ์์ฝ๋์ธ ๋ถ๋ถ
/* Goods Accordion */ $('.goods-accordion .detail').eq(0).show() $('.goods-accordion .title').
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์ค์
ใป
1
559
6
- ๋ฏธํด๊ฒฐ
๊ฐ๋ณํ์ด์ง HTML+CSS+JS ํผ๋ธ๋ฆฌ์ฑ(ํ๋ฆฌ๋ก๋ฉ)์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๊ด๋ จ ์ง๋ฌธ
์๋ ํ์ธ์.๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ ์์ ์ ์ฐจ๊ทผ์ฐจ๊ทผ ์ ๋ฃ๊ณ ์์ต๋๋ค.๊ฐ์ ์ค๊ฐ์ค๊ฐ ์ค๋ช ํด์ฃผ์๋ ๋ถ๋ถ์ด ๋ง์ ๋์์ด ๋๊ณ ์์ต๋๋ค. ^^์ค๋ ํ๋ฆฌ๋ก๋ฉ ํผ๋ธ๋ฆฌ์ฑ ํํธ๋ฅผ ๋ค์๋๋ฐ์,๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ํผ๊ทธ๋ง์์ ์์ฑํ ๋์์ธ๊ณผ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คsena Park
ใป
1
279
1
- ๋ฏธํด๊ฒฐ
.stop().slideDown๊ณผ ๊ฐ์ด ์ฌ๋ผ์ด๋ ๋ค์ด ์์ ์คํ์ ์ฐ๋ ์ด์
-.stop().slideDown๊ณผ ๊ฐ์ด ์ฌ๋ผ์ด๋ ๋ค์ด ์์ ์คํ์ ์ฐ๋ ์ด์ ๊ฐ ๋ญ๊น์? ๊ฐ์์์๋ ํ?๋ฅผ ์์ ๊ธฐ ์ํด์๋ผ๊ณ ๋ค๋ ธ๋๋ฐ ์ดํด๋ฅผ ๋ชปํ๊ฒ ์ด์ ใ ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์ผ๋์ผ๋
ใป
1
547
1
- ํด๊ฒฐ
ํผ๊ทธ๋ง ์์ ํ์ผ์ด ์ปค๋ฎค๋ํฐ์ ๊ณต๊ฐ๋๋๋ฐ, ๋ฌด๋ฃํ์์ด๋ผ์ ๊ทธ๋ฐ๊ฑด๊ฐ์?
ํผ๊ทธ๋ง ์์ ํ์ผ์ด ์ปค๋ฎค๋ํฐ์ ๊ณต๊ฐ๋๋๋ฐ, ๋ฌด๋ฃํ์์ด๋ผ์ ๊ทธ๋ฐ๊ฑด๊ฐ์?๊น์ง ๋๋ผ์, ์ปค๋ฎค๋ํฐ์ ์์ ํ์ผ ์ญ์ ํ๋๋ฐ, ์ ์๋ณธ๋ ๊ฐ์ด ์ญ์ ๋ฌ๋๋ผ๊ณ ์..ใ ใ ใ ใ ใ ใ ๋ฌด๋ฃํ์์ด์ด์ ๊ทธ๋ฐ๊ฑด์ง, ์ ๊ฐ ์ค์ ์ ๊ณต๊ฐ๋ก ํด๋์๊ฑด์ง, ๋น๊ณต๊ฐ ๋ฐฉ๋ฒ์ด ์๋์ง
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค์์
ใป
1
1,046
1
- ํด๊ฒฐ
์ฅ๋ฐ๊ตฌ๋ ํํธ checkbox ์ง๋ฌธ
์ ์๋.์ฅ๋ฐ๊ตฌ๋ ๋ฐ์ ํ์ํด ๋ ์ฒดํฌ๋ฐ์ค๊ฐ ์ข ์ด์ํด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.์ฒซ๋ฒ์งธ ์ฒดํฌ ๋ฐ์ค์ ๋ ๋ฒ์งธ ์ฒดํฌ ๋ฐ์ค์ ํฌ๊ธฐ๊ฐ ์ํ๋ช ๊ธ์์์ ๋ฐ๋ผ์ปค์ก๋ค ์์์ก๋ค ๋ถ๊ท์นํ๊ฒ ๋ณํ๋๋ฐ ์ด ๋ถ๋ถ์ด ์ข ์ด์ํฉ๋๋ค.์ฒซ๋ฒ์งธ ์์ดํ ์
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์ค๊น์งํ
ใป
1
548
1
- ๋ฏธํด๊ฒฐ
๊ฐ์์๊ฐ์ง๋ฌธ
ํ์ฌ ์ทจ์ ๋ชฉ์ ์ด์๋๋ผ ํฅํ ๋๋ง์ ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณด์๋์ทจ์ง๋ก ์๋ฐ ์คํ๋ง ๋ฐฑ์๋๊ณผ์ ์ ๊ณต๋ถํ๊ณ ์๋๋ฐ์ํฅํ ํ๋ฉด๊ตฌํ์ ์ง์ ํ๊ธฐ ์ํด ์ด๋ฒ์ ์๋ก๋์จ ๊ฐ์๋ฅผ ์๊ฐํ๋ฉด ํฅํ ํด๋น์ทจ์ง์๋์์ด ๋ง์ด๋ ๊น์?์ฌ์ค html cs
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คpcdoomco4
ใป
1
293
1
- ๋ฏธํด๊ฒฐ
๊ฐ์ ๊ด๋ จ์ง๋ฌธ์ด์
ํ์ฌ ๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ with figma ์ด๊ฐ์ข๋ฅผ ์๊ฐํ๊ณ ์๋๋ฐ์ ๋ณด๋๊น ์๋ก์ด ๊ฐ์๊ฐ ๋๋์๋๋ผ๊ตฌ์ ํน์ ์ด๊ฒ ๋ด์ฉ์ ๋ง์ด ๊ฒน์น๋์????? ์ ๊ฐ ๊ณต๋ถ๊ฐ์งง์
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คpcdoomco4
ใป
1
269
1
- ๋ฏธํด๊ฒฐ
๋จ์ ๊ด๋ จ ์ง๋ฌธ
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คrb
ใป
1
333
1






