Hyunjin Cho

@resistan@hackers.pub ยท 12 following ยท 13 followers

๐Ÿ•ฏ๏ธ๋ฐ”๋ผ๋Š” ๊ฑด ํ‰๋“ฑํ•œ ๋ฏผ์ฃผ ์„ธ์ƒ. ํ•ด์˜จ ๊ฑด A11Y, HTML, CSS. ์š”์ฆ˜์€ ๋‹ค์‹œ ํˆฌ์Ÿ.

์ ‘๊ทผ์„ฑ ๊ด€๋ จ ์ž‘์—…
a11ykr.github.io
Blog
resistan.com

@hongminheeๆดช ๆฐ‘ๆ†™ (Hong Minhee) ์•„์ง์€ ์ธํ„ฐํŽ˜์ด์Šค๊ฐ€ ๋ฐ์Šคํฌํƒ‘ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ณด์ด๊ธด ํ•ฉ๋‹ˆ๋‹ค๋งŒ, ์ด๋ฏธ์ง€ ๋“ฑ๋ก์„ ํŽธ์ง‘์ฐฝ์— ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ์œผ๋กœ๋งŒ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉด ๋ชจ๋ฐ”์ผ์—์„  ์“ธ ์ˆ˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‹ˆ ํŒŒ์ผ ์ฒจ๋ถ€ ๋ฒ„ํŠผ ํ•˜๋‚˜ ๋‹ฌ๋ฉด ์–ด๋–จ๊นŒ ํ•ฉ๋‹ˆ๋‹ค.

์˜ค๋ž˜ ์ „์— ๋ธ”๋กœ๊ทธ์— ์ผ๋˜ ๊ธ€์ธ๋ฐ, ์•ž์œผ๋กœ๋Š” ์ ‘๊ทผ์„ฑ ์ •์ฑ…์ด๋‚˜ UI๋ฅผ ๋Œ€์ƒ์œผ๋กœ ๊ธ€์„ ์ข€ ์จ๋ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ•ด๋ณธ๋‹ค.

์ด๋ฏธ ๋งŒ๋“ค์–ด์ง„ ๊ฑธ ํ‰๊ฐ€ํ•˜๋Š” ๊ฑด ๋น„ํŒ๋งŒ ๋‚จ๊ธฐ๊ณ  ๋ณ€ํ™”๋ฅผ ๋งŒ๋“ค์–ด ๋‚ด๊ธฐ๋Š” ์–ด๋ ต๋”๋ผ.

๋ฌผ๋ก  ๋‹น์‹œ์—๋Š” 'ํ•œ ํ‘œ๊ฐ€ ๊ธ‰ํ•œ' ์‚ฌ๋žŒ๋“ค์ด ์ด๋Ÿฐ ๊ธ€๋„ ํผ๋‚˜๋ฅด๊ธด ํ–ˆ์ง€๋งŒ.

18๋Œ€ ๋Œ€์„  ํ›„๋ณด๋“ค์˜ ํ™ˆํŽ˜์ด์ง€ ์›น ์ ‘๊ทผ์„ฑ

18๋Œ€ ๋Œ€์„  ํ›„๋ณด๋“ค์˜ ํ™ˆํŽ˜์ด์ง€ ์›น ์ ‘๊ทผ์„ฑ

