kimyih
Preview Image

데이터 속성 μ΄ν•΄ν•˜κΈ°

HTML5의 데이터 속성 μ΄ν•΄ν•˜κΈ° HTML5λΆ€ν„° λ„μž…λœ 데이터 속성 (data attribute) 은 νŠΉμ • 데이터λ₯Ό HTML μš”μ†Œμ— μ €μž₯ν•  수 μžˆλŠ” 방법을 μ œκ³΅ν•©λ‹ˆλ‹€. β€˜data-β€˜λ‘œ μ‹œμž‘ν•˜λŠ” 이 속성은 μ›Ή κ°œλ°œμ—μ„œ 맀우 μœ μš©ν•˜κ²Œ μ‚¬μš©λ©λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” 데이터 속성이 무엇인지, μ™œ μ‚¬μš©ν•˜λŠ”μ§€, 그리고 μ–΄λ–»κ²Œ μ‚¬μš©ν•˜λŠ”μ§€μ— λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅...

Preview Image

λ¦¬μ•‘νŠΈ - μ‹œμž‘ν•˜κΈ°

λ¦¬μ•‘νŠΈ(React) μ΄ν•΄ν•˜κΈ°: κΈ°λ³Έ κ°œλ…κ³Ό 초기 μ„ΈνŒ… λ¦¬μ•‘νŠΈλž€? λ¦¬μ•‘νŠΈ(React)λŠ” μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€(UI)λ₯Ό λ§Œλ“€κΈ° μœ„ν•œ μžλ°”μŠ€ν¬λ¦½νŠΈ λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€. νŽ˜μ΄μŠ€λΆμ—μ„œ κ°œλ°œν•˜κ³  μœ μ§€λ³΄μˆ˜ν•˜κ³  있으며, 단일 νŽ˜μ΄μ§€ μ• ν”Œλ¦¬μΌ€μ΄μ…˜(SPA) 및 μ›Ή/μ•±(μ•±κ³Ό μ‚¬μš©μ„±μ΄ λ™μΌν•œ μ›Ή)을 λ§Œλ“€κΈ° μœ„ν•΄ 주둜 μ‚¬μš©λ©λ‹ˆλ‹€. λ¦¬μ•‘νŠΈμ˜ μ£Όμš” νŠΉμ§• ...

Preview Image

블락, 인라인블락, 인라인 속성 이해

CSS의 block, inline-block, inline 속성 μ΄ν•΄ν•˜κΈ° CSSμ—μ„œ μš”μ†Œλ₯Ό λ°°μΉ˜ν•  λ•Œ display 속성을 μ‚¬μš©ν•˜μ—¬ μš”μ†Œκ°€ νŽ˜μ΄μ§€μ— μ–΄λ–»κ²Œ λ‚˜νƒ€λ‚ μ§€λ₯Ό κ²°μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. block, inline-block, inline은 κ°€μž₯ 기본적이고 μ€‘μš”ν•œ display 속성 κ°’μž…λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” 이 μ„Έ κ°€μ§€ 속성이 μ–΄λ–»κ²Œ λ‹€λ₯΄κ³ ,...

Preview Image

μ‹œλ©˜ν‹± νƒœκ·Έ

μ‹œλ©˜ν‹± νƒœκ·Έ μ΄ν•΄ν•˜κΈ° HTML5μ—μ„œλŠ” λ¬Έμ„œμ˜ ꡬ쑰와 의미λ₯Ό λ”μš± λͺ…ν™•ν•˜κ²Œ λ‚˜νƒ€λ‚΄κΈ° μœ„ν•΄ μ‹œλ©˜ν‹±(semantic) νƒœκ·Έλ₯Ό λ„μž…ν–ˆμŠ΅λ‹ˆλ‹€. μ‹œλ©˜ν‹± νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜λ©΄ μ½”λ“œμ˜ 가독성이 λ†’μ•„μ§€κ³ , 검색 μ—”μ§„ μ΅œμ ν™”(SEO)에 도움이 되며, 접근성을 ν–₯μƒμ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” μ‹œλ©˜ν‹± νƒœκ·Έμ˜ μ‚¬μš© μ΄μœ μ™€ μ’…λ₯˜μ— λŒ€ν•΄ μ‰½κ²Œ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€. μ‹œ...

Preview Image

CSS position

CSS position 속성 μ΄ν•΄ν•˜κΈ° CSSμ—μ„œ position 속성은 HTML λ¬Έμ„œ μƒμ—μ„œ μš”μ†Œκ°€ λ°°μΉ˜λ˜λŠ” 방식을 κ²°μ •ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” position μ†μ„±μ˜ λ‹€μ–‘ν•œ κ°’κ³Ό κ·Έ 의미λ₯Ό μ‰½κ²Œ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€. position 속성 position 속성은 μš”μ†Œμ˜ μœ„μΉ˜λ₯Ό κ²°μ •ν•˜λŠ” λ°©μ‹μž…λ‹ˆλ‹€. 이 μ†μ„±μ˜ 값에 따라 μš”μ†Œκ°€...

Preview Image

CSS μš°μ„  μˆœμœ„

