SCSS(SASS)+FLEX ๅฎๆฆใฌในใใณใทใWebใใญใธใงใฏใ with Figma
SCSS(SASS)ใจFLEX Layoutใๅฎๆฆใงๅฎ็งใซๆดป็จใใพใ๏ผFigmaใงใฆใงใใตใคใๅ จไฝใฎใกใคใณใใผใธใใใณไธป่ฆใชใตใใใผใธใฎUIใใใถใคใณใใไธ่ฒซๆงใฎใใใฏใฉในๅใจใจใใซHTMLใฏใคใคใผใใฌใผใ ๆง้ ใไฝๆใใฆใใใชใใทใณใฐใพใงๅฎไบใใใใไฝ็ณป็ใชใฌในใใณใทใใฆใงใใตใคใใใญใธใงใฏใๅถไฝ้็จใงใใๅ่จ41ๆ้ไปฅไธใฎใซใชใญใฅใฉใ ใฎไธญใงใๆ ธๅฟ็่ซใใใณๅฎๅๆดป็จ่ฝๅใๅๅใซ็ฟๅพใใPCใปใขใใคใซใปใฟใใฌใใๅฏพๅฟใฎใฌในใใณใทใใฌใคใขใฆใใ่จญ่จใปๅถไฝใใชใใใใฌในใใณใทใใฆใงใใใญใธใงใฏใใซ้ขใใ็ต้จใจใใฆใใฆใฏใใกใใใjQueryใฎๆ ธๅฟ็่ซใใใณๅฎๅๆดป็จ่ฝๅใพใงๅคงๅน ใซๅไธใใใใใจใใงใใพใใ
ๅ่ฌ็ 340ๅ
้ฃๆๅบฆ ๅ็ด
ๅ่ฌๆ้ ็กๅถ้

