Banner

My Tech Blog (์‚ฌ์ดํŠธ)

CSS Diner๋Š” CSS ์„ ํƒ์ž๋ฅผ ํ•™์Šตํ•˜๊ณ  ์—ฐ์Šตํ•  ์ˆ˜ ์žˆ๋Š” ์žฌ๋ฏธ์žˆ๋Š” ์›น ๊ธฐ๋ฐ˜ ๊ฒŒ์ž„์ด๋‹ค.์‚ฌ์šฉ์ž๊ฐ€ HTML ์ฝ”๋“œ์— ์ ์šฉํ•  ์˜ฌ๋ฐ”๋ฅธ CSS ์„ ํƒ์ž๋ฅผ ์ž‘์„ฑํ•˜๋ฉด, ๊ฒŒ์ž„์˜ ๊ฐ ๋ ˆ๋ฒจ์„ ํด๋ฆฌ์–ดํ•˜๋ฉฐ ์ ์  ๋” ๋ณต์žกํ•œ ์„ ํƒ์ž๋ฅผ ์ตํž ์ˆ˜ ์žˆ๋‹ค. ์ด ๊ฒŒ์ž„์€ CSS๋ฅผ ๋ฐฐ์šฐ๊ฑฐ๋‚˜ ๋ณต์Šตํ•˜๊ณ  ์‹ถ์€ ์ดˆ๋ณด์ž์™€ ์ค‘๊ธ‰์ž๋ฅผ ์œ„ํ•œ ์ข‹์€ ๋„๊ตฌ์ด๊ณ ํŠนํžˆ ์„ ํƒ์ž ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ๋“ค๊ป˜ ์ถ”์ฒœํ•œ๋‹ค.ํฌ๋กค๋ง ์—ฐ์Šตํ•˜์‹œ๋Š” ๋ถ„๋“ค๊ป˜๋„ ๋งŽ์€ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™๋‹ค.  https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io ๊ฐ€์žฅ ์‰ฌ์šด ๋‚œ์ด๋„์ธ 1๋ฒˆ๋ถ€ํ„ฐ ๊ฐ€์žฅ ์–ด๋ ค์šด 32๋ฒˆ๊นŒ์ง€ ์žˆ๋‹ค.ใ…‹ใ…‹ ํ™”๋ฉด์—์„œ ๊ณ ๋ฅด๋ผ๊ณ  ํ•˜๋Š” ๋ฌผ๊ฑด์„ ๊ณ ๋ฅด๋Š” CSS..
๋‚˜๋งŒ ์•Œ๊ธฐ์—๋Š” ์•„๊นŒ์šด ์‚ฌ์ดํŠธ `Learn Git Branching` ์€ Git์„ ์“ธ ๋•Œ ํ•„์š”ํ•œ ๋ธŒ๋žœ์น˜์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ์žก๋Š” ๊ฒƒ์„ ๋•๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ์‚ฌ์ดํŠธ์ด๋‹ค. https://learngitbranching.js.org/?locale=ko Learn Git BranchingAn interactive Git visualization tool to educate and challenge!learngitbranching.js.org ์ฒ˜์Œ ์ ‘์†ํ•˜๋ฉด ์ด๋ ‡๊ฒŒ ํŒ์—…์ด ๋œจ๋Š”๋ฐ ESC ๋ˆ„๋ฅด๋ฉด ๋ฐ”๋กœ ๋ฐฐ์‰ฌ์ฐฝ์— ์•„๋ฌด๊ฑฐ๋‚˜ ์—ฐ์Šตํ•ด ๋ณผ ์ˆ˜ ์žˆ๋‹ค.๋‹จ๊ณ„๋ณ„๋กœ ์—ฐ์Šตํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ์€ ์•„๋ž˜ ํŒ์—…์—์„œ ๋ ˆ๋ฒจ์„ ์„ ํƒํ•˜๋ฉด ๋œ๋‹ค. ์ฝ˜์†”์— ๋ช…๋ น์–ด๋ฅผ ์ž…๋ ฅํ•ด๋„ ๋˜๊ณ ,๋ธŒ๋žœ์น˜ ์ด๋ฆ„์„ ์ง์ ‘ ํด๋ฆญํ•ด๋„ checkout ์ด ๋œ๋‹ค~
ttps://www.tablesgenerator.com/html_tables  HTML Tables generator – TablesGenerator.comYou can import table data by uploading file in CSV format (Comma Separated Value). Most spreadsheet software, both desktop and online, allows to save tabular data in CSV format — it is usually available in the File menu under the name "Save As..." or "Exwww.tablesgenerator.comํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ์ž‘์—… ํ•˜์‹œ๋‹ค๋ณด๋ฉด ํ…Œ์ด๋ธ”์„ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€..
์ž๋ฐ” ์˜จ๋ผ์ธ IDE ๋ชจ์Œ ๐Ÿ‘ฉ๐Ÿผ‍๐Ÿ’ป ์ธํ…”๋ฆฌ์ œ์ด๋‚˜ ์ดํด๋ฆฝ์Šค๋ฅผ ์„ค์น˜ํ•˜์ง€ ์•Š๊ณ ๋„,๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ฐ”๋กœ ์‹คํ–‰๊ฐ€๋Šฅํ•œ ์ž๋ฐ” IDE ์›น ์ปดํŒŒ์ผ๋Ÿฌ ์‚ฌ์ดํŠธ ๋‘ ๊ฐœ ๊ฐ€์ ธ์™€ ๋ดค์–ด์š”.์ฝ”ํ…Œ ๋ฌธ์ œ ํ’€ ๋•Œ ๊ฐ„๋‹จํžˆ ์ฝ”๋“œ ํ…Œ์ŠคํŠธ ํ•˜๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•˜์‹œ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ œ๊ฐ€ ์ถ”์ฒœํ•˜๋Š” ์ž๋ฐ” ์›น์ฝ”๋”ฉ ์‚ฌ์ดํŠธ๋Š”Online Java IDE์™€ JDoodle, MyCompiler ์ž…๋‹ˆ๋‹ค.๊ฐ„๋‹จํ•˜๊ฒŒ ์ฝ”ํ…Œ ๊ฒฐ๊ณผ ์ฝ˜์†”์— ์‹คํ–‰ํ•  ์šฉ๋„๋กœ๋Š” MyCompiler ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค~   ์–ด๋–ค ์‚ฌ์ดํŠธ๊ฐ€ ๋” ์ ํ•ฉํ• ์ง€๋Š” ์ฃผ๋กœ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ์š”๊ตฌ๋˜๋Š” ๊ธฐ๋Šฅ์˜ ์ˆ˜์ค€์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค.Jdoodle์€  ๊ฒฝ๋Ÿ‰ํ™”๋œ ์ฝ”๋“œ ํ…Œ์ŠคํŠธ์™€ ๋‹ค์ค‘ ์–ธ์–ด ์ง€์›์— ์ดˆ์ ์ด ๋งž์ถฐ์ ธ ์žˆ์–ด, ์ดˆ๋ณด์ž๋‚˜ ๊ฐ„๋‹จํ•œ ์ฝ”๋“œ ์‹คํ–‰ ๋ฐ ๊ฒฐ๊ณผ ํ™•์ธ์— ์ ํ•ฉํ•˜๋ฉฐ, ๋ณต์žกํ•œ ๋””๋ฒ„๊น…์ด ํ•„์š”ํ•œ ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ๋ณด๋‹ค๋Š” ํ•™์Šต์ด๋‚˜ ๋น ๋ฅธ ํ…Œ์ŠคํŠธ..
์›น๋””์ž์ธ์—์„œ ์ƒ‰์ฑ„๋Š” ์ „์ฒด์ ์ธ ๋ถ„์œ„๊ธฐ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์ค‘์š”ํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค. ์ƒ‰์€ ์‹œ๊ฐ์ ์œผ๋กœ ์‚ฌ๋žŒ์—๊ฒŒ ๊ฐ€์žฅ ๋จผ์ € ์ธ์‹๋˜๋Š” ๊ฐ๊ฐ์ธ๋ฐ์š”.๊ฐ™์€ ์ƒ‰๊ฐ์ด๋ผ๋„ ๋ช…๋„๋‚˜ ์ฑ„๋„์— ๋”ฐ๋ผ ๋Š๋‚Œ์ด ๋‹ฌ๋ผ์ง€๋ฉฐ, ๋ณด๋Š” ์‚ฌ๋žŒ์˜ ๊ฐ์ •๊นŒ์ง€ ๋ณ€ํ™”์‹œํ‚ต๋‹ˆ๋‹ค. ์›น๋””์ž์ธ์„ ํ•  ๋•Œ ๋ธŒ๋žœ๋“œ ์ด๋ฏธ์ง€์™€ ๊ฐœ์„ฑ์„ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ํŠน์ • ์ƒ‰๊ฐ์„ ๊ฐ•์กฐํ•˜์—ฌ ํ™œ์šฉํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋ฏธ๊ตญ์˜ ์ปฌ๋Ÿฌ ๋ฆฌ์„œ์น˜ ์—ฐ๊ตฌ์†Œ (CR)์— ๋”ฐ๋ฅด๋ฉด, ์†Œ๋น„์ž๊ฐ€ ์ƒํ’ˆ์„ ๊ฒฐ์ •ํ•˜๋Š” ์‹œ๊ฐ„์€ 90์ดˆ ์•ˆ์— ์ด๋ฃจ์–ด์ง„๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ ์ƒํ’ˆ์— ๋Œ€ํ•œ ํŒ๋‹จ 80~90%๊ฐ€์ƒ‰์ƒ์— ์˜ํ•ด ๊ฒฐ์ •๋œ๋‹ค๊ณ  ํ•˜๋Š”๋ฐ์š”. ์ด์ฒ˜๋Ÿผ ๊ณ ๊ฐ์˜ ๋งˆ์Œ์„ ์ด๋Œ๊ธฐ ์œ„ํ•ด ์ƒ‰๊ฐ์€  ๊ธฐ์—… ๋งˆ์ผ€ํŒ…์˜ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ์˜จ๋ผ์ธ์ƒ์—์„œ ๊ธฐ์—…์„ ๋Œ€ํ‘œํ•˜๋Š” ์š”์†Œ์ธ ํ™ˆํŽ˜์ด์ง€์˜ ์ƒ‰๊ฐ์€ ํŒ๋งค ์ƒํ’ˆ์˜ ๊ธ์ •์ ์ธ ์ด๋ฏธ์ง€๋ฅผ ์ „๋‹ฌํ•˜๊ณ , ๋ฐฉ๋ฌธ์ž์˜ ์žฌ๋ฐฉ๋ฌธ์„ ์œ ๋„ํ•˜๊ธฐ ์œ„ํ•ด ๋งค์šฐ ์ค‘์š”ํ•œ ์š”์†Œ์ž…..
โœจ์‚ฌ์ง„์˜ ํ˜•ํƒœ๋ฅผ ๋‹ค์–‘ํ•œ ๋ชจ์–‘์œผ๋กœ ๋ฐ”๊พธ๊ธฐ โœจ  ์•ˆ๋…•ํ•˜์„ธ์š”. ์‚ฌ์ง„ ํ˜•ํƒœ๋ฅผ ์žฌ๋ฏธ์žˆ๋Š” ๋ชจ์–‘์œผ๋กœ ์ˆ˜์ •ํ•ด์ฃผ๋Š” ๊ธฐ๋ฐœํ•œ ์‚ฌ์ดํŠธ ํ•˜๋‚˜ ์†Œ๊ฐœํ•ด ๋“œ๋ฆด๊ฒŒ์š”.  Fancy Border Radius GeneratorGenerator to build organic shapes with CSS3 border-radius9elements.github.io ์ด ์‚ฌ์ดํŠธ์—์„œ ๋งˆ์šฐ์Šค๋กœ ์ด๋ฏธ์ง€๋ฅผ ์›ํ•˜๋Š” ๋ชจ์–‘์œผ๋กœ ๋“œ๋ž˜๊ทธ ํ•ด์ฃผ๋ฉด border-radius ํ”„๋กœํผํ‹ฐ ๊ฐ’์„ ์ž๋™์œผ๋กœ ๊ณ„์‚ฐํ•ด์„œ ์•Œ๋ ค์ค€๋‹ต๋‹ˆ๋‹ค. ๊ฐ’์„ ๋ณต์‚ฌํ•ด์„œ vscode๋กœ ๊ฐ€์ ธ์˜ค๋ฉด ์ง์ ‘ ํ”„๋ ˆ์ž„์„ ๋งŒ๋“ค์ง€ ์•Š์•„๋„ ์‰ฝ๊ฒŒ ์‚ฌ์ง„ ํ…Œ๋‘๋ฆฌ๋ฅผ ์›ํ•˜๋Š” ๋ชจ์–‘์œผ๋กœ ์ž๋ฅผ ์ˆ˜ ์žˆ์–ด์š”. ์‚ฌ์ง„์ด ์ •์‚ฌ๊ฐํ˜•์— ๊ฐ€๊นŒ์šธ์ˆ˜๋ก ๋‚ด๊ฐ€ ์„ค์ •ํ•ด ์ค€ ๋ชจ์–‘์œผ๋กœ ๋งŒ๋“ค๊ธฐ๊ฐ€ ์‰ฌ์›Œ์š”. โ˜‘๏ธ HTML ์ฝ”๋“œโ˜‘๏ธ CSS ์ฝ”๋“œ  border-radiu..
์ธ์ ˆ๋ฏธ์˜€๋˜๊ฒƒ
'์‚ฌ์ดํŠธ' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก
์ƒ๋‹จ์œผ๋กœ