profile
๐Ÿ™‹โ€โ™€๏ธ ์•ˆ๋…•ํ•˜์„ธ์š”! ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค.

[Bootstrap] Grid Gutters ์ œ๊ฑฐ, Badge ํ…์ŠคํŠธ ์ •๋ ฌ

Grid Gutters ์ œ๊ฑฐ ์ œ๊ฑฐ ์ „ ์ œ๊ฑฐ ํ›„ gx-*: ์ˆ˜ํ‰ gutter gy-*: ์ˆ˜์ง gutter g-*: ์ˆ˜ํ‰ ๋ฐ ์ˆ˜์ง gutter Ref https://runebook.dev/ko/docs/bootstrap/layout/gutters/index Badges ํ…์ŠคํŠธ ์ •๋ ฌ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋กœ ์›น ์ƒ์—์„œ ํ™•์ธํ–ˆ์„ ๋•Œ๋Š” ์ˆ˜ํ‰ ์ •๋ ฌ์ด ์ •์ƒ์ ์œผ๋กœ ๋˜์–ด์žˆ๋‹ค...

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

[Javascript] ๊ธˆ์œต์•ฑ ํ† ์ด ํ”„๋กœ์ ํŠธ - ๋ฆฌํŒฉํ† ๋ง

๐Ÿ’ก ๋ฆฌํŒฉํ† ๋ง import์šฉ ํŒŒ์ผ ์ƒ์„ฑ ์šฉ๋„์— ๋”ฐ๋ฅธ js ํŒŒ์ผ ๋ถ„๋ฆฌ JSON ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ chart.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ` โ†’ ` ๋ณ€๊ฒฝ className, classList.add, setAttribute JSON ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๋ถ€๋ถ„ ๊ตฌ์กฐ ๋ณ€๊ฒฝ ์ค‘

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

[Javascript] ๊ธˆ์œต์•ฑ ํ† ์ด ํ”„๋กœ์ ํŠธ

๐Ÿช™ Fintech App ๊ธˆ์œต์•ฑ ํ™”๋ฉด์„ ์›น์œผ๋กœ ๊ตฌํ˜„ํ•ด๋ณด๋Š” ํ”„๋กœ์ ํŠธ์ด๋‹ค. 5์›” 6์ผ ์ €๋…๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ด์„œ 5์›” 10์ผ๊นŒ์ง€, ์ฃผ๋ง์„ ์ œ์™ธํ•œ๋‹ค๋ฉด ์•ฝ 3์ผ๋™์•ˆ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•ด์•ผ ํ–ˆ๋‹ค. Figma๋ฅผ ํ†ตํ•ด ๋ฐ›์€ ๋””์ž์ธ ์‹œ์•ˆ์„ ๋ณด๊ณ  HTML๊ณผ CSS๋กœ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ–ˆ๊ณ , Javas

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

[HTML/CSS] ๊ตญ๋ฏผ์€ํ–‰ ์›น์‚ฌ์ดํŠธ ํด๋ก ์ฝ”๋”ฉ

๐Ÿ‘ ๋“ค์–ด๊ฐ€๊ธฐ ์ „.. ์ด์ „๋ถ€ํ„ฐ ์š”์†Œ๋“ค์„ ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ์— ์ž์‹ ์ด ์—†์—ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์„ ์žก์ง€ ์•Š๊ณ  ํ•ญ์ƒ ์š”์†Œ ์œ„์น˜๋ฅผ margin-left๋‚˜ margin-right์„ ์จ์„œ ๋ง‰๋ฌด๊ฐ€๋‚ด๋กœ ๊พธ์—ญ๊พธ์—ญ ๋งž์ถ”๊ธฐ ์ผ์‘ค์˜€๊ณ , ๊ทธ๋ž˜์„œ ํ™”๋ฉด ๋น„์œจ์ด ๋ฐ”๋€Œ๋ฉด ๋ฐฐ์น˜ํ•ด๋‘” ๋ฒ„ํŠผ์ด ํ™”๋ฉด ๋์ž๋ฝ์— ๊ฐ€ ์žˆ๊ฑฐ๋‚˜

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