CSS μš°μ„  μˆœμœ„ μ΄ν•΄ν•˜κΈ° CSS(Cascading Style Sheets)μ—μ„œ μŠ€νƒ€μΌμ„ μ μš©ν•  λ•Œ, μ—¬λŸ¬ μŠ€νƒ€μΌ κ·œμΉ™μ΄ μΆ©λŒν•˜λŠ” 경우 μ–΄λ–€ μŠ€νƒ€μΌμ΄ μš°μ„ μ μœΌλ‘œ μ μš©λ˜λŠ”μ§€ μ΄ν•΄ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€. CSSλŠ” μ΄λŸ¬ν•œ μš°μ„  μˆœμœ„λ₯Ό μ •μ˜ν•˜λŠ” κ·œμΉ™μ„ κ°€μ§€κ³  μžˆμŠ΅λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” CSS μš°μ„  μˆœμœ„μ— λŒ€ν•΄ μ‰½κ²Œ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€. CSS μš°μ„  μˆœμœ„ ...

Preview Image

λ ˆκ±°μ‹œ μ½”λ“œ(legacy code)λž€

λ ˆκ±°μ‹œ μ½”λ“œ(legacy code)λž€ 무엇인가? μ†Œν”„νŠΈμ›¨μ–΄ κ°œλ°œμ—μ„œ 자주 μ–ΈκΈ‰λ˜λŠ” β€œλ ˆκ±°μ‹œ μ½”λ“œβ€λΌλŠ” μš©μ–΄μ— λŒ€ν•΄ λ“€μ–΄λ³΄μ…¨λ‚˜μš”? λ ˆκ±°μ‹œ μ½”λ“œλŠ” μƒˆλ‘œμš΄ μ½”λ“œμ™€λŠ” 달리 μ—¬λŸ¬ 문제λ₯Ό μΌμœΌν‚¬ 수 있으며, μœ μ§€λ³΄μˆ˜μ™€ ν™•μž₯이 μ–΄λ €μšΈ 수 μžˆμŠ΅λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” λ ˆκ±°μ‹œ μ½”λ“œκ°€ 무엇인지, μ™œ λ¬Έμ œκ°€ λ˜λŠ”μ§€, 그리고 μ–΄λ–»κ²Œ λ‹€λ£° 수 μžˆλŠ”μ§€μ— λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆ...

Preview Image

μžλ°”μŠ€ν¬λ¦½νŠΈ - this

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ this ν‚€μ›Œλ“œ μ΄ν•΄ν•˜κΈ° μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ this ν‚€μ›Œλ“œλŠ” λ¬Έλ§₯에 따라 λ‹€λ₯Έ 객체λ₯Ό μ°Έμ‘°ν•˜κΈ° λ•Œλ¬Έμ— μ΄ν•΄ν•˜κΈ° μ–΄λ €μšΈ 수 μžˆμŠ΅λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” thisκ°€ μ–΄λ–»κ²Œ λ™μž‘ν•˜λŠ”μ§€, 그리고 λ‹€μ–‘ν•œ μƒν™©μ—μ„œ thisκ°€ 무엇을 κ°€λ¦¬ν‚€λŠ”μ§€ μ‰½κ²Œ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€. 1. λ‹¨λ…μœΌλ‘œ μ‚¬μš©ν•  경우 (μ „μ—­ μ»¨ν…μŠ€νŠΈ) νŠΉμ§• λ‹¨λ…μœΌλ‘œ thisλ₯Ό μ‚¬μš©...

Preview Image

μžλ°”μŠ€ν¬λ¦½νŠΈ - ES6 문법 νŠΉμ§•κ³Ό 차이점 μ΄ν•΄ν•˜κΈ°

ES6 문법 νŠΉμ§•κ³Ό 차이점 μ΄ν•΄ν•˜κΈ° ECMAScript 6(ES6) λ˜λŠ” ECMAScript 2015 λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μ΅œμ‹  ν‘œμ€€ 쀑 ν•˜λ‚˜λ‘œ, μ—¬λŸ¬ μƒˆλ‘œμš΄ κΈ°λŠ₯κ³Ό 문법을 λ„μž…ν•˜μ—¬ μžλ°”μŠ€ν¬λ¦½νŠΈ ν”„λ‘œκ·Έλž˜λ°μ„ λ”μš± κ°„κ²°ν•˜κ³  효율적으둜 λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” ES6의 μ£Όμš” νŠΉμ§•κ³Ό κ·Έ 차이점을 μ‰½κ²Œ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€. 1. ν™”μ‚΄ν‘œ ν•¨μˆ˜ (Arro...

Preview Image

μžλ°”μŠ€ν¬λ¦½νŠΈ - ν˜Έμ΄μŠ€νŒ…(Hoisting)

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œμ˜ ν˜Έμ΄μŠ€νŒ…(Hoisting) μ΄ν•΄ν•˜κΈ° μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λ‹€λ₯Έ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄μ™€λŠ” λ‹€λ₯΄κ²Œ ν˜Έμ΄μŠ€νŒ…μ΄λΌλŠ” λ…νŠΉν•œ λ©”μ»€λ‹ˆμ¦˜μ„ κ°€μ§€κ³  μžˆμŠ΅λ‹ˆλ‹€. 이번 κΈ€μ—μ„œλŠ” ν˜Έμ΄μŠ€νŒ…μ΄ 무엇인지, μ–΄λ–»κ²Œ μž‘λ™ν•˜λŠ”μ§€, 그리고 이λ₯Ό μ–΄λ–»κ²Œ μ΄ν•΄ν•˜κ³  μ‚¬μš©ν•  수 μžˆλŠ”μ§€ μ‰½κ²Œ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€. ν˜Έμ΄μŠ€νŒ…μ΄λž€ 무엇인가? ν˜Έμ΄μŠ€νŒ…(Hoisting)은 μžλ°”μŠ€ν¬λ¦½...