ไปใฎๅ่ฌ็ใใใใใ่ณชๅใๆฐใซใชใใพใใ๏ผ
- ๆช่งฃๆฑบ
SCSS์์ @keyframes ์ฌ์ฉ
์ง๋ฌธ ์ฃผ์ค ๋ ํญ์ 2๊ฐ์ง๋ฅผ ์ง์ผ์ฃผ์ธ์.์ค๋ฅ๊ฐ ๋๋ ๋ถ๋ถ์ด๋ ๊ถ๊ธํ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์บก์ณํด์ ์ฌ๋ฆฌ๊ธฐHTML+SCSS+JS ์ฝ๋ ์บก์ณ ๋ง๊ณ ํ ์คํธ๋ก ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ธฐ๋ง์ฝ ์ฝ๋๋ฅผ
HTML/CSSjavascriptsassjqueryscssahyun01256945
ใป
1
105
1
- ๆช่งฃๆฑบ
์ ์ฒด ์ ์ค์ ์ง๋ฌธ
<img src="https://cdn.inflearn.com/public/files/posts/6f58eabf-5b1b-40ed-83b6-9b06b354a6e9/9d03562d-1b45-4f8c-8e6d-703a422b951d.png" media-type="img"
HTML/CSSjavascriptsassjqueryscssash
ใป
1
132
2
- ๆช่งฃๆฑบ
ํผ๊ทธ๋ง ์๋ณธ ๋ค์ด๋ก๋
์ง๋ฌธ ์ฃผ์ค ๋ ํญ์ 2๊ฐ์ง๋ฅผ ์ง์ผ์ฃผ์ธ์.์ค๋ฅ๊ฐ ๋๋ ๋ถ๋ถ์ด๋ ๊ถ๊ธํ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์บก์ณํด์ ์ฌ๋ฆฌ๊ธฐHTML+SCSS+JS ์ฝ๋ ์บก์ณ ๋ง๊ณ ํ ์คํธ๋ก ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ธฐ๋ง์ฝ ์ฝ๋๋ฅผ
HTML/CSSjavascriptsassjqueryscssash
ใป
1
327
2
- ๆช่งฃๆฑบ
์์ ์ฑํฌ๊ฐ ๋ง์ง ์์ต๋๋ค!
์์ ์ฑํฌ๊ฐ ๋ง์ง ์์ต๋๋ค ใ ใ ํค๋์์ญ์ ํนํ ๊ทธ๋ ์ต๋๋ค ใ
HTML/CSSjavascriptsassjqueryscsshangong162031
ใป
1
165
2
- ๆช่งฃๆฑบ
์๊ฐํ ์์ฑ์ด ์๋๋ค์..
์๋ ํ์ธ์ ์ ์๋SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma ๊ฐ์๋ฅผ๊ตฌ๋งคํ๊ณ ์น์ 1all ๊ณผ ์น์ 2 ๋ช๊ฐ ๊ฐ์ ๋ฃ๊ณ ์๊ฐํ ๋จ๊ธฐ๋ ค๊ณ ํ๋๋ฐ ์์ฑํ๋ ๊ณณ์ด ์์ด์ ๊ธ์ฌ๋ฆฝ๋๋ค..<img src="https://cdn.i
HTML/CSSjavascriptsassjqueryscsstiti
ใป
1
149
1
- ๆช่งฃๆฑบ
ํผ๊ทธ๋ง๋ก ์ ๋ ํธ ๋ฐ์ค ์ธํฐ๋ ์ ๋ ๋๋๋ก ํ๋ ค๋ฉด?
<img src="https://cdn.inflearn.com/public/files/posts/0c14f7c6-2ea4-4686-b99d-06e695acfadf/a6b16559-4454-492f-9e91-648b8e423ba5.png" media-type="img"
HTML/CSSjavascriptsassjqueryscsshyunsokstar6698
ใป
1
223
1
- ๆช่งฃๆฑบ
ํผ๊ทธ๋ง ai ๊ธฐ๋ฅ ๊ด์ฐฎ์๊ฑฐ ์ถ์ฒํด์ฃผ์ค์ ์๋์?
ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํด์ผ ๋๋์ ์๋๋ฉด ํผ๊ทธ๋ง ai ์ ์ ๋ฒ์ ผ์ ๊ธฐ๋ค๋ ค์ผ ๋๋์?text to figma , image to figma ๊ด์ฐฎ์๊ฑฐ ์ถ์ฒํด์ฃผ์๋ฉด ๊ฐ์ฌ์ฌ
HTML/CSSjavascriptsassjqueryscsshyunsokstar6698
ใป
1
196
1
- ๆช่งฃๆฑบ
ํ ์ด๋ธ ๊ทธ๋ฆฌ๋ ค๊ณ ํ๋๋ฐ ์ด๋ ค์์
์ด๋ฐ ํ ์ด๋ธ ํผ๊ทธ๋ง๋ก ์ฝ๊ฒ ๊ทธ๋ฆฌ๋๋ฒ ์ข ์๋ ค์ฃผ์ธ์ ๊ฐ์์์ ์ฐธ๊ณ ํ ๋งํ ๋ถ๋ถ์ด ์์๊น์ฌ?<img src="https://cdn.inflearn.com/public/files/posts/95e5584e-cbff-4c29-bb8b-c273f80f7eed/e274
HTML/CSSjavascriptsassjqueryscsshyunsokstar6698
ใป
1
234
2
- ๆช่งฃๆฑบ
[PC ๋ ์ด์์ ์์ธ ํผ๋ธ๋ฆฌ์ฑ - ์ธํด๋ฃจ๋] class-detail ์์ ์ธํด๋ฃจ๋๊ฐ ์๋ํ์ง ์์์.
์ฐ์ , ๊ฐ์๋๋ก ๋ฐ๋ผํ์ ๋ index.html ์์๋ ํค๋์ ํธํฐ ์ธํด๋ฃจ๋๊ฐ ์๋ฉ๋๋ค. ๋ฐ๋ก test.html ์ ๋ง๋ค์ด์ ์ธํด๋ฃจ๋ ํด๋ด๋ ์ ๋ฉ๋๋ค. ํ์ง๋ง html/class-detail.html ์ ์ธํด๋ฃจ๋๋ฅผ ํ๋ฉด
HTML/CSSjavascriptsassjqueryscssijieun01236189
ใป
1
180
3
- ๆช่งฃๆฑบ
SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma
์๊ฐ์ ์ฐธ๊ณ ์๋ฃ ๋ฐ ์์ฑ๋ณธ ๋ค์ด๋ก๋ => ๋ค์ด๋ก๋ ํด๋ ์์ค ํ ์คํธ๊ฐ ์์ต๋๋ค. ใ ใ ๋ชป ์ฐพ๋๊ฑด์ง ๋ชจ๋ฅด๊ฒ ๋๋ฐ...์ฐพ์ง๋ชปํด์ ์ผ์ผ์ด ์น๊ณ ์์ด์. ์์คํ ์คํธ๊ฐ ์ด๋์๋์ง ์๋ ค์ฃผ์ธ์.
HTML/CSSjavascriptsassjqueryscssijieun01236189
ใป
1
145
1
- ๆช่งฃๆฑบ
ํ์ฑํ ์ค์ธ scss ํ๋๋ง css ๋ก ์ปดํ์ผ ๊ฐ๋ฅํ ๊น์?
<img src="https://cdn.inflearn.com/public/files/posts/6d983a65-a942-4075-b0c1-814756f4f3cd/image.png" media-type="img" alt="image.png" title="image.pn
HTML/CSSjavascriptsassjqueryscssdesignteam6939
ใป
1
295
2
- ๆช่งฃๆฑบ
์ค์๋ก style.css๋ฅผ ์ง์๋ฒ๋ ธ์ต๋๋ค...
์ค์๋ก style.cssํ์ผ์ ์ง์์ ๋ค์ ๋ง๋ค๋ ค๊ณ style.scss์ watch sass๋ฅผ ๋๋ ๋๋ฐ cssํ์ผ์ด ๋ค์ ์๊ธฐ์ง๊ฐ ์์์.. ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์์๊น์...? ใ ใ
HTML/CSSjavascriptsassjqueryscssssangpak974517
ใป
1
191
1
- ่งฃๆฑบ
slick slide ํด๋ ์ค ๋ค์ ๊ด๋ จ
PC ๋ ์ด์์ ์์ธ ํผ๋ธ๋ฆฌ์ฑ - ํ๋ก ํธ ํ์ด์ง(Focus Class) 02๊ฐ์์์ /*section : focus-class*/ .focus-cla
HTML/CSSjavascriptsassjqueryscssqor0923
ใป
1
261
1
- ๆช่งฃๆฑบ
live server๋ ์ ์ฉ๋๋๋ฐ index.html์ ๋๋ธํด๋ฆญํ๋ฉด ์๋ฌด๊ฒ๋ ์๋์ด ์์ด์..
featherlight ํ๋ค๊ฐ ๋ค ๊นจ์ ธ์์ด์ featherlight ๋ฌธ์ ์ธ๊ฐ ํ๋๋ฐhtmlํ์ผ ์์ฒด๊ฐ scss๋ก ์์ ํ ๊ฒ ์ ์ฉ์ด ์๋์ด์๋๋ผ๊ตฌ์...๋ผ์ด๋ธ์๋ฒ๋ก ๋ณด๋ฉด ์ ๋์ด์์ด์ ๋ฏธ์ฒ ๋ชฐ๋๋๋ฐ index.html ๋๋ธํด๋ฆญํ๋<p
HTML/CSSjavascriptsassjqueryscssujeongs1206266
ใป
1
382
1
- ๆช่งฃๆฑบ
์ฅ๋ฐ๊ตฌ๋ํ์ด์ง ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค.
์๊ฐ์ ์ฒญ ์ฅ๋ฐ๊ตฌ๋ ํ๋ฉด์์ ํญ๋ชฉ์ค 1๊ฐ๋ผ๋ ์ ํ์ด ํด์ ๋๋ฉด ์ ์ฒด์ ํ์ฒดํฌ๋ฐ์ค์ ์ฒดํฌ๋ ํ๋ ค์ผ ํ๋๊ฑฐ ์๋๊ฐ์? ์ด๋ค ์คํฌ๋ฆฝํธ๋ฅผ ์ถ๊ฐํด์ผ ์ ์ฉ์ด ๋๋์? <img src="https://cdn.inflearn.com/public/fi
HTML/CSSjavascriptsassjqueryscssa2mdesigner2029
ใป
1
288
1
- ๆช่งฃๆฑบ
๋ค๋น๊ฒ์ด์ ํด๋ฆญ์ ํค๋๋์ด๋ก ์ธํด ์ ๋ชฉ ๊ฐ๋ฆฌ๋ ๋ถ๋ถ ํด๊ฒฐ๋ฐฉ์
์ ์๋, ์๋ ํ์ธ์:)๊ฐ์ ์ ์ตํ๊ฒ ์ ๋ณด๊ณ ์์ต๋๋ค. ์ข์ ๊ฐ์ ํด์ฃผ์ ์ ๋ชฐ๋๋ ๋ถ๋ถ์ ์ ๋ง ๋ง์ด ์์๊ฐ๋๋ค! 'PC ๋ ์ด์์ ์์ธ ํผ๋ธ๋ฆฌ์ฑ - ๊ฐ์์๊ฐ 05(๋ค๋น๊ฒ์ด์ ๋ถ๋๋ฝ๊ฒ ์คํฌ๋กค๋ง)' ๊ฐ์์์ ํค๋ ๋์ด๋ก ์ธ
HTML/CSSjavascriptsassjqueryscssxoxojy4703
ใป
4
310
1
- ๆช่งฃๆฑบ
์์คํ ์คํธ๋ ์ ๊ณต์ด ์๋๋์?
์๋ ํ์ธ์~ ์ ์๋.์ ๊ณต๋๋ ํ์ผ ์ค '[๋ค์ด๋ก๋]+๋์์ธ+์์ (Beyond+Insight)' ์์ ์์คํ ์คํธ๊ฐ ์๋ค์. ์ ๊ณต์ด ์๋๋๊ฑด๊ฐ์?
sassmajae0215
ใป
1
285
1
- ๆช่งฃๆฑบ
์น์ 4. SCSS ํต์ฌ ์ด๋ก (Essential Theory) ์์ฑ์์ ๋ ๋ฐ๋ก ์์๊น์?
๋ค์ด๋ฐ๋ ๊ณณ์ ์์ด์์
HTML/CSSjavascriptsassjqueryscssssongjiae01273742
ใป
1
271
2
- ๆช่งฃๆฑบ
SCSS
์ง๋ฌธ ์ฃผ์ค ๋ ํญ์ 2๊ฐ์ง๋ฅผ ์ง์ผ์ฃผ์ธ์.์ค๋ฅ๊ฐ ๋๋ ๋ถ๋ถ์ด๋ ๊ถ๊ธํ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์บก์ณํด์ ์ฌ๋ฆฌ๊ธฐHTML+SCSS+JS ์ฝ๋ ์บก์ณ ๋ง๊ณ ํ ์คํธ๋ก ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ธฐ๋ง์ฝ ์ฝ๋๋ฅผ
HTML/CSSjavascriptsassjqueryscssimhj117775966
ใป
1
281
2
- ๆช่งฃๆฑบ
scss
์ง๋ฌธ ์ฃผ์ค ๋ ํญ์ 2๊ฐ์ง๋ฅผ ์ง์ผ์ฃผ์ธ์.์ค๋ฅ๊ฐ ๋๋ ๋ถ๋ถ์ด๋ ๊ถ๊ธํ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์บก์ณํด์ ์ฌ๋ฆฌ๊ธฐHTML+SCSS+JS ์ฝ๋ ์บก์ณ ๋ง๊ณ ํ ์คํธ๋ก ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ธฐ๋ง์ฝ ์ฝ๋๋ฅผ
HTML/CSSjavascriptsassjqueryscssimhj117775966
ใป
1
381
3