ํŒจ์ŠคํŠธ ์บ ํผ์Šค MGS 3๊ธฐ - 4์›” 21์ผ(CSS ์†์„ฑ)

๐Ÿ’ก Keyword ์ „ํ™˜ ํšจ๊ณผ(transition)์™€ ๊ฐ ์†์„ฑ๋“ค ๋ณ€ํ™˜ ํšจ๊ณผ(transform)์™€ ๊ฐ ํ•จ์ˆ˜๋“ค ์†์„ฑ perspective์™€ ํ•จ์ˆ˜ perspective์˜ ์ฐจ์ด์  1. ์ „ํ™˜(transition) transition: ์†์„ฑ๋ช… ์ง€์†์‹œ๊ฐ„ ํƒ€์ด๋ฐํ•จ์ˆ˜ ๋Œ€๊ธฐ์‹œ๊ฐ„ ์š”

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

ํŒจ์ŠคํŠธ ์บ ํผ์Šค MGS 3๊ธฐ - 4์›” 20์ผ(CSS ์†์„ฑ)

๐Ÿ’ก Keyword position flex ๋นจ๊ฐ„์ƒ‰: ๊ธฐ๋ณธ ๊ฐ’ ํŒŒ๋ž€์ƒ‰: ๊ธฐ๋ณธ ๊ฐ’ ์™ธ์— ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ 1. position ์š”์†Œ์˜ ์œ„์น˜ ์ง€์ • ๊ธฐ์ค€์ด๋‹ค. position๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋Š” CSS ์†์„ฑ๋“ค(top, bottom, left, right, z-index

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

ํŒจ์ŠคํŠธ ์บ ํผ์Šค MGS 3๊ธฐ - 4์›” 20์ผ

๋“ค์–ด๊ฐ€๊ธฐ ์ „.. ์ธ๋ผ์ธ ์ƒ์ž ์ƒํ•˜ ์—ฌ๋ฐฑ์€ ์ ์šฉ โŒ ๐Ÿ‘‰ ๋ฐ€์–ด๋‚ด์ง€ ๋ชปํ•œ๋‹ค๊ณ  ๋งํ•˜๋Š” ๊ฒƒ์ด ์ข€ ๋” ์ •ํ™•, ๋ง๊ทธ๋ ค์ง„๋‹ค. ์ขŒ์šฐ ์—ฌ๋ฐฑ์€ ์ ์šฉ โญ• ๋ธ”๋ก ์ƒ์ž ์ƒํ•˜์ขŒ์šฐ ์—ฌ๋ฐฑ ์ ์šฉ โญ• ๐Ÿ“– ์˜ˆ์ œ 1 `๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ถ€๋ชจ ์š”์†Œ ์•ˆ์— ์ž์‹ ์š”์†Œ๋ฅผ ๋‘ ๊ฐœ ๋งŒ๋“ค๊ณ , ์ž์‹

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

ํŒจ์ŠคํŠธ ์บ ํผ์Šค MGS 3๊ธฐ - 4์›” 19์ผ(CSS ์†์„ฑ)

css๋ฅผ ํ†ตํ•ด html์˜ ์–ด๋–ค ๋ถ€๋ถ„์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์„๊นŒ?๋ฐ•์Šค ๋ชจ๋ธ๊ธ€๊ผด๋ฐฐ๊ฒฝ๋ฐฐ์น˜ํ”Œ๋ ‰์Šค(์ •๋ ฌ)์ „ํ™˜: ์š”์†Œ์˜ ์ „, ํ›„ ์ƒํƒœ๋ฅผ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ฒ˜๋ฆฌ๋ณ€ํ™˜: ์š”์†Œ๋ฅผ ํšŒ์ „ํ•˜๊ฑฐ๋‚˜ ์ด๋™, ํฌ๊ธฐ ์กฐ์ •๋„์›€์• ๋‹ˆ๋ฉ”์ด์…˜: ์ „ํ™˜๋ณด๋‹ค ์กฐ๊ธˆ ๋” ๋ณต์žกํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Œ๊ทธ๋ฆฌ๋“œ: ํ–‰๊ณผ ์—ด์˜ ๊ตฌ์กฐ๋ฅผ ๊ฐ€

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

ํŒจ์ŠคํŠธ ์บ ํผ์Šค MGS 3๊ธฐ - 4์›” 19์ผ(CSS ๊ฐœ์š”)

CSS ์„ ์–ธ ๋ฐฉ์‹์—๋Š” ๋‚ด์žฅ ๋ฐฉ์‹, ์ธ๋ผ์ธ ๋ฐฉ์‹, ๋งํฌ ๋ฐฉ์‹, @import ๋ฐฉ์‹์œผ๋กœ ์ด 4๊ฐ€์ง€์˜ ๋ฐฉ์‹์ด ์žˆ๋‹ค.์œ ์ง€๋ณด์ˆ˜ ์ธก๋ฉด์—์„œ ๋‹จ์ ์ด ๋งŽ๋‹ค. ์ง์ ‘์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑ ์‹œ์— ๋‚ด์žฅ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ๊ถŒ์žฅ๋˜์ง€ ์•Š๋Š”๋‹ค.๋„ˆ๋ฌด ์ง€๋‚˜์น˜๊ฒŒ ์šฐ์„ ํ•ด์„œ css๋ฅผ ๋ฎ์–ด์“ฐ๋ฉด์„œ ์ˆ˜์ •ํ•˜๊ณ  ์‹ถ์–ด

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

ํŒจ์ŠคํŠธ ์บ ํผ์Šค MGS 3๊ธฐ - 4์›” 18์ผ

๐Ÿ’ก Keyword Javascript์˜ ํ•จ์ˆ˜ ์›นํŽ˜์ด์ง€์˜ ๊ตฌ์กฐ ํŒŒ์•… 1. Javascript ๊ตฌ์กฐ์ ์ธ ๊ฐ์ฒด๋ฅผ ์ •์ ์œผ๋กœ ์ฐ์–ด๋‚ด๋Š” html๊ณผ๋Š” ๋‹ฌ๋ฆฌ js๋Š” ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ๋ฐ˜๋ณต, ๋น„๊ต, ํ‰๊ฐ€, ์ €์žฅ ๋“ฑ ์ผ๋ จ์˜ ์ผ๋“ค์„ CPU์— ๋ช…๋ นํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ ํ‘œํ˜„๋ ฅ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค

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

ํŒจ์ŠคํŠธ ์บ ํผ์Šค MGS 3๊ธฐ - 4์›” 15์ผ

๐Ÿ’ก Keyword ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด ์ƒ๋Œ€ ๊ฒฝ๋กœ์™€ ์ ˆ๋Œ€ ๊ฒฝ๋กœ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ CodePen ๋ธŒ๋ผ์šฐ์ € ์Šคํƒ€์ผ ์ดˆ๊ธฐํ™” 1. ์ปดํ“จํ„ฐ์˜ ๋ฉ”๋ชจ๋ฆฌ ์ปดํ“จํ„ฐ๋Š” ๋ฉ”๋ชจ๋ฆฌ์— ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ CPU๊ฐ€ ๊ณ„์‚ฐํ•ด์ฃผ๋Š” ๊ณ„์‚ฐ๊ธฐ์ด๋‹ค. ๋ฉ”๋ชจ๋ฆฌ๋Š” ์ž…๋ ฅ๋œ ์‹ ํ˜ธ(์ฃผ์†Œ/๋ฐ์ดํ„ฐ)์— ๋Œ€ํ•œ ์ „์ž ์ƒํƒœ

2022๋…„ 4์›” 15์ผ
ยท
0๊ฐœ์˜ ๋Œ“๊ธ€
ยท