๋ฐ์ํ ์ ์ฒด ๊ธ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. ์ด์ 1 2 3 4 5 6 7 ยทยทยท 10 ๋ค์ ๋ฐ์ํ