etc

    [์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ์ธํ„ด์‹ญ] ์ˆ์—์„ธ์ด

    [์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ์ธํ„ด์‹ญ] ์ˆ์—์„ธ์ด

    ์ง€์›ํ•˜๊ณ  ์‹ถ์€ ์ฐธ๊ฐ€๊ธฐ์—…์€ ์–ด๋””์ธ์ง€ ์ง€์›ํ•˜๊ณ  ์‹ถ์€ ์ฐธ๊ฐ€ ๊ธฐ์—…์€ ์Šค์œ„์น˜์›์ด๋‹ค. ๋น„๋Œ€๋ฉด ์˜จ๋ผ์ธ ํ™˜์ „ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋Š” ํšŒ์‚ฌ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์ฑ„์šฉ ์ค‘์ด์—ˆ๋‹ค. ํ”„๋กœ์ ํŠธ์—์„œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์™€ ๋ฆฌ์•กํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ ์ด ์ข‹์•˜๊ณ , ์ฝ๊ธฐ ์ข‹์€ ์ฝ”๋“œ๋ฅผ ์ง€ํ–ฅํ•˜๊ณ  ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ํ•˜๋Š” ๊ฐœ๋ฐœ ๋ฌธํ™”๊ฐ€ ์กด์žฌํ•œ๋‹ค๋Š” ์ ์ด ๊ธฐ๋Œ€๋œ๋‹ค. ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ์ธํ„ด์‹ญ์—์„œ ๋ณธ์ธ์ด ์–ป๊ณ  ์‹ถ์€ ๊ฒƒ ๊ธฐ์ˆ  ๋ฉด์ ‘ ์ค€๋น„, CS ์Šคํ„ฐ๋””, ๋ฆฌ์•กํŠธ ์‹ฌํ™” ๋ฌธ๋ฒ• ๊ณต๋ถ€ ๋“ฑ ์ทจ์—… ์ „์— ํ•„์š”ํ•œ ๋ถ€๋ถ„๋“ค์„ ์งง์€ ์‹œ๊ฐ„ ๋™์•ˆ ํฌ๊ฒŒ ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ๊ธฐํšŒ์ธ ๊ฒƒ ๊ฐ™์•„์„œ ์ง€์›ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๋˜ํ•œ ๊ฐ™์€ ๊ด€์‹ฌ์‚ฌ๋ฅผ ๊ฐ€์ง„ ๋™๋ฃŒ๋“ค๊ณผ ์ธ์—ฐ์„ ๋งบ๊ณ  ํ•จ๊ป˜ ๊ณต๋ถ€ํ•˜๋ฉฐ ์ทจ์—… ์ค€๋น„๋ฅผ ํ•˜๋Š” ๊ฒฝํ—˜์„ ์–ป์„ ์ˆ˜ ์žˆ์„๊ฑฐ๋ผ๊ณ  ๊ธฐ๋Œ€ํ•˜๊ณ  ์žˆ๋‹ค. ์ตœ์ข…ํ•ฉ๊ฒฉ๊นŒ์ง€ ๋ช‡ ๊ฐœ ์ด์ƒ์˜ ์ด๋ ฅ์„œ ์ž‘์„ฑ ๋ฐ ์ œ์ถœํ•  ๊ฑด์ง€ ๊ฐ์˜ค ์›ํ‹ฐ๋“œ ํ”„๋ฆฌ์˜จ๋ณด๋”ฉ ์ธํ„ด์‹ญ..

    ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 6์ฃผ ์ฐจ

    ํ‚ค์›Œ๋“œ JavaScript ๊ธฐ์ดˆ ๋ˆ„๋ฆฌ ๋ฉ˜ํ† ๋‹˜, ํ˜œ์ง„ ๋ฉ˜ํ† ๋‹˜ ํŠน๊ฐ• 6์ฃผ ์ฐจ ์ด๋ฒˆ ์ฃผ๋ถ€ํ„ฐ ๋ณธ๊ฒฉ์ ์œผ๋กœ JavaScript ๊ธฐ์ดˆ ๊ฐœ๋…์„ ๋ฐฐ์šฐ๊ณ  ์žˆ๋Š”๋ฐ, HTML / CSS ์ˆ˜์—… ๋•Œ๋ณด๋‹ค ํ›จ์”ฌ ์žฌ๋ฏธ์žˆ๊ฒŒ ๋“ฃ๊ณ  ์žˆ๋‹ค. ๋‹ค๋งŒ ์ˆ˜์—… ์ค‘๊ฐ„์— ํ˜ผ์ž MDN์„ ์ฝ์–ด๋ณด๋‹ค๊ฐ€ ์ˆ˜์—…์˜ ํ๋ฆ„์„ ๋†“์น˜๊ณค ํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ์ˆ˜์—…์— ์ข€ ๋” ์ง‘์ค‘ํ•˜๊ธฐ ์œ„ํ•ด MDN์€ ์ž์Šต์‹œ๊ฐ„์„ ํ™œ์šฉํ•ด์„œ ์ฝ์–ด๋ณด๋Š” ๊ฒƒ์œผ๋กœ! ์ œ์ฝ”๋ฒ  100์ œ๋ฅผ ํ‘ธ๋Š” ์ค‘์ธ๋ฐ part2์— ๋“ค์–ด๊ฐ€๋‹ˆ ์ ์  ๋ฌธ์ œ๊ฐ€ ์–ด๋ ค์›Œ์ง„๋‹ค. ๋‹คํ–‰ํžˆ ํ˜ธ์ค€ ๋Œ€ํ‘œ๋‹˜์ด ์ œ์ฝ”๋ฒ  ๊ฐ•์˜๋ฅผ ์ œ๊ณตํ•ด ์ฃผ์…จ๋‹ค. ์šฐ์„  ์ฒ˜์Œ์—๋Š” ๋‚ด ์‹ค๋ ฅ์œผ๋กœ ํ’€์–ด๋ณด๊ณ  ๋‹ต์•ˆ์ด๋ž‘ ๋„ˆ๋ฌด ์ฐจ์ด๊ฐ€ ๋‚˜๊ฑฐ๋‚˜ ๊ถ๊ธˆํ•œ ๋ฌธ์ œ๋Š” ๊ฐ•์˜๋กœ ์ถ”๊ฐ€์ ์ธ ๊ณต๋ถ€๋ฅผ ํ•˜๋ ค๊ณ  ํ•œ๋‹ค. ์–ด๋–ค ๋ฌธ์ œ๋Š” ์˜ค๋ž˜ ๊ณ ๋ฏผํ•˜๋‹ค๊ฐ€ ์‚ฐ์œผ๋กœ ๊ฐ€๋ฒ„๋ฆฐ ์ ์ด ์žˆ์–ด์„œ ๊ฐ•์˜๋ฅผ ๋“ค์„ ์ˆ˜ ์žˆ๋Š” ๊ฒŒ ์ •๋ง ๋‹คํ–‰์ด๋‹ค ์‹ถ๋‹ค. ..

    [๊ณผ์ œ] ์ฒœํ•˜์ œ์ผ ์บ๋ฆญํ„ฐ ๊ฒฝ์ง„๋Œ€ํšŒ - ํ„ธ์ฐ

    [๊ณผ์ œ] ์ฒœํ•˜์ œ์ผ ์บ๋ฆญํ„ฐ ๊ฒฝ์ง„๋Œ€ํšŒ - ํ„ธ์ฐ

    ๋ฉ‹์‚ฌ EF 3๊ธฐ ์ฒœํ•˜์ œ์ผ ์บ๋ฆญํ„ฐ ๊ฒฝ์ง„๋Œ€ํšŒ ๋ฉ‹์Ÿ์ด์‚ฌ์ž ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ์—์„œ HTML๊ณผ CSS๋กœ ๋‚˜๋งŒ์˜ ์บ๋ฆญํ„ฐ๋ฅผ ๋งŒ๋“œ๋Š” ๋Œ€ํšŒ๊ฐ€ ์žˆ์—ˆ๋‹ค. ๊ท€์—ฝ๊ณ  ์žฌ๋ฏธ์žˆ๋Š” ์•„์ด๋””์–ด๊ฐ€ ๋งŽ์•„์„œ ๋ณด๋Š” ์žฌ๋ฏธ๊ฐ€ ์žˆ์—ˆ๋‹ค. ๋™๊ธฐ๋ถ„๋“ค์ด ์ œ์ถœํ•˜์‹  ๊ฒƒ๋“ค์„ ๋ณด๋ฉด์„œ ๊ณ„์† ๊ฐํƒ„ํ–ˆ๋‹ค. ๋‚˜๋Š” ์ด๋ฒˆ ๋Œ€ํšŒ์—์„œ ๊ฐ์‚ฌํ•˜๊ฒŒ๋„ ๋Œ€์ƒ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ํšŒ๊ณ ๋„ ํ•  ๊ฒธ ์ž‘์—… ๊ณผ์ •์„ ๊ฐ„๋‹จํ•˜๊ฒŒ๋‚˜๋งˆ ๊ธฐ๋ก์œผ๋กœ ๋‚จ๊ฒจ๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ๋ฐ๋ชจ https://sduu.github.io/character-contest/ ํ„ธ์ฐ sduu.github.io Github https://github.com/sduu/character-contest GitHub - sduu/character-contest Contribute to sduu/character-contest development by cr..

    ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 4์ฃผ ์ฐจ

    ํ‚ค์›Œ๋“œ [CSS] flex, grid, perspective, CSS Sprite ๊ธฐ๋ฒ•, IR ๊ธฐ๋ฒ• [CSS ํŠน๊ฐ•] ์ง€๊ทธ์žฌ๊ทธ ์‹ค์Šต [JavaScript] ์Šค์ฝ”ํ”„, let, const ํ‚ค์›Œ๋“œ 4์ฃผ ์ฐจ ๊ผญ ํ•„์š”ํ•œ ์š”์†Œ๋งŒ ๋งˆํฌ์—… ํ•˜๋Š” ๊ฒƒ๊ณผ ํ™•์žฅ์„ฑ์„ ๊ณ ๋ คํ•œ ๋งˆํฌ์—… ์‚ฌ์ด์—์„œ ๊ณ ๋ฏผํ•˜๋‹ค ๋ณด๋ฉด ๋งˆํฌ์—…์— ๊ฝค ์‹œ๊ฐ„์„ ์Ÿ๊ฒŒ ๋œ๋‹ค. ์šฐ์„ ์€ ์ข…์ฐฌ๋‹˜ ํŠน๊ฐ•์—์„œ ๋ฐฐ์šด ๊ฒƒ์ฒ˜๋Ÿผ ์ฝ˜ํ…์ธ ์— ์ง‘์ค‘ํ•˜๊ธฐ๋ณด๋‹ค๋Š” ๋ ˆ์ด์•„์›ƒ์„ ๊ณ ๋ คํ•ด์„œ ๋งˆํฌ์—… ํ•˜๋Š” ๊ฒƒ์— ์ต์ˆ™ํ•ด์ ธ์•ผ ํ•  ๊ฒƒ ๊ฐ™๋‹ค. ๋ฒค๋”ฉ ๋จธ์‹  ๊ณผ์ œ๋ฅผ ํ•˜๋ฉด์„œ ์š”๊ตฌํ•˜๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋„ ๋ฒ„๊ฑฐ์› ์ง€๋งŒ ๋”ฅ๋‹ค์ด๋ธŒ์—์„œ ๋ฐฐ์šด ๊ฒƒ์„ ์จ ๋ณผ ์ˆ˜ ์žˆ์–ด์„œ ์žฌ๋ฏธ์žˆ์—ˆ๋‹ค. ์ด์ œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ˆ˜์—…์— ์‹œ์ž‘๋˜๋Š”๋ฐ, ๊ฐœ๋…์ ์ธ ๊ฒƒ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ˜‘์—…์„ ์œ„ํ•ด ์ข‹์€ ์ฃผ์„์„ ์ž‘์„ฑํ•˜๋Š” ๋ฒ•, ๊ฐ€๋…์„ฑ๊ณผ ์„ฑ๋Šฅ์„ ๊ณ ๋ คํ•œ ์ฝ”๋”ฉ ๋ฐฉ๋ฒ•๋„ ๋ฐฐ์šฐ๊ณ  ์‹ถ๋‹ค. ๋‹ค..

    ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 3์ฃผ ์ฐจ

    ํ‚ค์›Œ๋“œ [CSS] position floats ์™€ normal flow BFC(Block-Formatting-Context) CSS selector flex [CSS ํŠน๊ฐ•] font ์™€ line-height em ๋‹จ์œ„ ๋„ค๊ฑฐํ‹ฐ๋ธŒ ๋งˆ์ง„ [๊ธˆ์š”์ผ ํŠน๊ฐ•] ๋ฉ‹์‚ฌ ์Šคํƒ€ํ„ฐ ํ‚คํŠธ Hard Skills and Soft Skills ์ทจ์ค€ ์ „๋žต๊ณผ ํ•ด์™ธ ์ทจ์—… 3์ฃผ ์ฐจ ํ•ด์•ผ ํ•  ๊ฒƒ์€ ๋งŽ์€๋ฐ, ํšจ์œจ์ ์œผ๋กœ ์‹œ๊ฐ„ ๋ถ„๋ฐฐ๊ฐ€ ์ž˜ ์•ˆ๋˜๋Š” ๋Š๋‚Œ์ด ๋“ ๋‹ค. ํŠนํžˆ ์ด๋ฒˆ ์ฃผ๋Š” ์‹ค์Šต๊ณผ ๊ณผ์ œ๊ฐ€ ์ข€ ์žˆ์—ˆ๋Š”๋ฐ ๊ณ„์† ์ฝ”๋“œ๋ฅผ ๋‹ค๋“ฌ์œผ๋ฉด์„œ ์‹œ๊ฐ„์„ ๋งŽ์ด ์“ด ๊ฒƒ ๊ฐ™๋‹ค. ๋”ฑ ๊ณ„ํšํ•œ ์‹œ๊ฐ„๋งŒํผ๋งŒ ๊ณผ์ œ์— ํž˜์„ ์Ÿ๊ณ  ๋ถ€์กฑํ•œ ์ ์€ ๋ฐฐ์›Œ๋‚˜๊ฐ€๋ฉด์„œ ๊ณ ์ณ๋‚˜๊ฐ€๋Š” ๊ฒŒ ์ข‹์ง€ ์•Š์„๊นŒ ํ•˜๋Š” ์ƒ๊ฐ์ด ๋“ ๋‹ค. ์ด๋ฒˆ ์ฃผ์— ๊ฐ€์žฅ ํฅ๋ฏธ๋กœ์› ๋˜ ๊ฒƒ์€ `๋งˆ์ง„ ๋ณ‘ํ•ฉ์ด ๋˜๋Š” ์ด์œ `์™€ `body ์š”์†Œ์— ์ปฌ๋Ÿฌ๋ฅผ ์ฃผ..

    ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 2์ฃผ ์ฐจ

    ํ‚ค์›Œ๋“œ [์‹œ๋งจํ‹ฑ ๋งˆํฌ์—…] ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ์‚ฌ์šฉํ•ด๋ณด๊ธฐ, ํ—ค๋”ฉ ์š”์†Œ์™€ ์ต๋ช… ์˜์—ญ [HTML] ๋ชจ๋“ˆํ™”, ๋ฐ˜์‘ํ˜• ์ด๋ฏธ์ง€ ๋งŒ๋“ค๊ธฐ, ์˜ ์†์„ฑ๊ณผ ๋™์ž‘ ๋ฐฉ์‹ [CSS] ์„ ํƒ์ž ์šฐ์„ ์ˆœ์œ„, CSS box model [CSS ํŠน๊ฐ•] CSS ๋งˆ์ง„ ๋ณ‘ํ•ฉ 2์ฃผ ์ฐจ ์ด๋ฒˆ ์ฃผ๋Š” ๊ต‰์žฅํžˆ ๋น ๋ฅด๊ฒŒ ์ง€๋‚˜๊ฐ€ ๋ฒ„๋ฆฐ ๋Š๋‚Œ์ด๋‹ค. ์ฃผ์ค‘ ๊ฐ•์˜ ์‹œ๊ฐ„๋„ ๊ทธ๋ ‡๊ณ  ์ถ”์„ ์—ฐํœด๋„ ๊ทธ๋ ‡๊ณ ...๐Ÿ˜Ž ์—ฐํœด๊ฐ€ ์ฃผ์–ด์ ธ์„œ ๋ชธ๋„ ๋งˆ์Œ๋„ ์—ฌ์œ ๋กญ๊ฒŒ ๋ณด๋ƒˆ๋Š”๋ฐ ๋‹ค์Œ ์ฃผ๋ถ€ํ„ฐ๋Š” ์—ด์‹ฌํžˆ ๋‹ฌ๋ ค๋ด์•ผ๊ฒ ๋‹ค. TIL์„ ์ž‘์„ฑํ•  ๋•Œ ์ƒˆ๋กœ ์•Œ๊ฒŒ ๋œ ์ ์ด๋‚˜ ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ถ€๋ถ„์„ ์œ„์ฃผ๋กœ ์ž‘์„ฑํ–ˆ๋”๋‹ˆ ํ™•์‹คํžˆ ์ž‘์„ฑ ์‹œ๊ฐ„์ด ๋งŽ์ด ์ค„์—ˆ๋‹ค. ๋‚จ๋Š” ์‹œ๊ฐ„์— ๋‹ค๋ฅธ ๊ณต๋ถ€๋‚˜ ์‹ค์Šต์„ ํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค. '์˜ ๋™์ž‘ ๋ฐฉ์‹' ์ˆ˜์—… ๋‚ด์šฉ์„ ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ค์› ๋‹ค. ํŠนํžˆ ์งˆ์˜์‘๋‹ต ์‹œ๊ฐ„์—๋Š” ์ •์‹ ์ด ์•ฝ๊ฐ„ ํ˜ผ๋ฏธํ•ด์กŒ๋‹ค,,ใ…Ž CS์ง€์‹์ด ๋ถ€์กฑํ•˜๋‹ค๋Š” ๊ฒƒ์„ ..

    ๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ ์Šค์ฟจ 1์ฃผ ์ฐจ

    ํ‚ค์›Œ๋“œ [์˜ค๋ฆฌ์—”ํ…Œ์ด์…˜] ์šฐ๋ฆฌ๊ฐ€ ํ•ด์•ผํ•  ๊ฒƒ : ๋“ค์–ด๋ดค๋‹ค → ๋ฐฐ์› ๋‹ค → ํ•ด๋ดค๋‹ค → ๋‹ค๋ฅด๊ฒŒ ํ•ด๋ดค๋‹ค! [HTML์˜ ๊ธฐ์ดˆ์™€ ์„น์…”๋‹] HTML Living Standard ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ (Semantic Tag) article ํƒœ๊ทธ์™€ section ํƒœ๊ทธ์˜ ์ฐจ์ด TIL https://github.com/sduu/TIL/blob/main/HTML/HTML_02.md [CSS ํŠน๊ฐ•] CSS์˜ ๊ธฐ์ดˆ์™€ display ์†์„ฑ์— ๋”ฐ๋ฅธ ํŠน์ง• TIL https://github.com/sduu/TIL/blob/main/CSS/CSS_special_01.md [Git] $ git clone {git reposiory url} . $ git add . $ git commit $ git push TIL https://github.com/sd..