μ€λμ κ³μ°κΈ° μ€νλ¦°νΈλ₯Ό νμ΄λ‘ μ§ννλ©° HTML/CSS/JavaScript μ λν μ΄ν΄λ₯Ό λνλ€.
ν΄λμ€λ₯Ό μΆκ°νκ³ μΆμ μ리먼νΈμ #ID κ° νΉμ .class κ°μ querySelector()λ‘ κ°μ Έμμ classList.add()λ₯Ό μ¬μ©νλ€.
<div id='idName'>Content</div>
.className {
background-color: red;
}
let elem = document.querySelector('#idName');
// μ μΈ μνκ³ μλ μ½λ elem μ리μ λ°λ‘ 쿼리 μ
λ ν°λ₯Ό λ£μ΄λ λλ€.
// κ·Όλ° μ½κΈ° μ΄λ €μ°λκΉ μ¬λ§νλ©΄ μ½κΈ° μ¬μ΄ λ³μλ‘ μ μΈνκ³ μ¬μ©νμ.
elem.classList.add('className');
idNameμ΄λΌλ idλ₯Ό κ°μ§ htmlμ리먼νΈμ classNameμ΄λΌλ ν΄λμ€λ₯Ό λΆμ¬νλ μ½λμ΄λ€.
쿼리 μ
λ ν°λ CSS μ νμλ‘ htmlμμ κ°μ νΉμ ν μ μκ² ν΄μ£Όλ λ©μλμ΄λ€.
querySelector()μ κ΄ν μμλ tag, idκ°, class κ°μ΄ μ¬ μ μλ€.
νκ·Έλ₯Ό μ νν λ querySelector('tagName') μ ννλ‘ νκ·Έλ₯Ό νΉμ νκ³ ,
μμ΄λλ‘ μ νν λ querySelector('#idName') μ ννλ‘ νΉμ νκ³ ,
ν΄λμ€λ‘ μ νν λ querySelector('.className') μ ννλ‘ νΉμ νλ€.
λ°λ‘ μ μ§ μλλΌλ λ°μ΄νκ° μ νμμΌλ©΄ νμμ΄λ€.
λ§μ½ νκ·Έλ ν΄λμ€λ‘ μ νν λ, νκ·Έλ ν΄λμ€κ° λ€μμΌ κ²½μ° μ΅μ΄λ‘ μ°Ύμμ§λ, 보ν΅μ κ°μ νκ·Έ νΉμ ν΄λμ€ μ€ κ°μ₯ μμ μλ κ° νλλ₯Ό μ ννλ€.
κ·Έλ¦¬κ³ κ°μ μ°Ύλ μκ° κ·Έ μ΅μ΄ κ°μ λ°ννλ©΄μ νμλ λ©μΆλ€.
κ³ λ‘ idλ‘ μ ννλκ² λ§ νΈνκ³ , λ§μ½ νκ·Έ μ 체 νΉμ ν΄λμ€ μ 체λ₯Ό μ νν λ μ°¨νμ ν¬μ€ν ν element.querySelectorAll() λ©μλλ₯Ό μ¬μ©ν΄μΌνλ€.
μ§μ μ μΌλ‘ ν΄λμ€ μμ±μ λ€λ£¨λ λ©μλμ΄λ€.
μ£Όλ‘ μ¬μ©νλ κ²μ
elem.checkList // elemμ ν΄λμ€λ₯Ό λ¬Έμμ΄λ‘ λμ΄
elem.checkList.length // elemμ ν΄λμ€ κ°―μλ₯Ό μ«μλ‘ λ°ν
elem.checkList.add('className', 'className1') // ν΄λμ€λ₯Ό elem μ μΆκ°ν λ μ¬μ©, νλ²μ 볡μ μΆκ° κ°λ₯
elem.checkList.replace('classNameBefore', 'classNameAfter') // ν΄λμ€λ₯Ό λ°κΏλ μ¬μ©
elem.checkList.remove('className', 'className1') // ν΄λμ€λ₯Ό elem μμ μ κ±°ν λ μ¬μ©, νλ²μ 볡μ μ κ±° κ°λ₯
elem.checkList.toggle('className', 'Condition')
// elemμ classNameμ΄λΌλ ν΄λμ€κ° μμλλ classNameμ μΆκ°νκ³ , classNameμ΄ μμλλ classNameμ μ κ±°νλ€.
elem.checkList.contains('className') // elemμ classNameμ΄λΌλ ν΄λμ€κ° μλμ§ νμΈ. λΆλ¦¬μΈ νμ
μΌλ‘ λ°ννλ€.
μ΄ λ©μλλ μ리먼νΈκ° κ΄νΈ μμ CSS μμκ° μΌμΉνλ©΄ λΆλ¦¬μΈ νμ μΌλ‘ true, λΆμΌμΉνλ€λ©΄ falseλ₯Ό λ°ννλ λ©μλμ΄λ€.
μ€λ κ³μ°κΈ° μ€νλ¦°νΈλ₯Ό κ°μ₯ λμ λ¨κ³κΉμ§ ν΄κ²°ν΄μ μ μΆνλ€.
μ€νλ¦°νΈλ₯Ό μ§ννλ©° λ§μ°νκ² μκ³ μλ λ©μλλ€μ λ°°μ λ€.λ λ°°μμΌν¨
μ€νλ¦°νΈμ μ μ νλ €μ λλ¨Έμ§ κ³΅λΆλ₯Ό μνλ€. κ²μΌλ₯Έλ
νμ΄λνν
μ κ²½μ λ무 λͺ» μ¨μ€ κ² κ°μ μ£μ‘νλ€. μ κ²½μ¨μ€ μμ€μ΄ μλκΈ°λ ν¨
μ€λμ κ·Έλλ μ΄μ λ³΄λ¨ λ 곡λΆν κ² κ°λ€.
μ¬μ€ μ΄μ λ 곡λΆλμ λ§μ‘±νλ©΄ μλλκ² μ¬μ€μ΄μ§λ§ λλ κ°μ¬ν μΈκ°μ΄λΌ μμ λ°°μμλ ν¬κ² λ§μ‘±ν΄λ²λ¦¬λ νμ
μ μΈκ°μ΄λ€.
λ°°μμ ν¬κ³ μμμ΄ μ΄λ μκ² λλλ§μ λ λ 곡λΆν μ μμμλ κ±°κΈ°μ λ§μ‘±νκ³ μμ£Ό ν΄λ²λ Έλ€λκ±Έ μΈμ§νκ³ μλ μ΅μνμ μμ¬μ΄ μλ μ¬λμ΄λΌ μμ λΆλλ¬μ μ§κ³ λ§λ€. νμ λΆλλ¬μ΄ μ¬λ
μ μ§ν΄λΌ μ μ±ν
μΆκ°λ‘ λΈλ‘κ·Έ ν¬μ€ν
μ λν κ°νΌλ μ¬μ ν λͺ» μ‘κ³ μλ€.
TILμ 곡λΆν κ² λ³΄λ€ μΌκΈ° λλμ νκ³ κ° λ λΆλμ΄ λ§μΌλ©΄ μ΄μ°νλ.
μ무λλ μ΄λμ΄λ λλ μΌμμ μ’μ μ λμ μ κΉμ§ μ€κ΅¬λλ°©μΌλ‘ μ μ§λ§κ³ μ§μ§ μ½λ©κ³΅λΆμ κ΄ν κ±°κΈ°μ μ΄μ νΈλ
μ΄ μ‘°κΈ λν΄μ§ κ²λ§ ν¬μ€ν
ν΄μΌκ² λ€.
λͺ¨λ μλ°μ€ν¬λ¦½νΈ - https://ko.javascript.info/
πππ