์ „์ฒด ๊ธ€

๐ŸŒฑsince 2023.05.09 ~ ์ฝ”๋”ฉing๐ŸŒฑ
๐ŸŒฑ ์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ GUIDE/๐ŸŒ WEBSITE

์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ ์›น์‚ฌ์ดํŠธ ์ถ”์ฒœ (๊ฐœ๋ฐœ์ž ์ปค๋ฎค, ๊ฐ•์˜ ๋“ฑ ๊ธฐํƒ€ ์ฐธ๊ณ  ์‚ฌ์ดํŠธ)

์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ ์›น ์‚ฌ์ดํŠธ ์ถ”์ฒœ (๊ฐœ๋ฐœ์ž ์ปค๋ฎค, ๊ฐ•์˜ ๋“ฑ ๊ธฐํƒ€ ์ฐธ๊ณ  ์‚ฌ์ดํŠธ) ๋ง‰๋ง‰ํ•œ ์ฝ”๋ฆฐ์ด๋“ค์„ ์œ„ํ•œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์‚ฌ์ดํŠธ๋ฅผ ์ถ”์ฒœํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ์•„๋ž˜ ์‚ฌ์ดํŠธ์—์„œ ์ข‹์€ ์ •๋ณด ์–ป์–ด๋ณด์ž! ์˜์–ด๋กœ ๋œ ์‚ฌ์ดํŠธ๊ฐ€ ๋งŽ์€๋ฐ, ์–ด์ฉŒ๋ฉด ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์˜์–ด๋Š” ๊ธฐ๋ณธ ์†Œ์–‘์ผ์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋‹ค. '๋‚˜ ์˜์•Œ๋ชป์ธ๋ฐ ์–ด์ฉŒ์ง€?' ํ•˜์ง€๋งŒ ๊ฑฑ์ •๋งˆ์‹œ๋ผ! ์šฐ๋ฆฌ์—๊ฒ ๊ตฌ๊ธ€๋ฒˆ์—ญ๊ธฐ์™€ ํŒŒํŒŒ๊ณ ๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์žŠ์ง€๋ง์ž! W3C ์‚ฌ์ดํŠธ (์˜์–ด) ํด๋ฆญ World Wide Web Consortium ์›”๋“œ ์™€์ด๋“œ ์›น ์ปจ์†Œ์‹œ์—„ ์›”๋“œ ์™€์ด๋“œ ์›น์„ ์œ„ํ•œ ํ‘œ์ค€์„ ๊ฐœ๋ฐœํ•˜๊ณ  ์žฅ๋ คํ•˜๋Š” ์กฐ์ง whatwg html living standard(์˜์–ด) ํด๋ฆญ This specification defines a big part of the web platform, in lots of detail. I..

๐ŸŒธ ๋‚˜์˜ ๋‹ค์ด์–ด๋ฆฌ

[D+4] 2023-05-12 ์•„๋Š” ๊ฒƒ์ด ํž˜์ด๋‹ค

[D+4] 2023-05-12 ์•„๋Š” ๊ฒƒ์ด ํž˜์ด๋‹ค CSS์˜ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ฅผ ์ด์šฉํ•ด์„œ ํ•ด์ƒ๋„์— ๋”ฐ๋ฅธ ์ƒ‰์ƒ๊ณผ ๋ฉ˜ํŠธ์˜ ๋ณ€๊ฒฝ์„ ์ฝ”๋”ฉํ–ˆ๋‹ค. ๊ฒฐ๊ณผ์ ์œผ๋ก , ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹์œผ๋กœ ์ฝ”๋”ฉ์„ ํ–ˆ๋‹ค. ์ฒ˜์Œ์—” ๋ฌด์ž‘์ • ํ—ค๋”ฉ์„ ํ•˜๋ฉฐ ์ฝ”๋”ฉ์„ ํ–ˆ๋Š”๋ฐ.. ์™„์„ฑํ•˜๊ณ  ๋ณด๋‹ˆ, ์•„์‰ฌ์šด ๋งˆ์Œ์ด ๋“ค์—ˆ๋‹ค. ์™ ์ง€ ์ด ๊ฒƒ๋ณด๋‹ค๋Š” ๋” ๋‚˜์€ ๊ตฌ์กฐ๋กœ๋„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๊ฒฐ๊ตญ, ๋‘ ๋ฒˆ์งธ์—๋Š” ์—ฌ๋Ÿฌ ์ž๋ฃŒ๋ฅผ ๊ตฌ๊ธ€๋ง ํ•ด์„œ ์ฝ”๋“œ ๊ตฌ์กฐ๋ฅผ ๊ฐœ์„ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. display: inherit; ์—ญ์‹œ ์•„๋Š” ๊ฒƒ์ด ํž˜์ด๋‹ค ใ…‹ใ…‹๐Ÿ”ฅ ๐ŸŒฑ์˜ค๋Š˜์˜ ์ž”๋”” ์‹ฌ๊ธฐ๐ŸŒฑ ํด๋ฆญ

