profile
Harimad
Here and Now. ๐Ÿง—โ€โ™‚๏ธ
๊ธ€์‹œ๋ฆฌ์ฆˆ์†Œ๊ฐœ
ํƒœ๊ทธ ๋ชฉ๋ก
์ „์ฒด๋ณด๊ธฐ (45)React(12)JavaScript(5)Firebase(3)CSS(3)js(3)todo(2)JSON Server(2)grid(2)Fetch(2)router(2)GET(2)POST(2)JSDoc(1)function(1)Event(1)์ •๊ทœํ‘œํ˜„์‹(1)scss(1)๋ฐฐ์—ด(1)mui(1)Root(1)semantic tag(1)badge(1)Internalization(1)promise(1)API(1)npm(1)slide(1)ํƒ€์ž๊ธฐํšจ๊ณผ(1)์„œ์šธ์‹œ ๊ณต๊ณต API(1)http(1)๋ฆฌ์•กํŠธ(1)coords(1)vueํ”„๋กœ์ ํŠธ๊ตฌ์กฐ(1)๋ฐ˜์‘ํ˜•(1)responsive(1)realtime(1)yarn(1)FE interview(1)XMLHTTPRequest(1)Regularexpression(1)Accordion(1)์˜๋ฏธ์žˆ๋Š” ํƒœ๊ทธ(1)์Šคํฌ๋ฆฐ๋ฆฌ๋”(1)๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ(1)CSS์ ์šฉ์ˆœ์œ„(1)await(1)useEffect(1)useState(1)img(1)Fetch API(1)redux-toolkit-thunk(1)async(1)vuecli(1)Intl(1)method(1)layout(1)slideNavigation(1)์˜ค๋ฅ˜ํ•ด๊ฒฐ(1)mailing(1)vuejs(1)json(1)redux-toolkit(1)64bit(1)thunk(1)calc()(1)put(1)delete(1)context(1)RealtimeDB(1)State(1)useMemo(1)useReducer(1)useRef(1)this(1)CSS์ ์šฉ๋ฐฉ๋ฒ•(1)๋ถ€๋™์†Œ์ˆ˜์ (1)์นด์นด์˜ค ์ง€๋„ API(1)Sass(1)html(1)useCallback(1)ํ˜‘์—…(1)typewriter-effect(1)๊ธฐ๋ณธ๊ตฌ์กฐ์„ค๊ณ„(1)Markdown(1)array(1)v5(1)react typescript(1)v6(1)vue์‹คํ–‰๊ตฌ์กฐ(1)๊ฒ€์ƒ‰์—”์ง„์ตœ์ ํ™”(1)seo(1)InternalizationAPI(1)vanillajs(1)Map(1)CRUD(1)redux(1)CallbackHell(1)area(1)react router(1)vscode(1)authentication(1)git(1)typescript(1)์ฃผ์„(1)Comment(1)Auth(1)
post-thumbnail

[SeSAC Front-end] CSS๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์Šค๋Ÿฝ๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” "Sass" ์•Œ์•„๋ณด๊ธฐ

์ด๋ฒˆ ์žฅ์—์„œ๋Š” CSS์–ธ์–ด๋ฅผ ์กฐ๊ธˆ ๋” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์Šค๋Ÿฝ๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ๋ฒ•๋“ค์„ ์ œ๊ณตํ•˜๋Š” Sass์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.์ˆ˜๋ฐฑ ์ˆ˜์ฒœ์ค„๋กœ ์ž‘์„ฑ๋œ CSS๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์‰ฝ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ Sass๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ์ˆœ์ˆ˜ CSS๋กœ ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ์‰ฝ๊ณ 

CSSSassscssvscode
2022๋…„ 10์›” 31์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[SeSAC Front-end] CSS grid๋ฅผ ์ด์šฉํ•œ ์›น ํŽ˜์ด์ง€ ๊ตฌ์กฐ ๋งŒ๋“ค๊ธฐ

์ด๋ฒˆ ์žฅ์—์„œ๋Š” CSS grid์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„๋ณด๊ณ , CSS Grid(MDN)๋ฅผ ์ด์šฉํ•ด์„œ ์•„๋ž˜์˜ ์›น ํŽ˜์ด์ง€ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.Grid๋ž€ ๊ฒฉ์ž, ๋ฐ”๋‘‘ํŒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.Grid Layout์ด๋ž€ ์›น ์‚ฌ์ดํŠธ๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์—ด(column)๋กœ ๋‚˜๋ˆˆ ํ›„ ๋ฉ”๋‰ด๋‚˜ ๋ณธ๋ฌธ, ์ด๋ฏธ

CSSgrid
2022๋…„ 10์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท
post-thumbnail

[SeSAC Front-end] ์›น ํŽ˜์ด์ง€ ๊ธฐ๋ณธ ๊ตฌ์กฐ ์„ค๊ณ„

์ด๋ฒˆ ์žฅ์—์„œ๋Š” ์›น ํŽ˜์ด์ง€ ๊ธฐ๋ณธ ๊ตฌ์กฐ๋ฅผ ์„ค๊ณ„ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.์•„๋ž˜๋Š” ์›น ํŽ˜์ด์ง€์—์„œ ํ•ด๋‹นํ•˜๋Š” ์˜์—ญ์„ ์ƒ‰๊น”๋ณ„๋กœ ๋‚˜ํƒ€๋ƒˆ์Šต๋‹ˆ๋‹ค.ํŠน์ • ๋„“์ด(768px)๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํŠน์ • ์˜์—ญ์ด ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.์ฆ‰, ๋ฐ˜์‘ํ˜• ์›น ํŽ˜์ด์ง€๋ฅผ ์ ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.์•„๋ž˜๋Š” ์ „ํ˜•์ ์œผ๋กœ ๋งŽ์€ ์›น ์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š”

CSSRootcalc()responsive๊ธฐ๋ณธ๊ตฌ์กฐ์„ค๊ณ„๋ฐ˜์‘ํ˜•
2022๋…„ 10์›” 28์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท