SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma
SCSS(SASS)์ FLEX Layout์ ์ค์ ์ ์๋ฒฝํ๊ฒ ํ์ฉํฉ๋๋ค! ํผ๊ทธ๋ง๋ก ์ ์ฒด ์น์ฌ์ดํธ์ ๋ฉ์ธ ํ์ด์ง ๋ฐ ํต์ฌ ์๋ธ ํ์ด์ง UI๋ฅผ ๋์์ธํ๊ณ , ์ผ๊ด์ฑ ์๋ ํด๋์ค๋ค์๊ณผ ํจ๊ป HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ํผ๋ธ๋ฆฌ์ฑ๊น์ง ์๋ฃํ๋ ์ฒด๊ณ์ ์ธ ๋ฐ์ํ ์น ์ฌ์ดํธ ํ๋ก์ ํธ ์ ์ ๊ณผ์ ์ ๋๋ค. ์ด 41์๊ฐ ์ด์์ ๊ณผ์ ์์์ ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ์ ์ถฉ๋ถํ ์ตํ๊ณ , PC - ๋ชจ๋ฐ์ผ - ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ๋ ์ด์์์ ์ค๊ณ ๋ฐ ์ ์ํ๋ฉด์ ๋ฐ์ํ ์น ํ๋ก์ ํธ์ ๋ํ ๊ฒฝํ๊ณผ ๋ ธํ์ฐ๋ ๋ฌผ๋ก ์ ์ด์ฟผ๋ฆฌ(jQuery) ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ๊น์ง ๋ํญ ํฅ์์ํค๊ฒ ๋ฉ๋๋ค.
์๊ฐ์ 338๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ๋ฏธํด๊ฒฐ
SCSS์์ @keyframes ์ฌ์ฉ
์ง๋ฌธ ์ฃผ์ค ๋ ํญ์ 2๊ฐ์ง๋ฅผ ์ง์ผ์ฃผ์ธ์.์ค๋ฅ๊ฐ ๋๋ ๋ถ๋ถ์ด๋ ๊ถ๊ธํ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์บก์ณํด์ ์ฌ๋ฆฌ๊ธฐHTML+SCSS+JS ์ฝ๋ ์บก์ณ ๋ง๊ณ ํ ์คํธ๋ก ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ธฐ๋ง์ฝ ์ฝ๋๋ฅผ
HTML/CSSjavascriptsassjqueryscssahy
ใป
1
96
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/CSSjavascriptsassjqueryscssSJ
ใป
1
116
2
- ๋ฏธํด๊ฒฐ
ํผ๊ทธ๋ง ์๋ณธ ๋ค์ด๋ก๋
์ง๋ฌธ ์ฃผ์ค ๋ ํญ์ 2๊ฐ์ง๋ฅผ ์ง์ผ์ฃผ์ธ์.์ค๋ฅ๊ฐ ๋๋ ๋ถ๋ถ์ด๋ ๊ถ๊ธํ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์บก์ณํด์ ์ฌ๋ฆฌ๊ธฐHTML+SCSS+JS ์ฝ๋ ์บก์ณ ๋ง๊ณ ํ ์คํธ๋ก ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ธฐ๋ง์ฝ ์ฝ๋๋ฅผ
HTML/CSSjavascriptsassjqueryscssSJ
ใป
1
294
2
- ๋ฏธํด๊ฒฐ
์์ ์ฑํฌ๊ฐ ๋ง์ง ์์ต๋๋ค!
์์ ์ฑํฌ๊ฐ ๋ง์ง ์์ต๋๋ค ใ ใ ํค๋์์ญ์ ํนํ ๊ทธ๋ ์ต๋๋ค ใ
HTML/CSSjavascriptsassjqueryscsshangong16
ใป
1
149
2
- ๋ฏธํด๊ฒฐ
์๊ฐํ ์์ฑ์ด ์๋๋ค์..
์๋ ํ์ธ์ ์ ์๋SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma ๊ฐ์๋ฅผ๊ตฌ๋งคํ๊ณ ์น์ 1all ๊ณผ ์น์ 2 ๋ช๊ฐ ๊ฐ์ ๋ฃ๊ณ ์๊ฐํ ๋จ๊ธฐ๋ ค๊ณ ํ๋๋ฐ ์์ฑํ๋ ๊ณณ์ด ์์ด์ ๊ธ์ฌ๋ฆฝ๋๋ค..<img src="https://cdn.i
HTML/CSSjavascriptsassjqueryscss๋ํ
ใป
1
140
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/CSSjavascriptsassjqueryscssํ์์ค
ใป
1
210
1
- ๋ฏธํด๊ฒฐ
ํผ๊ทธ๋ง ai ๊ธฐ๋ฅ ๊ด์ฐฎ์๊ฑฐ ์ถ์ฒํด์ฃผ์ค์ ์๋์?
ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํด์ผ ๋๋์ ์๋๋ฉด ํผ๊ทธ๋ง ai ์ ์ ๋ฒ์ ผ์ ๊ธฐ๋ค๋ ค์ผ ๋๋์?text to figma , image to figma ๊ด์ฐฎ์๊ฑฐ ์ถ์ฒํด์ฃผ์๋ฉด ๊ฐ์ฌ์ฌ
HTML/CSSjavascriptsassjqueryscssํ์์ค
ใป
1
175
1
- ๋ฏธํด๊ฒฐ
ํ ์ด๋ธ ๊ทธ๋ฆฌ๋ ค๊ณ ํ๋๋ฐ ์ด๋ ค์์
์ด๋ฐ ํ ์ด๋ธ ํผ๊ทธ๋ง๋ก ์ฝ๊ฒ ๊ทธ๋ฆฌ๋๋ฒ ์ข ์๋ ค์ฃผ์ธ์ ๊ฐ์์์ ์ฐธ๊ณ ํ ๋งํ ๋ถ๋ถ์ด ์์๊น์ฌ?<img src="https://cdn.inflearn.com/public/files/posts/95e5584e-cbff-4c29-bb8b-c273f80f7eed/e274
HTML/CSSjavascriptsassjqueryscssํ์์ค
ใป
1
208
2
- ๋ฏธํด๊ฒฐ
[PC ๋ ์ด์์ ์์ธ ํผ๋ธ๋ฆฌ์ฑ - ์ธํด๋ฃจ๋] class-detail ์์ ์ธํด๋ฃจ๋๊ฐ ์๋ํ์ง ์์์.
์ฐ์ , ๊ฐ์๋๋ก ๋ฐ๋ผํ์ ๋ index.html ์์๋ ํค๋์ ํธํฐ ์ธํด๋ฃจ๋๊ฐ ์๋ฉ๋๋ค. ๋ฐ๋ก test.html ์ ๋ง๋ค์ด์ ์ธํด๋ฃจ๋ ํด๋ด๋ ์ ๋ฉ๋๋ค. ํ์ง๋ง html/class-detail.html ์ ์ธํด๋ฃจ๋๋ฅผ ํ๋ฉด
HTML/CSSjavascriptsassjqueryscss์ด์ง์
ใป
1
156
3
- ๋ฏธํด๊ฒฐ
SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma
์๊ฐ์ ์ฐธ๊ณ ์๋ฃ ๋ฐ ์์ฑ๋ณธ ๋ค์ด๋ก๋ => ๋ค์ด๋ก๋ ํด๋ ์์ค ํ ์คํธ๊ฐ ์์ต๋๋ค. ใ ใ ๋ชป ์ฐพ๋๊ฑด์ง ๋ชจ๋ฅด๊ฒ ๋๋ฐ...์ฐพ์ง๋ชปํด์ ์ผ์ผ์ด ์น๊ณ ์์ด์. ์์คํ ์คํธ๊ฐ ์ด๋์๋์ง ์๋ ค์ฃผ์ธ์.
HTML/CSSjavascriptsassjqueryscss์ด์ง์
ใป
1
135
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/CSSjavascriptsassjqueryscssdesign_team
ใป
1
275
2
- ๋ฏธํด๊ฒฐ
์ค์๋ก style.css๋ฅผ ์ง์๋ฒ๋ ธ์ต๋๋ค...
์ค์๋ก style.cssํ์ผ์ ์ง์์ ๋ค์ ๋ง๋ค๋ ค๊ณ style.scss์ watch sass๋ฅผ ๋๋ ๋๋ฐ cssํ์ผ์ด ๋ค์ ์๊ธฐ์ง๊ฐ ์์์.. ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์์๊น์...? ใ ใ
HTML/CSSjavascriptsassjqueryscss๋ง๊ณ 19
ใป
1
184
1
- ํด๊ฒฐ
slick slide ํด๋ ์ค ๋ค์ ๊ด๋ จ
PC ๋ ์ด์์ ์์ธ ํผ๋ธ๋ฆฌ์ฑ - ํ๋ก ํธ ํ์ด์ง(Focus Class) 02๊ฐ์์์ /*section : focus-class*/ .focus-cla
HTML/CSSjavascriptsassjqueryscss๋ฐฑ๊ทผ์ฐ(qor0923)
ใป
1
248
1
- ๋ฏธํด๊ฒฐ
live server๋ ์ ์ฉ๋๋๋ฐ index.html์ ๋๋ธํด๋ฆญํ๋ฉด ์๋ฌด๊ฒ๋ ์๋์ด ์์ด์..
featherlight ํ๋ค๊ฐ ๋ค ๊นจ์ ธ์์ด์ featherlight ๋ฌธ์ ์ธ๊ฐ ํ๋๋ฐhtmlํ์ผ ์์ฒด๊ฐ scss๋ก ์์ ํ ๊ฒ ์ ์ฉ์ด ์๋์ด์๋๋ผ๊ตฌ์...๋ผ์ด๋ธ์๋ฒ๋ก ๋ณด๋ฉด ์ ๋์ด์์ด์ ๋ฏธ์ฒ ๋ชฐ๋๋๋ฐ index.html ๋๋ธํด๋ฆญํ๋<p
HTML/CSSjavascriptsassjqueryscss์ด์ ์
ใป
1
372
1
- ๋ฏธํด๊ฒฐ
์ฅ๋ฐ๊ตฌ๋ํ์ด์ง ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค.
์๊ฐ์ ์ฒญ ์ฅ๋ฐ๊ตฌ๋ ํ๋ฉด์์ ํญ๋ชฉ์ค 1๊ฐ๋ผ๋ ์ ํ์ด ํด์ ๋๋ฉด ์ ์ฒด์ ํ์ฒดํฌ๋ฐ์ค์ ์ฒดํฌ๋ ํ๋ ค์ผ ํ๋๊ฑฐ ์๋๊ฐ์? ์ด๋ค ์คํฌ๋ฆฝํธ๋ฅผ ์ถ๊ฐํด์ผ ์ ์ฉ์ด ๋๋์? <img src="https://cdn.inflearn.com/public/fi
HTML/CSSjavascriptsassjqueryscssa2m_designer
ใป
1
279
1
- ๋ฏธํด๊ฒฐ
๋ค๋น๊ฒ์ด์ ํด๋ฆญ์ ํค๋๋์ด๋ก ์ธํด ์ ๋ชฉ ๊ฐ๋ฆฌ๋ ๋ถ๋ถ ํด๊ฒฐ๋ฐฉ์
์ ์๋, ์๋ ํ์ธ์:)๊ฐ์ ์ ์ตํ๊ฒ ์ ๋ณด๊ณ ์์ต๋๋ค. ์ข์ ๊ฐ์ ํด์ฃผ์ ์ ๋ชฐ๋๋ ๋ถ๋ถ์ ์ ๋ง ๋ง์ด ์์๊ฐ๋๋ค! 'PC ๋ ์ด์์ ์์ธ ํผ๋ธ๋ฆฌ์ฑ - ๊ฐ์์๊ฐ 05(๋ค๋น๊ฒ์ด์ ๋ถ๋๋ฝ๊ฒ ์คํฌ๋กค๋ง)' ๊ฐ์์์ ํค๋ ๋์ด๋ก ์ธ
HTML/CSSjavascriptsassjqueryscssJi Young.
ใป
4
308
1
- ๋ฏธํด๊ฒฐ
์์คํ ์คํธ๋ ์ ๊ณต์ด ์๋๋์?
์๋ ํ์ธ์~ ์ ์๋.์ ๊ณต๋๋ ํ์ผ ์ค '[๋ค์ด๋ก๋]+๋์์ธ+์์ (Beyond+Insight)' ์์ ์์คํ ์คํธ๊ฐ ์๋ค์. ์ ๊ณต์ด ์๋๋๊ฑด๊ฐ์?
sass์ด์ฌ์ค
ใป
1
279
1
- ๋ฏธํด๊ฒฐ
์น์ 4. SCSS ํต์ฌ ์ด๋ก (Essential Theory) ์์ฑ์์ ๋ ๋ฐ๋ก ์์๊น์?
๋ค์ด๋ฐ๋ ๊ณณ์ ์์ด์์
HTML/CSSjavascriptsassjqueryscss๋ํผ
ใป
1
266
2
- ๋ฏธํด๊ฒฐ
SCSS
์ง๋ฌธ ์ฃผ์ค ๋ ํญ์ 2๊ฐ์ง๋ฅผ ์ง์ผ์ฃผ์ธ์.์ค๋ฅ๊ฐ ๋๋ ๋ถ๋ถ์ด๋ ๊ถ๊ธํ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์บก์ณํด์ ์ฌ๋ฆฌ๊ธฐHTML+SCSS+JS ์ฝ๋ ์บก์ณ ๋ง๊ณ ํ ์คํธ๋ก ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ธฐ๋ง์ฝ ์ฝ๋๋ฅผ
HTML/CSSjavascriptsassjqueryscssimhj11777
ใป
1
270
2
- ๋ฏธํด๊ฒฐ
scss
์ง๋ฌธ ์ฃผ์ค ๋ ํญ์ 2๊ฐ์ง๋ฅผ ์ง์ผ์ฃผ์ธ์.์ค๋ฅ๊ฐ ๋๋ ๋ถ๋ถ์ด๋ ๊ถ๊ธํ ๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์บก์ณํด์ ์ฌ๋ฆฌ๊ธฐHTML+SCSS+JS ์ฝ๋ ์บก์ณ ๋ง๊ณ ํ ์คํธ๋ก ๋ถ์ฌ๋ฃ๊ธฐ ํ๊ธฐ๋ง์ฝ ์ฝ๋๋ฅผ
HTML/CSSjavascriptsassjqueryscssimhj11777
ใป
1
368
3