μλ°μ€ν¬λ¦½νΈμμ μ’νλ λκ°μ κΈ°μ€μ κ°μ§κ³ μλ€.
μ°½ κΈ°μ€ μ’νμ λ¬Έμ κΈ°μ€ μ’νκ° κ·Έκ²μ΄λ€.
μ°½ κΈ°μ€ μ’ν(μλ μμΉ)
μ€ν¬λ‘€μ λ°λΌ μμ§μ΄λ κ°λ³μ μΈ μ’νμ΄λ€.
μ°½ κΈ°μ€ μ’νλ clientX
, clientY
λ‘ νκΈ°νλ€.
position:fixed
μμ±μ μ¬μ©ν λμ κ°μ΄ μ°½(window) κΈ°μ€μΌλ‘ μΌμͺ½ μ λͺ¨μ리λ₯Ό κΈ°μ€μΌλ‘ μ’νλ₯Ό κ³μ°νλ©° position:fixed
μ ν¨κ» μ¬μ©ν λ μλμ§κ° μ’λ€.
λ¬Έμ κΈ°μ€ μ’ν(μ λ μμΉ)
μ€ν¬λ‘€ νλλΌλ λ³νμ§ μλ, λ¬Έμ κΈ°μ€μ μ’νμ΄λ€.
λ¬Έμ κΈ°μ€ μ’νμ κ²½μ°λ μ’νλ₯Ό pageX
, pageY
λ‘ νκΈ°νλ€.
position:absolute
μ μ μ¬νκ² λ¬Έμ μ΅μλ¨(root)μμ λ¬Έμ 맨 μ μΌμͺ½ λͺ¨μ리λ₯Ό κΈ°μ€μΌλ‘ μ’νλ₯Ό κ³μ°νλ€.
μ€ν¬λ‘€ ν λ pageYλ λ³νμ§ μμ§λ§ clientYλ μ°½ μλ¨κ³Όμ κ±°λ¦¬κ° λ¬λΌμ§κΈ°μ κ°μ΄ λ³νλ€.
κ³ λ‘ page κ°κ³Ό clientκ°μ κ΄κ³λ λ€μκ³Ό κ°μ΄ ννν μ μλ€.
pageX
=clientX
+μΈλ‘ μ€ν¬λ‘€ν 거리
pageY
=clientY
+κ°λ‘ μ€ν¬λ‘€ν 거리
getBoundingClientRect
λ©μλλ μμλ₯Ό κ°μΈλ κ°μ₯ μμ λ€λͺ¨μ μ°½ κΈ°μ€ μ’νλ₯Ό κ°μ²΄ ννλ‘ λ°ννλ€.
μ¦, μλμμΉλ₯Ό ꡬνλ λ©μλμ΄λ€.
λ°νλλ κ°μ νλ‘νΌν° ν€λ‘λ x
, y
, width
, height
, left
, right
, top
, bottom
μ΄ μλ€.
width
μheight
λ ν€ κ°μμλ μ μ μλ―, 컨ν μΈ (μμ)μ λμ΄μ λλΉλ₯Ό λ»νλ€.
x
μy
λ μμμ μ’μΈ‘ λͺ¨μ리 μμͺ½ λμ΄ κ°κ° μ°½μ μΌμͺ½κ³Ό μμͺ½ λ©΄λΆν° μΌλ§λ§νΌ λ¨μ΄μ Έ μλμ§λ₯Ό μλ―Ένλ€.
κ·Έλ¦¬κ³ left
, right
μ top
, bottom
μ νμ νλ‘νΌν°μΈλ° μ΄λ width
μ heigth
κ° μμκ° λλ λͺλͺ μν©μμ μ μ©νκ² μ¬μ©λλ€.
left
=x
; μ°½μ μ’μΈ‘μμ 컨ν μΈ (μμ) μ’μΈ‘κΉμ§
right
=x
+width
; μ°½μ μ’μΈ‘μμ 컨ν μΈ μ°μΈ‘κΉμ§
top
=y
; μ°½μ μ λͺ¨μ리μμ 컨ν μΈ μ λΆλΆκΉμ§
bottom
=y
+height
; μ°½μ μ λͺ¨μ리μμ 컨ν μΈ μλ« λΆλΆκΉμ§
offset APIλ μμμ μμ μμμ position: relative
μμ±μ΄ μ μ©λ μμκ° μμλ μμμ μ λ μ’νλ₯Ό μ«μμ΄λ‘ λ°ννλ λ©μλμ΄λ€.
offset APIλ element.offsetTop
, element.offsetLeft
, element.offsetWidth
, element.offsetHeight
κ° μλ€.
position: relative
μμ±μ΄ μμ΄μΌνλ€κ³ νλλ° λ§μ½ μμ λ
Έλμ ν΄λΉ μμ±μ΄ μ μ©λ λ
ΈλAκ° μλ€λ©΄ κ·Έ λ
Έλ A κΈ°μ€μΌλ‘ μλμ μΈ μ’νκ° λ°νλκΈ° λλ¬Έμ΄λ€.
μ΄ λ λ©μλλ₯Ό λΉκ΅νλ©° innerHTMLμ΄ κ³΅κ²©μ μ·¨μ½νλ€κ³ λ§ μ μ΄λκ³ μ μ·¨μ½νμ§λ λͺ¨νΈνκ² μ μ΄λ¨μλ€. λλ λͺ
ννκ² λͺ°λκ±°λ
μ€λ 곡λΆνλ©° μ°Ύμ보λ textContent
μ innerHTML
μ μμ λ΄λΆ ν
μ€νΈμ μ κ·Όν μ μλ건 κ°μ§λ§ innerHTML
μ μ¬μ©νλ©΄ HTML νκ·Έλ μΈμμν¬ μ μκΈ°μ <script>
νκ·Έλ‘ κ³΅κ²© λ°μ μ¬μ§κ° μλ μ·¨μ½μ μ΄ μκΈ°λκ±° μλ€.
innerText
μ κ²½μ° λ³΄μ μ·¨μ½μ μ μμ§λ§ νκ·Έλ₯Ό μ½μ μ μλ μ μ κ°κ³ μ΄λ‘ μΈν΄ νμ± μλκ° λλ €μ IE νκ²½μ΄ μλκ³ μμΌ μ¬μ©νκΈ° μ ν©νμ§ μλ€.
λ€λ§ μ€νμΌμ΄ μ μ©λ ν μ€νΈλ₯Ό μ½μ΄μμΌ ν λ μ μ©νλ€.
μ¬μ€ κ°μ²΄ μ€νμμλ κ·Έλ κ³ λ· λ Έν μ΄μ μΌλ‘ μ€ννλ©΄ 보기 νΈνκ³ μ°κΈ° μ¬μ΄ κ² λ§κ³ μ₯μ μ μλ λ― νλ€.
addEventListener κ°μ κ²½μ°λ μ¬λ¬ κ°μ νΈλ€λ¬λ₯Ό λ€λ£° μ μλ μ₯μ μ΄ μκ³ μΊ‘μ³ νμ΄μ€ μ€νμ¬λΆλ₯Ό μ νν μ μλ€.
μΊ‘μ³ νμ΄μ¦λ μκΈ°μ νμΈ ν μ μλ€.
μ€λμ μ’ν, λ μ΄λ²€νΈ, μ κ· ννμμ μ΅νλ€.
μ€λ OiMW λ§μ΄ μΌλ€.
κ³ μ°¨ν¨μ μμ΅μ μ ν λͺ»νλ€.
μ€λ λ무 μ μ μμ΄ μκ°μ 보λ΄μ μκ° κ°λμ€λ λͺ¨λ₯΄κ³ λͺ°λνλ€.
ν¬μ€ν λ κΈ°μΈκ° λΆμΌλ μ¬λ°μ΄μ νμ£Όν΄μ ν¬μ€ν νλ λ΄ λͺ¨μ΅μ λ³Ό μ μμλ€.
λ μ’μκ² μ’μκ±° μλκ°
μμ΅ν μκ° μμ΄μ§κ±΄ μμ’μ
https://mommoo.tistory.com/85
https://poiemaweb.com/
https://ko.javascript.info/