๐ŸŒฑ ์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ GUIDE/๐Ÿ—‚๏ธ OpenSource

4 ์˜ต์…˜ ์„ ํƒ์„ ํ•ด๋ณด์ž! <select> <option>

์˜ต์…˜ ์„ ํƒ์„ ํ•ด๋ณด์ž! ์˜ต์…˜์„ ์„ ํƒํ•˜๋Š” ํƒœ๊ทธ๋Š” ์™€ ์ด๋‹ค. ๐Ÿ“ ๋งŒ์•ฝ ์„ ํƒ์ฐฝ์—์„œ ์„ ํƒ๋˜์ง€ ์•Š๋Š” ์˜ต์…˜์„ ์›ํ•œ๋‹ค๋ฉด, ๋‚ด์— disabled๋ฅผ ์ ์šฉํ•˜๊ณ  ํƒœ๊ทธ๋ฅผ ๋‹ซ์•„์ฃผ๋ฉด ๋œ๋‹ค. ์ฝ”๋“œ ์–‘์ฝฉ์ด๊ฐ€ ๊ฐ€์žฅ ์ข‹์•„ํ•˜๋Š” ์Œ์‹์€? ๊น€์น˜์ฐŒ๊ฐœ ๋ˆ๊นŒ์Šค ๋ถ€๋Œ€์ฐŒ๊ฐœ ๋‹ญ๊ฐˆ๋น„ ํƒ•์ˆ˜์œก ๋งˆ๋ผํƒ• ๊ฒฐ๊ณผ See the Pen by Kong Yang (@Kong-Yang) on CodePen.

๐ŸŒธ ๋‚˜์˜ ๋‹ค์ด์–ด๋ฆฌ

[D-Day!] 2023-05-09 ์ฝ”๋”ฉ START

[D-Day] 2023-05-09 ์ฝ”๋”ฉ START ๋“œ๋””์–ด ๊ธฐ๋‹ค๋ฆฌ๋˜ ์ฝ”๋”ฉ๋ถ€ํŠธ์บ ํ”„์— ์ฒซ ์ถœ์„์„ ํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ์•Œ๊ธฐ๋ก  180๋ช… ์ •๋„ ์ง€์›ํ•œ ๊ฒƒ์œผ๋กœ ์•„๋Š”๋ฐ, ํ•™์›์— ๊ฐ€๋ณด๋‹ˆ 13๋ช… ๋ฐ–์— ์—†์—ˆ๋‹ค. ์ˆ˜๊ฐ•์ƒ์ด ์˜ˆ์ƒ๋ณด๋‹ค ์ ์–ด ๊ฐ•์‚ฌ๋‹˜๊ป˜ ์—ฌ์ญค๋ณด์•˜๋‹ค. ์ด๋ฒˆ ์ˆ˜๊ฐ•์ƒ๋“ค์€ ์•„๋ฌด๋‚˜ ๋ฐ›์€ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ๋‚˜๋ฆ„์˜ ๊ธฐ์ค€์„ ํ†ตํ•ด ์—„๊ฒฉํ•˜๊ฒŒ ์„ ๋ณ„ํ•ด์„œ ์ˆ˜๊ฐ•์ƒ๋“ค์„ ๋ฝ‘์•˜๋‹ค๊ณ  ํ–ˆ๋‹ค. ๋‚˜๋งŒ ํ•ด๋„, ๋น„๋Œ€๋ฉด ๋ฉด์ ‘(์ „ํ™”)์‹œ๊ฐ„๋งŒ 40๋ถ„ ์ด์ƒ ์†Œ์š” ๋˜์—ˆ๋‹ค. (๋‚ด๊ฐ€ ์งˆ๋ฌธ๋ถ€์ž๋ผ์„œ ๊ทธ๋žฌ๋‹จ ๊ฑด ์•ˆ๋น„๋ฐ€๐Ÿ˜‚๐Ÿ˜‚) ๋ฝ‘ํ˜€์„œ ๋‹คํ–‰์ด์•ผ..!!โค ์ˆ˜์—…์ด ๋๋‚œ ํ›„์—, ๋ธ”๋กœ๊ทธ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ณผ์ œ๊ฐ€ ์ฃผ์–ด์กŒ๋‹ค. ์ด๋ฏธ ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ๊ฐ€ ์žˆ๋˜ ๋‚˜๋Š” ๊ทธ ์‹œ๊ฐ„์— ๋ธ”๋กœ๊ทธ ํ”Œ๋žซํผ ๋ณ„ ์žฅ๋‹จ์ ์„ ํ™•์ธํ•˜๋‹ค๊ฐ€, ๊ทธ๋งŒ ๊นƒํ—ˆ๋ธŒ ๋ธ”๋กœ๊ทธ๋ผ๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ•ด๋ฒ„๋ ธ๋‹ค. ํ˜ธ๊ธฐ์‹ฌ์ด ์ƒ๊ฒจ์„œ ๋งŒ๋“ค์–ด๋ดค์ง€๋งŒ, ์ด์ œ ๋ง‰ ์ฝ”๋”ฉ์„ ์‹œ์ž‘ํ•˜๋Š” ์ฝ”๋ฆฐ์ด..

