ใขใใคใซใฆใงใใใใชใใทใณใฐใปใใผใใใฉใชใช 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ํฌํธํด๋ฆฌ์คalienorder
ใป
10ใถๆๅ
1
50
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ํฌํธํด๋ฆฌ์คapdkflth5716
ใป
1
142
2
- ๆช่งฃๆฑบ
๊ฐ์๋ฃ๋ค๊ฐ ๊ถ๊ธํด์ ธ์ ๋ฌธ์ ๋จ๊น๋๋ค. (๋นผ๊ผผ์ด ์ฌ๋ผ์ด๋ ๋ฐ์ํ)
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คekfdud911479
ใป
1
56
1
- ๆช่งฃๆฑบ
ํผ๋ธ๋ฆฌ์ฑ ์์ ๋ง๋ฌด๋ฆฌ ํ๊ธฐ 01 ๊ฐ์
์๋ ํ์ธ์. ๊ฐ์ ์ ๋ณด๊ณ ์์ต๋๋ค !๊ฐ์๋ฅผ ๋ฃ๋ค ๊ถ๊ธํ ์ ์ด ์๊ฒจ ๋ฌธ์๋ฅผ ๋จ๊น๋๋ค. ํผ๋ธ๋ฆฌ์ฑ ์์ ๋ง๋ฌด๋ฆฌ ํ๊ธฐ 01 ๊ฐ์ ์ค .btn-fold์ left : 0 ์ ์ฃผ๋ผ๊ณ ํ์ จ๋๋ฐ, ์ด์ ๊ฐ์ ์์ .goods-order-final ์
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คgoldenparachute3422
ใป
1
148
2
- ๆช่งฃๆฑบ
ํ๋ก ํธ ํ์ด์ง ๋น ๊ผผ์ด ์ฌ๋ผ์ด๋ ๋ง์ง๋ง ๋ถ๋ถ ๋ฌธ์ ๋๋ฆฝ๋๋ค.
์ถ์ฒ์ํ ์ฌ๋ผ์ด๋ ๋ง์ง๋ง ์์๊น์ง ๋น๊ฒผ์ ๋๋ ๋ง์ง๋ง ์์๊ฐ ๋น ๊ผผ์ด๋ก
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คd111
ใป
1
230
1
- ๆช่งฃๆฑบ
reset.css ์ style.css ์ ๋ฃ์ ๋ฌธ์ฅ๋ค ๊ตฌ๋ถํ๊ธฐ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
๊ฐ์์์h1, h2, h3 ์ ํฐํธ์ฌ์ด์ฆ๋ reset.css ํ์ผ์ ๋ค์ด๊ฐ๊ณ body์ ํฐํธ์ฌ์ด์ฆ๋ style.css ํ์ผ์ ๋ค์ด๊ฐ๊ณ *์ box-sizing: border-box ๋ reset.css ํ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คd111
ใป
1
248
1
- ๆช่งฃๆฑบ
์๋ ํ์ธ์ ๊ฐ์๋ค์ ํ ๊ฐ์ธํฌํด์ฉ์ผ๋ก ๋ชจ๋ฐ์ผ์ฑ ๋ง๋ค๊ณ ์๋๋ฐ์..!
์์ด์ดํ๋ ์ ๋ง๋ค ๋ ๊ตฌ์กฐ๋ฅผ ์ด๋ป๊ฒ์ง์ผํ๋์ง .. (๋ฐ์ค๋ฅผ ์ด๋ป๊ฒ ์ณ์ผํ๋์ง ) ๊ฐ์ด ์์์์์ ใ .ใ ๋ฐ์ค์น๊ฑฐ์ฒ๋ผ ๋ฌถ์ด์ ๊ตฌ์กฐ์ง๋๋๋์ง ์ฌ์ญค๋ณด๊ณ ์ถ์๋ฐ, ํน์ ๋ฉ์ผ๋ก๋ ์ง๋ฌธ ๋ฐ์ผ์ค๊น์ฉ ?ใ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คyn74819692
ใป
1
224
1
- ๆช่งฃๆฑบ
display flex ์ง๋ฌธ,,
์๋ ํ์ธ์ ! gnb๋ถ๋ถ ํ๋ค๊ฐ ํท๊ฐ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คyn74819692
ใป
1
186
1
- ๆช่งฃๆฑบ
๊ฐ์์๋ฃ ์ง๋ฌธ
๊ฐ์ฌ๋ ใ ๊ฐ์์๋ฃ์ ํ์ํ ์๋ฃ ๋ค์ด ๋ฐ์ ์ ์๋ ๋งํฌ ์๋ ค์ฃผ์๋ฉด ๊ฐ์ฌํฉ๋๋ค๊ฒฐ์ ํ ๋ค์ด๋ฐ์ผ๋ ค๋๋ฐ ํ์ผ์ด ์ด๋์ ์๋ ์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋คใ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คtkdrb2289282
ใป
1
246
1
- ๆช่งฃๆฑบ
์๋ ํ์ธ์! ๊ฐ์๋ด์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ๋ณํํด์ ๊ฐ์ธํฌํธํด๋ฆฌ์ค์ฉ์ผ๋ก ๋ง๋ค ๋
๊ฐ์๋ด์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ๋ณํํด์ ๊ฐ์ธํฌํธํด๋ฆฌ์ค์ฉ์ผ๋ก ๋ง๋ค ๋1.์ค์ ์๋ ๋ชจ๋ฐ์ผ ์น์ฌ์ดํธ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ ๊ฐ ๋ฆฌ๋ด์ผํด์ ๋ง๋ค์ด์ผํ๋๊ฑด๊ฐ์ ?? 2.๊ทธ๋ผ ์ฌ์ดํธ ์์ ๋ค์ด๊ฐ๋ ์ด๋ฏธ์ง ๊ฐ์ ๊ฑด๊ทธ ์น์ฌ์ดํธ์ ์๋ ์ฌ์ง์
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คyn74819692
ใป
1
210
1
- ่งฃๆฑบ
๋ชจ๋ฐ์ผ ๋ชฉ์ iframe ์คํฌ๋กค
์ ์๋ ์๋ ํ์ธ์~ ๋ชจ๋ฐ์ผ ๋ชฉ์ ์์ iframe ๋ฃ์์๋ ์ธ๋ก์คํฌ๋กค์ ๊ธฐ๋ฅ์ ์ด๋ฆฌ๊ณ ์ฐ์ธก ๋ง๋ ๋ถ๋ถ๋ง ์์ ๊ณ ์ถ์ด์ ๊ตฌ๊ธ๋ง ํด๋ณด์๋๋ฐ์.. ๊ตฌ๊ธ๋ง ํ๋๋ก ํด๋ณด๋ฉด ์ฐ์ธก ๋ง๋๋ ์์ด์ง๋๋ฐ ๊ธฐ๋ฅ๋ ๊ฐ์ด ์ฃฝ๋๋ผ๊ตฌ์.. ๊ธฐ๋ฅ์ ์ด๋ฆฌ๊ณ ์ฐ์ธก ๋ง๋๋ง ์์ ๋ ๋ฐฉ๋ฒ์ด ์์๊น์?
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คjeje77275
ใป
2
388
2
- ๆช่งฃๆฑบ
์ ์ด์ฟผ๋ฆฌ load ๋ฉ์๋ ํฌํธํด๋ฆฌ์ค ์ฐ๊ฒฐ ์ง๋ฌธ
์๋ ํ์ธ์ ์ ์๋! ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ๋ง๋ค๋ค ๊ถ๊ธํ ์ ์ด ์์ด ์ฌ์ญค๋ด ๋๋ค :)ํด๋น ๊ฐ์์์ ๋ง๋ ์์ ๋ฌผ์ ๋ณํํ์ฌ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง์ ๋ฃ์ผ๋ ค๊ณ ํ๋๋ฐHeader๋ GNB ๋ถ๋ถ์ ์ ์ด์ฟผ๋ฆฌ load ๋ฉ์๋๋ก ์ฐ๊ฒฐํด์ ๊ทธ๋ฐ์ง</p
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คwerose
ใป
1
221
1
- ๆช่งฃๆฑบ
์ํ ์์ธํ์ด์ง ์์ฝ๋์ธ ๋ถ๋ถ
/* Goods Accordion */ $('.goods-accordion .detail').eq(0).show() $('.goods-accordion .title').
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คoosong2711
ใป
1
567
6
- ๆช่งฃๆฑบ
๊ฐ๋ณํ์ด์ง HTML+CSS+JS ํผ๋ธ๋ฆฌ์ฑ(ํ๋ฆฌ๋ก๋ฉ)์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๊ด๋ จ ์ง๋ฌธ
์๋ ํ์ธ์.๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ ์์ ์ ์ฐจ๊ทผ์ฐจ๊ทผ ์ ๋ฃ๊ณ ์์ต๋๋ค.๊ฐ์ ์ค๊ฐ์ค๊ฐ ์ค๋ช ํด์ฃผ์๋ ๋ถ๋ถ์ด ๋ง์ ๋์์ด ๋๊ณ ์์ต๋๋ค. ^^์ค๋ ํ๋ฆฌ๋ก๋ฉ ํผ๋ธ๋ฆฌ์ฑ ํํธ๋ฅผ ๋ค์๋๋ฐ์,๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๊ฐ ํผ๊ทธ๋ง์์ ์์ฑํ ๋์์ธ๊ณผ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คaoibada
ใป
1
280
1
- ๆช่งฃๆฑบ
.stop().slideDown๊ณผ ๊ฐ์ด ์ฌ๋ผ์ด๋ ๋ค์ด ์์ ์คํ์ ์ฐ๋ ์ด์
-.stop().slideDown๊ณผ ๊ฐ์ด ์ฌ๋ผ์ด๋ ๋ค์ด ์์ ์คํ์ ์ฐ๋ ์ด์ ๊ฐ ๋ญ๊น์? ๊ฐ์์์๋ ํ?๋ฅผ ์์ ๊ธฐ ์ํด์๋ผ๊ณ ๋ค๋ ธ๋๋ฐ ์ดํด๋ฅผ ๋ชปํ๊ฒ ์ด์ ใ ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คsh9111232377
ใป
1
547
1
- ่งฃๆฑบ
ํผ๊ทธ๋ง ์์ ํ์ผ์ด ์ปค๋ฎค๋ํฐ์ ๊ณต๊ฐ๋๋๋ฐ, ๋ฌด๋ฃํ์์ด๋ผ์ ๊ทธ๋ฐ๊ฑด๊ฐ์?
ํผ๊ทธ๋ง ์์ ํ์ผ์ด ์ปค๋ฎค๋ํฐ์ ๊ณต๊ฐ๋๋๋ฐ, ๋ฌด๋ฃํ์์ด๋ผ์ ๊ทธ๋ฐ๊ฑด๊ฐ์?๊น์ง ๋๋ผ์, ์ปค๋ฎค๋ํฐ์ ์์ ํ์ผ ์ญ์ ํ๋๋ฐ, ์ ์๋ณธ๋ ๊ฐ์ด ์ญ์ ๋ฌ๋๋ผ๊ณ ์..ใ ใ ใ ใ ใ ใ ๋ฌด๋ฃํ์์ด์ด์ ๊ทธ๋ฐ๊ฑด์ง, ์ ๊ฐ ์ค์ ์ ๊ณต๊ฐ๋ก ํด๋์๊ฑด์ง, ๋น๊ณต๊ฐ ๋ฐฉ๋ฒ์ด ์๋์ง
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คhyesung
ใป
1
1,058
1
- ่งฃๆฑบ
์ฅ๋ฐ๊ตฌ๋ ํํธ checkbox ์ง๋ฌธ
์ ์๋.์ฅ๋ฐ๊ตฌ๋ ๋ฐ์ ํ์ํด ๋ ์ฒดํฌ๋ฐ์ค๊ฐ ์ข ์ด์ํด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.์ฒซ๋ฒ์งธ ์ฒดํฌ ๋ฐ์ค์ ๋ ๋ฒ์งธ ์ฒดํฌ ๋ฐ์ค์ ํฌ๊ธฐ๊ฐ ์ํ๋ช ๊ธ์์์ ๋ฐ๋ผ์ปค์ก๋ค ์์์ก๋ค ๋ถ๊ท์นํ๊ฒ ๋ณํ๋๋ฐ ์ด ๋ถ๋ถ์ด ์ข ์ด์ํฉ๋๋ค.์ฒซ๋ฒ์งธ ์์ดํ ์
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คvictus2025
ใป
1
549
1
- ๆช่งฃๆฑบ
๊ฐ์์๊ฐ์ง๋ฌธ
ํ์ฌ ์ทจ์ ๋ชฉ์ ์ด์๋๋ผ ํฅํ ๋๋ง์ ์๋น์ค๋ฅผ ๋ง๋ค์ด๋ณด์๋์ทจ์ง๋ก ์๋ฐ ์คํ๋ง ๋ฐฑ์๋๊ณผ์ ์ ๊ณต๋ถํ๊ณ ์๋๋ฐ์ํฅํ ํ๋ฉด๊ตฌํ์ ์ง์ ํ๊ธฐ ์ํด ์ด๋ฒ์ ์๋ก๋์จ ๊ฐ์๋ฅผ ์๊ฐํ๋ฉด ํฅํ ํด๋น์ทจ์ง์๋์์ด ๋ง์ด๋ ๊น์?์ฌ์ค html cs
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คpcdoomco44801
ใป
1
294
1
- ๆช่งฃๆฑบ
๊ฐ์ ๊ด๋ จ์ง๋ฌธ์ด์
ํ์ฌ ๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ with figma ์ด๊ฐ์ข๋ฅผ ์๊ฐํ๊ณ ์๋๋ฐ์ ๋ณด๋๊น ์๋ก์ด ๊ฐ์๊ฐ ๋๋์๋๋ผ๊ตฌ์ ํน์ ์ด๊ฒ ๋ด์ฉ์ ๋ง์ด ๊ฒน์น๋์????? ์ ๊ฐ ๊ณต๋ถ๊ฐ์งง์
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คpcdoomco44801
ใป
1
270
1
- ๆช่งฃๆฑบ
๋จ์ ๊ด๋ จ ์ง๋ฌธ
- ํ์ต ๊ด๋ จ ์ง๋ฌธ์ ๋จ๊ฒจ์ฃผ์ธ์. ์์ธํ ์์ฑํ๋ฉด ๋ ์ข์์! - ๋จผ์ ์ ์ฌํ ์ง๋ฌธ์ด ์์๋์ง ๊ฒ์ํด๋ณด์ธ์. - ์๋ก ์์๋ฅผ ์งํค๋ฉฐ ์กด์คํ๋ ๋ฌธํ๋ฅผ ๋ง๋ค์ด๊ฐ์. - ์ ๊น! ์ธํ๋ฐ ์๋น์ค ์ด์ ๊ด๋ จ ๋ฌธ์๋ 1:1 ๋ฌธ์ํ๊ธฐ๋ฅผ ์ด์ฉํด์ฃผ์ธ์.
HTML/CSSjquery๋ชจ๋ฐ์ผ-๋์์ธfigmaํฌํธํด๋ฆฌ์คree9312292337
ใป
1
336
1