์–ด์ฉŒ๋‹ค๋ณด๋‹ˆ ๊ฐœ์ธ์ ์œผ๋กœ ๋ชจ์•„๋’€๋˜ ์ž๋ฃŒ๋ฅผ ์ •๋ฆฌํ•˜๊ฒŒ ๋๋Š”๋ฐ, 17๋Œ€ ๋Œ€์„  ๋•Œ ํ•œ๊ตญ์žฅ์• ์ธ์ธ๊ถŒํฌ๋Ÿผ์˜ ๋Œ€์„  ํ›„๋ณด ํ™ˆํŽ˜์ด์ง€๋ณ„ ์›น ์ ‘๊ทผ์„ฑ ํ‰๊ฐ€ ๊ฒฐ๊ณผ๊ฐ€ ์žˆ๊ธฐ์— ๊บผ๋‚ด๋ดค๋‹ค. ์ž๋ฃŒ๋ฅผ ๋ณด๋ฉด ๋‹น์‹œ์˜ ํ›„๋ณด ํ™ˆํŽ˜์ด์ง€์˜ ์›น ์ ‘๊ทผ์„ฑ ํ‰๊ท  41.02์ ์œผ๋กœ ์ค‘์•™๋ถ€์ฒ˜๋‚˜ ์ž์น˜๋‹จ์ฒด์˜ ํ‰๊ท  ์ ์ˆ˜์— ๋น„ํ•ด 10~40์  ์ด์ƒ ๋‚ฎ์•˜๋˜ ๊ฒƒ์œผ๋กœ ์ง‘๊ณ„๋˜์–ด์žˆ๋‹ค. ๋Œ€์„  ํ›„๋ณด๋“ค์˜ ํ™ˆํŽ˜์ด์ง€ ์ด๋ฒˆ ๋Œ€์„ ์—๋Š” ๋น„์Šทํ•œ ์ž๋ฃŒ๊ฐ€ ์•„์ง ์—†๋Š” ๋“ฏํ•ด์„œ ์ฃผ์š” ํ›„๋ณด๋“ค์˜ ํ™ˆํŽ˜์ด์ง€๋ฅผ ๊ฐ„๋‹จํžˆ๋‚˜๋งˆ ์‚ดํŽด๋ณด๊ฒŒ ๋๋‹ค. ์ฒ˜์Œ์—” ์›น ์ ‘๊ทผ์„ฑ ์ง€์นจ์˜ ํ•ญ๋ชฉ๋ณ„๋กœ ํ’€์–ด๋ณผ๊นŒ ํ–ˆ๋Š”๋ฐ, ๋ฉ”์ธํŽ˜์ด์ง€์˜ ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ์‚ดํŽด๋ณด๋‹ค๋ณด๋‹ˆ... ํ•˜๊ธฐ ์‹ซ์–ด์กŒ๋‹ค. ์กฐ๊ธˆ ์‚ดํ”ผ๋‹ค๋ณด๋‹ˆ ์„œ๋ธŒํŽ˜์ด์ง€๋“ค๊นŒ์ง€ ์ผ์ผํžˆ ๋œฏ์–ด๋ณด๊ณ  ์ •๋ฆฌํ•˜๊ธฐ์—” ์‹œ๊ฐ„์ด ์•„๊นŒ์šธ ์ •๋„๋‹ค. ๊ทธ๋ž˜์„œ ํ™ˆํŽ˜์ด์ง€๋ณ„๋กœ '๋Œ€์ถฉ' ์ •๋ฆฌํ•ด๋ณธ๋‹ค. ๋ฐ•๊ทผํ˜œ ํ›„๋ณด ํ™ˆํŽ˜์ด์ง€

resistan.com ยท ์ทจํ–ฅ์˜ ํ”์ 

๊ฐœ์ธ์ ์œผ๋กœ bootstrap์ด๋‚˜ tailwind๋ฅผ ์ข‹์•„ํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ด๋Ÿฐ CSS ํ”„๋ ˆ์ž„์›์ด ๊ต‰์žฅํžˆ ์ž‘์€ ๋‹จ์œ„(์ผ๋ฐ˜์ ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ)์˜ ์Šคํƒ€์ผ์„ ํด๋ž˜์Šค ์ง‘ํ•ฉ์œผ๋กœ๋งŒ ์ปจํŠธ๋กค ํ•˜๋ ค๊ณ  ํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