๐Ÿ“š ์ง€์‹ ์ฑ„์šฐ๊ธฐ/์ปดํ“จํ„ฐ๊ณผํ•™

[CS] ํŒŒ์‹ฑ(Parsing)๊ณผ ํŒŒ์„œ(parser)

ํŒŒ์‹ฑ(Parsing)๊ณผ ํŒŒ์„œ(parser) ํŒŒ์‹ฑ(parsing) ํŒŒ์‹ฑ(parsing) = ๊ตฌ๋ฌธ๋ถ„์„ (์–ด๋–ค ๋ฌธ์žฅ์„ ๋ถ„์„ํ•˜๊ฑฐ๋‚˜ ๋ฌธ๋ฒ•์  ๊ด€๊ณ„๋ฅผ ํ•ด์„ํ•˜๋Š” ํ–‰์œ„) = html ๋“ฑ์˜ ์ž๋ฃŒ์—์„œ ๋ชฉ์ ์— ๋งž๋Š” ์ •๋ณด๋งŒ ์ถ”์ถœํ•ด์„œ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ๋•Œ์— ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ CS์—์„œ ํŒŒ์‹ฑ์€ ์ผ๋ จ์˜ ๋ฌธ์ž์—ด์„ ์˜๋ฏธ์žˆ๋Š” token(์–ดํœ˜ ๋ถ„์„์˜ ๋‹จ์œ„) ์œผ๋กœ ๋ถ„ํ•ดํ•˜๊ณ  ๊ทธ๊ฒƒ๋“ค๋กœ ์ด๋ฃจ์–ด์ง„ Parse tree๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ • ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ„ํ•ด ๋ถ„์„ํ•˜์—ฌ ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ์กฐ๋ฆฝํ•˜๊ณ  ๋‹ค์‹œ ๋นผ๋‚ด๋Š” ํ”„๋กœ๊ทธ๋žจ ์›น์ƒ์—์„œ ์ฃผ์–ด์ง„ ์ •๋ณด๋ฅผ ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ๊ฐ€๊ณตํ•˜์—ฌ ์„œ๋ฒ„์—์„œ ๋ถˆ๋Ÿฌ๋“ค์ด๋Š” ๊ฒƒ. ํŒŒ์„œ(parser)๋Š” ์ปดํŒŒ์ผ์˜ ์ผ๋ถ€๋กœ์„œ ์›์‹œ ํ”„๋กœ๊ทธ๋žจ์˜ ๋ช…๋ น๋ฌธ์ด๋‚˜ ์˜จ๋ผ์ธ ๋ช…๋ น๋ฌธ, HTML ๋ฌธ์„œ ๋“ฑ์—์„œ Markup Tag ๋“ฑ์„ ์ž…๋ ฅ์œผ๋กœ ๋ฐ›์•„๋“ค์—ฌ์„œ ๊ตฌ๋ฌธ์„ ํ•ด์„ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹จ์œ„์™€ ์—ฌ๋Ÿฌ ๋ถ€๋ถ„์œผ..

๐ŸŒฑ ์ฝ”๋ฆฐ์ด๋ฅผ ์œ„ํ•œ GUIDE/๐Ÿ—‚๏ธ OpenSource

3 ์ˆœ์„œ๊ฐ€ ์—†๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•ด๋ณด์ž. <ul> <li> ํƒœ๊ทธ

์ˆœ์„œ๊ฐ€ ์—†๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•ด๋ณด์ž. ํƒœ๊ทธ ์ˆœ์„œ๊ฐ€ ์—†๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ํƒœ๊ทธ๊ฐ€ ์žˆ๋‹ค. ์ด๋‹ค. ์€ unordered list์˜ ์•ฝ์ž์ด๋‹ค. ์ˆœ์„œ๊ฐ€ ์žˆ๋Š” ๋ฆฌ์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•˜๋ ค๋ฉด ์„ ์“ฐ๋ฉด ๋œ๋‹ค. ๐Ÿ’ก ์ด ๊ถ๊ธˆํ•˜๋‹ค๋ฉด? ํด๋ฆญ ์ฝ”๋“œ TODO LIST ์•„์นจ ์ฑ™๊ฒจ๋จน๊ธฐ ์ฝ”๋”ฉํ•˜๊ธฐ ๋ธ”๋กœ๊ทธ์— ๊ธ€ ์ž‘์„ฑํ•˜๊ธฐ ํ—ฌ์Šค์žฅ ๊ฐ€์„œ ์šด๋™ํ•˜๊ธฐ ๊ฒฐ๊ณผ See the Pen by Kong Yang (@Kong-Yang) on CodePen.

์–‘์ฝฉ(Yangkong)
YANGKONG TECH