๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

์ „์ฒด ๊ธ€60

๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ์Šค์ฟจ 4์ผ์ฐจ ๊ธฐ๋ก ์˜ค๋Š˜ ์ˆ˜์—… ๋‚ด์šฉ HTML/CSS ๊ฐ•์˜ ๋ฐฐ์šด ๊ฒƒ(new!) HTML ์–‘์‹ ์†์—์„œ ๊ทธ๋ฃน์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š” ์š”์†Œ. fieldset ํƒœ๊ทธ ๋‚ด๋ถ€์—์„œ ๊ทธ๋ฃน์˜ ์„ค๋ช…์„ ์ œ๊ณต. (์‚ฌ์ง„์—์„œ๋Š” "Choose your favorite monster" ๋ถ€๋ถ„์— ํ•ด๋‹น) ์›น ์‚ฌ์ดํŠธ๋‚˜ ์•ฑ์—์„œ ๊ณ„์‚ฐ์ด๋‚˜ ์‚ฌ์šฉ์ž ํ–‰๋™์˜ ๊ฒฐ๊ณผ๋ฅผ ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ๋Š” ์ปจํ…Œ์ด๋„ˆ ์š”์†Œ + = 60 input ๊ฐ’์— ๋ณ€ํ™”๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ form oninput ์†์„ฑ์— ์ „๋‹ฌ๋œ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์‹คํ–‰๋œ๋‹ค. ์œ„์˜ ์˜ˆ์ œ์—์„œ๋Š” oninput์— result.value(output ํƒœ๊ทธ)์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ „๋‹ฌ๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ input์ด ๋ณ€๊ฒฝ๋˜๋ฉด outputํƒœ๊ทธ์˜ ๊ฐ’์ด ๋ณ€๊ฒฝ๋œ๋‹ค. ์ž‘์—…์˜ ์™„๋ฃŒ ์ •๋„๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ. ์ฃผ๋กœ ์ง„ํ–‰ ํ‘œ์‹œ์ค„์˜ ํ˜•ํƒœ๋ฅผ ๋ค๋‹ค. entity code ํŠน์ • charac.. 2021. 11. 3.
211102_TIL ์˜ค๋Š˜ ํ•œ ์ผ ๋ฉด์ ‘ ์กธํ”Œ ํšŒ์˜ ์›Œํ‚น๋ฐฑ์›Œ์ฆˆ ์ž๋ฃŒ ์ฝ๊ธฐ ๋ฆฌ๋ทฐ ์ „๊ณต ๋ฉด์ ‘์ด๋ž˜์„œ ์ „๊ณต ๋‹ฌ๋‹ฌ ์™ธ์šฐ๊ณ  ๊ธฐ์–ต์„ ๋˜์‚ด๋ฆฌ๋Š๋ผ ๋ฉฐ์น ๊ฐ„ ๊ณ ์ƒํ–ˆ๋Š”๋ฐ ์ „๊ณต ์งˆ๋ฌธ ํ•˜๋‚˜๋„ ์•ˆ๋ฐ›์•˜๋‹ค. ๋‚ด๊ฒŒ ๊ธฐ๋Œ€์น˜๊ฐ€ ์—†์œผ์…จ๋˜ ๊ฑด์ง€ ๋ญ”์ง€. ํ•™์ ์ปท์ธ๊ฐ€? ํ•™์ ์ด ๋‚ฎ๋‹ค๊ณ  ์ƒ๊ฐ์€ ์•ˆํ–ˆ๋Š”๋ฐ ๋‹ค๋“ค ํ•™์ ์™„ํ™”์˜ ํž˜์œผ๋กœ ํ•™์ ์ด ์™•์ฐฝ ์˜ฌ๋ผ๊ฐ€๋ฒ„๋ฆฐ๊ฑธ๊นŒ. ๊ทผ๋ฐ ๋‚˜๋„ ํ•™์ ์™„ํ™” ๋ฐ›์•˜์„ํ…๋ฐ ๋‚˜๋Š” ์™œ ์ด๋ž˜...? ์กธ์ „์ด ์–ผ๋งˆ ๋‚จ์ง€ ์•Š์•„์„œ ๋‹ค์‹œ ์žฌ๊ฐœํ•œ ์กธํ”Œ ํšŒ์˜. ์˜ค๋žœ๋งŒ์— ๋Œ๋ฆฌ๋‹ˆ๊นŒ ์ง„์งœ ๋œฏ์–ด๊ณ ์น˜๊ณ  ์‹ถ์€๊ฒŒ ์‚ฐ๋”๋ฏผ๋ฐ ๋„์ €ํžˆ ์‹œ๊ฐ„์ด ์•ˆ๋‚œ๋‹ค. ํ”„์—”์Šค์ฟจ + ๊ฐ„๊ฐ„ํžˆ ๋‚€ ๋ฉด์ ‘ + ์‹œ๊ฐ„๋‚˜๋ฉด ์•Œ๊ณจ์ด๋ž‘ ์ „๊ณต๊ณต๋ถ€ ํ•ด์•ผํ•จ => +@๋Š” ๋„์ €ํžˆ ํ•  ์งฌ์ด ์•ˆ๋‚จ ์•„ ์ด๋Ÿฐ๊ฑฐ ๋„ˆ๋ฌด ๋ณ„๋ก ๋ฐ ์‹ฌ๋ž€ํ•˜๋‹ค. ํ”„์—”์Šค์ฟจ์— ๋ชฐ๋นตํ•˜๊ณ  ์‹ถ์€๋ฐ ๊ทธ๋ ‡๋‹ค๊ณ  ์•„์˜ˆ ์ง€์›์„œ๋ฅผ ์•ˆ์“ธ์ˆ˜๋„ ์—†๊ณ . ์ธ์ƒ ์‰ฌ์šด๊ฒŒ ํ•˜๋‚˜ ์—†๋‹ค. ํ”„์—”์Šค์ฟจ ๋ชป๋“ค์€๊ฑฐ ๋„ˆ๋ฌด ์†์ƒ.. 2021. 11. 3.
๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ์Šค์ฟจ 2์ผ์ฐจ ๊ธฐ๋ก ์˜ค๋Š˜ ๋‚ด์šฉ Github ๊ณ„์ • ์ƒ์„ฑ ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ธํŒ… HTML ๊ธฐ๋ณธ ํƒœ๊ทธ ํ•™์Šต ๋ฆฌ๋ทฐ ์‚ฌ์‹ค ์š”์ฆ˜ ์ทจ์ค€๋•Œ๋ฌธ์— ๋งˆ์Œ์ด ๊ธ‰ํ•ด์„œ(๋‹น์žฅ ๋‚ด์ผ ์ „๊ณต๋ฉด์ ‘์ธ๋ฐ ๋จธ๋ฆฟ์†์ด ๋ฐฑ์ง“์žฅ์ž„) ์ฒ˜์Œ์— github ๊ณ„์ • ์ƒ์„ฑ์ด๋ž‘ vscode ์„ค๋ช… ํ•  ๋•Œ ๊นŒ์ง€๋งŒ ํ•ด๋„ ๋‚ด๊ฐ€ ๊ดœํ•œ ์ง“์„ ํ•œ๊ฑด๊ฐ€ ์ƒ๊ฐ์ด ๋“ค์—ˆ๋Š”๋ฐ ๊ฐ•์‚ฌ๋ถ„๊ป˜์„œ ๋‚ด์šฉ์„ ์•„๋Š” ๋ถ„๋“ค์€ Figma ๋ณด๊ณ  UI ๋”ฐ๋ผ ๋งŒ๋“ค์–ด๋ณด๋ผ๊ณ  ์•„์˜ˆ ์•ˆ๋‚ด๋ฅผ ํ•ด์ฃผ์…”์„œ ๊ทธ๋ƒฅ ๊ฐ•์ขŒ๋Š” ํŽธํ•˜๊ฒŒ ๋“ค์œผ๋ฉด์„œ ์‹ค์Šตํ–ˆ๋‹ค. ํƒœ๊ทธ ๊ด€๋ จํ•ด์„œ๋Š” ์•Œ๊ณ ๋Š” ์žˆ์—ˆ๋Š”๋ฐ ์ž˜ ์•ˆ์“ฐ๋‹ค ๋ณด๋‹ˆ ์žŠ์—ˆ์—ˆ๋Š”๋ฐ ๊ฐ•์˜ ๋“ค์œผ๋ฉด์„œ ๋‹ค์‹œ ๋– ์˜ฌ๋ฆด ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ง‰์ƒ UI ๋”ฐ๋ผ ํ•˜๋‹ค๋ณด๋‹ˆ๊นŒ CSS๊ฐ€ ์ง„์งœ ๋‚ด ๋œป๋Œ€๋กœ ์ž˜ ์•ˆ๋˜์„œ CSSํŒŒํŠธ๋Š” ์ข€ ์—ด์‹ฌํžˆ ๋“ค์–ด์•ผ ๊ฒ ๋‹ค ์‹ถ์—ˆ๋‹ค. CSS๋Š” ํ•ด๋„ ํ•ด๋„ ํ—ท๊ฐˆ๋ฆฐ๋‹ค. ์–ธ์ œ์ฏค ๋งˆ์Šคํ„ฐ ํ•  ์ˆ˜ ์žˆ๋ƒ๊ณ ~ ์•„์ง ์ดˆ๋ฐ˜๋ถ€๋ผ ๋ง‰ ์—„์ฒญ ๋ฐฐ์šด๋‹ค ์ด.. 2021. 11. 1.
211031_TIL ์ฃผ๋ง ํ•œ ์ผ ์ฝ”ํ…Œ CS๊ณต๋ถ€, ๋ฉด์ ‘์ค€๋น„ AI๊ฒ€์‚ฌ, ์ธ์„ฑ๊ฒ€์‚ฌ ๋ฆฌ๋ทฐ ์ด๋ฒˆ ์ฃผ๋ง์— ์ฝ”ํ…Œ ๋‘๊ฐœ๊ฐ€ ์žˆ์—ˆ๋‹ค. ํ™•์‹คํžˆ ๋„ค์นด๋ผ ๋ณด๋‹ค๊ฐ€ ๋‹ค๋ฅธ๊ฑฐ ๋ณด๋ฉด ์‰ฌ์›Œ์„œ ๊ธฐ๋ถ„์ด ์ข‹์•„์ง€๋Š” ํšจ๊ณผ๊ฐ€ ์žˆ๋Š”๋ฐ ๋Œ€์‹  ๋ชปํ’€๋ฉด ๋” ํ™”๋‚œ๋‹ค. ๋„ค์นด๋ผ ๋ชปํ’€๋ฉด ๊ทธ๋Ÿฌ๋ ค๋‹ˆ ๋งˆ์ธ๋“œ๊ฐ€ ๋˜๋Š”๋ฐ ๋‹ค๋ฅธ ์ฝ”ํ…Œ ๋งž์™œํ‹€ ๋˜๋ฒ„๋ฆฌ๋ฉด ์ŠคํŠธ๋ ˆ์Šค ๋ฐ›๋Š”๋‹ค. ๋ณดํ†ต ์ฝ”ํ…Œ ๋ณด๋ฉด ๋งž๊ฑฐ๋‚˜ ํ‹€๋ฆฌ๊ฑฐ๋‚œ๋ฐ ์ด๋ฒˆ์—” ๋งž์™œํ‹€์ด ํ•˜๋‚˜ ์žˆ์–ด์„œ ์•„์ง๊นŒ์ง€ ๊ธฐ๋ถ„์ด ์ฐœ์ฐœํ•˜๋‹ค. ๋ฌธ์ œ ๊ณต๊ฐœ ํ•ด๋‹ฌ๋ผ๊ณ ~! ๋ฉด์ ‘ ๋๋‚˜๋ฉด ๋‹ค์‹œ ์•Œ๊ณจ๋„ ์‹œ์ž‘ํ•ด์•ผ๊ฒ ๋‹ค. ์ด๊ฒŒ ์ „๊ณต์ž๊ฐ€ ๋งž๋‚˜ ์‹ถ๋‹ค. ๊ทผ๋ฐ ํ˜ผ์ž ๊ณต๋ถ€ํ•˜๋‹ค๋ณด๋‹ˆ๊นŒ ์žฌ๋ฐŒ๋Š” ๋ถ€๋ถ„๋„ ์žˆ๊ณ . ํ™•์‹คํžˆ ๋งŽ์ด ๊ณต๋ถ€ํ–ˆ๋˜ ๊ณผ๋ชฉ์ผ์ˆ˜๋ก ๋‹ค์‹œ ๊ณต๋ถ€ํ• ๋•Œ ํ•˜๊ธฐ๊ฐ€ ์‹ซ๋‹ค. ๋‚ด๊ฐ€ ๊ทธ๋•Œ ๊ทธ๋ ‡๊ฒŒ ํ–ˆ๋Š”๋ฐ ์•„์ง ๋ชจ๋ฅธ๋‹จ ๋ง์ด์•ผ? ํ•˜๋Š” ๊ธฐ๋ถ„์ด ๋“ ๋‹ค. ์ด๊ฒƒ๋„ ๊ณ ์ณ์•ผ ๋˜๊ฒ ๋‹ค. ๋Œ€์‹  ๊ณต๋ถ€ ์•ˆํ•œ ๊ณผ๋ชฉ์€ ์ข€ ์žฌ๋ฐŒ๊ฒŒ ํ–ˆ๋‹ค. ์ง„์ž‘์— ์ข€ ํ–ˆ์œผ๋ฉด .. 2021. 10. 31.
๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ์Šค์ฟจ 1์ผ์ฐจ ๊ธฐ๋ก ์˜ค๋Š˜ ํ•œ ์ผ OT ์ด๋‘ํฌ๋‹˜ ๊ฐ•์—ฐ ํŒ€๋นŒ๋”ฉ, ํŒ€ ๊ณ„ํš ์„ธ์šฐ๊ธฐ ์ฝ”๋“œ๋ผ์ด์–ธ ์ด์šฉํ•ด์„œ HTML/CSS ๊ฐ•์˜ ์ˆ˜๊ฐ• ์ด๋‘ํฌ๋‹˜ ๊ฐ•์—ฐ ๊ธฐ๋ก ํ”„๋ก ํŠธ์—”๋“œ์™€ API๋งŒ ํ™œ์šฉํ•ด๋„ ํ•  ์ˆ˜ ์žˆ๋Š” ์„œ๋น„์Šค๊ฐ€ ๋งŽ๋‹ค. ์Šคํƒ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ์—์„œ ์‚ด์•„๋ผ. ์˜์–ด๊ฐ€ ํ—ˆ๋“ค์ด ๋˜๋ฉด ์•ˆ๋œ๋‹ค. ์Šคํƒ์˜ค๋ฒ„ํ”Œ๋กœ์šฐ์— ๋ชจ๋ฅด๋Š”๊ฑธ ๊ณ„์† ์งˆ๋ฌธํ•˜๋ฉด์„œ ๋งŒ๋“ค์–ด ๋‚˜๊ฐ€๊ธฐ. ์˜์–ด๊ฐ€ ์ฒ˜์Œ์—” ์–ด๋ ต์ง€๋งŒ ๊ฒฌ๋ŽŒ์„œ ์˜์–ด๋กœ ์†Œํ†ตํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์–ด์•ผ ํ•œ๋‹ค! ๋ญ๋“  ์ผ๋‹จ ๋งŒ๋“ค์–ด ๋ณด๊ธฐ. ๋‚ด๊ฐ€, ๋‚ด ์ฃผ์œ„ ์‚ฌ๋žŒ์ด ์“ฐ๊ณ  ์‹ถ์–ด ํ•  ๋งŒํ•œ ๊ฑธ ๊ณ„์† ๋งŒ๋“ค๊ธฐ ์–•๊ณ  ๋„“๊ฒŒ ๋ณด๋‹ค๋Š” ํ•˜๋‚˜๋ฅผ ๊นŠ๊ฒŒ ํŒŒ์„œ ๋ํŒ์™•์„ ์ฐ๊ฒ ๋‹ค ํ•˜๋Š” ๋งˆ์ธ๋“œ๋ฅผ ๊ฐ€์ง€์ž. ๋‚ด๊ฐ€ ๋งŒ๋“œ๋Š”๊ฒŒ ์–ด๋–ค ๋ฐฉํ–ฅ์œผ๋กœ, ์–ด๋””๋กœ ๊ฐ€๋Š”์ง€๋ฅผ ๋Š์ž„์—†์ด ์ƒ๊ฐํ•˜๊ณ  ๊ณ„์†ํ•ด์„œ ๋ญ”๊ฐˆ ๋งŒ๋“ค์–ด๋ณด๊ธฐ ์ด๋ฏธ ์กด์žฌํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๋‹ค์‹œ ๋งŒ๋“œ๋Š”๊ฒŒ ์˜๋ฏธ๊ฐ€ ์žˆ๋‚˜์š”? => ํ•˜๋Š˜ ์•„๋ž˜ ์ƒˆ๋กœ์šด ์•„์ด๋””์–ด๋Š” ์—†๋‹ค. 90%.. 2021. 10. 29.
CSS) box-shadow ์†์„ฑ ์ด๊ณณ์ €๊ณณ์—์„œ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ฐ•์Šค ์ฃผ์œ„์— ๊ทธ๋ฆผ์ž๊ฐ€ ์ƒ๊ธฐ๋Š” ๋””์ž์ธ์„ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ์†์„ฑ์ด ๋ฐ”๋กœ box-shadow ์ด๋‹ค. box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1); ์ฒซ๋ฒˆ์งธ ๊ฐ’์€ ๊ทธ๋ฆผ์ž๊ฐ€ ๊ฐ€๋กœ์ถ•์œผ๋กœ ์ด๋™ํ•˜๋Š”์ง€๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ๊ฐ’์ด +๋ฉด ์˜ค๋ฅธ์ชฝ์œผ๋กœ, -๋ฉด ์™ผ์ชฝ์œผ๋กœ ๊ทธ๋ฆผ์ž๊ฐ€ ๋ป—์–ด๋‚˜๊ฐ„๋‹ค. ๋‘๋ฒˆ์งธ ๊ฐ’์€ ๊ทธ๋ฆผ์ž๊ฐ€ ์„ธ๋กœ์ถ•์œผ๋กœ ์–ผ๋งˆ๋‚˜ ์ด๋™ํ•˜๋Š”์ง€, ์„ธ๋ฒˆ์งธ ๊ฐ’์€ ๊ทธ๋ฆผ์ž๋ฅผ ์–ผ๋งˆ๋‚˜ ํ๋ฆฌ๊ฒŒ ํ• ์ง€, ๋„ค๋ฒˆ์งธ ๊ฐ’์€ ๊ทธ๋ฆผ์ž๋ฅผ ์–ผ๋งˆ๋‚˜ ํผ์ง€๊ฒŒ ํ• ์ง€๋ฅผ ์ •ํ•œ๋‹ค. ๋งˆ์ง€๋ง‰ rgba๊ฐ’์„ ์ด์šฉํ•ด ๊ทธ๋ฆผ์ž์˜ ์ƒ‰์ƒ, ํˆฌ๋ช…๋„๋ฅผ ์„ค์ •ํ•œ๋‹ค. ๊ฐ€๋กœ์ถ• ์„ธ๋กœ์ถ• ๋ธ”๋Ÿฌ ์Šคํ”„๋ ˆ๋“œ 2021. 10. 29.
๋ฐ˜์‘ํ˜•