CSS(Cascading Style Sheets)๋Š” ๊ทธ ์ด๋ฆ„์—์„œ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋™์ž‘ํ•œ๋‹ค. ๋ถ€๋ชจ ์š”์†Œ์—์„œ ์ž์‹ ์š”์†Œ๋กœ ์Šคํƒ€์ผ์„ ์ƒ์†ํ•˜๋Š” ๊ฒŒ ์ค‘์š”ํ•œ ๊ฐœ๋… ์ค‘ ํ•˜๋‚˜์ด๊ณ  ์ด๊ฑธ ์ด์šฉํ•˜๋ฉด ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€ ๋‹จ์œ„์˜ ์Šคํƒ€์ผ์„ ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ ์žก์„ ์ˆ˜ ์žˆ๋‹ค. ๋ฌผ๋ก , ๊ฐœ๋ฐœ์—์„œ ํŠน์ • ํด๋ž˜์Šค๋ฅผ ๋ฐ˜๋ณต ์ถœ๋ ฅํ•˜๋Š” ๊ฒƒ๋„ ๊ฒฐ๊ณผ๋Š” ๊ฐ™์„ ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ, ๊ฐœ๋ฐœ ํŽธ์˜๋ฅผ ์œ„ํ•ด CSS ๊ทœ์น™์„ ๊นก๊ทธ๋ฆฌ ๋ฌด์‹œํ•˜๋Š” ๋ฐฉ์‹์ด tailwind ๊ฐ™์€ ๊ฑฐ๋ผ๊ณ  ๋ณด๋Š” ์ž…์žฅ์ด๋‹ค.

์–ด์ฐจํ”ผ ๊ณตํ†ต ์Šคํƒ€์ผ์€ ํ•„์š”ํ•˜์ง€ ์•Š๋‚˜. ๊ทธ๋ž˜์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์“ฐ๋”๋ผ๋„ ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ์„ ๋”ฐ๋กœ ์„ ์–ธํ•ด๋‘๊ณ  ์˜ˆ์™ธ๋ฅผ CSS-in-JS๋กœ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ๋งž๋‹ค๊ณ  ๋ณธ๋‹ค.

DEI ์ค‘์— ์ ‘๊ทผ์„ฑ์€ I์— ๊ฐ€๊น๊ฒ ์ง€๋งŒ, ๊ฐœ๋ฐœ์ž ์ค‘์— ๊ด€์‹ฌ ์žˆ๋Š” ์‚ฌ๋žŒ์€ ์ ์€ ๋“ฏ.

๊ณต๋™ ์ž‘์—…์„ ์œ„ํ•œ ์ €์žฅ์†Œ ๊ณ„์ •์„ ๋”ฐ๋กœ ๋งŒ๋“ค๊ณ , ๊ฐœ์ธ ๊ณ„์ •์„ ํ˜‘์—…์ž๋กœ ๋“ฑ๋กํ•ด์„œ ์ž‘์—…์„ ํ•˜๊ณ ๋Š” ์žˆ๋Š”๋ฐ...

  • ์ˆ˜์ง‘ํ•  ์ •๋ณด๋„ ๋งŽ๊ณ ,
  • ๊ฐœ๊ฐœ์ธ์˜ ๊ด€์‹ฌ์‚ฌ๋„ ๋‹ค๋ฅด๊ณ ,
  • ๊ฐ์ž ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์‹œ๊ฐ„๋„ ๋‹ค๋ฅผํ…Œ๊ณ ,
  • ํ•จ๊ป˜ ํ•ด์คฌ์œผ๋ฉด ํ•˜๋Š” ์ „๋ฌธ๊ฐ€๋“ค์ด ์žˆ์ง€๋งŒ ๋ง ๊บผ๋‚ด๊ธฐ๋„ ์‰ฝ์ง€ ์•Š๋‹ค.

์ €๋ณ€์„ ๋„“ํžˆ๊ณ  ์‹ถ๊ณ , ํ† ๋ก ์˜ ์žฅ๋„ ๋งŒ๋“ค์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๊ณ , ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ๋„ ๋งŽ๊ณ . ๊ทธ๋Ÿฌ๋‚˜ ๋‚˜ ์—ญ์‹œ ํ˜„์ƒ์˜ ๋ฌธ์ œ๊ฐ€ ์—ฌ์ „ํ•˜๋‹ค.