λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

μš”μ†Œ3

[JAVASCRIPT] μš”μ†Œμ˜ 크기 및 μœ„μΉ˜λ₯Ό ν‘œν˜„ν•˜λŠ” 속성, λ©”μ„œλ“œ μžλ°”μŠ€ν¬λ¦½νŠΈ : μš”μ†Œ 크기 및 μœ„μΉ˜ 속성과 λ©”μ„œλ“œ 이번 μ‹œκ°„μ—λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μš”μ†Œμ˜ μœ„μΉ˜ 및 크기λ₯Ό ν‘œν˜„ν•˜λŠ” 속성과 λ©”μ„œλ“œλ“€μ„ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.πŸ˜‡ λ‹€μŒμ˜ ν‘œλ₯Ό 톡해 μ•Œμ•„λ΄…μ‹œλ‹€. #01. μš”μ†Œμ˜ 속성 및 λ©”μ„œλ“œ μš”μ†Œ 크기 속성 μ„€λͺ… element.clientWidth μš”μ†Œμ˜ κ°€λ‘œ κ°’ (νŒ¨λ”© / 보더 / λ§ˆμ§„ 미포함) element.clientHeight μš”μ†Œμ˜ μ„Έλ‘œ κ°’ (νŒ¨λ”© / 보더 / λ§ˆμ§„ 미포함) element.clientTop μš”μ†Œμ˜ YμΆ• κ°’ (λΆ€λͺ¨κΈ°μ€€) element.clientLeft μš”μ†Œμ˜ XμΆ• κ°’ (λΆ€λͺ¨ κΈ°μ€€) element.offsetWidth μš”μ†Œμ˜ κ°€λ‘œ κ°’ (보더 / νŒ¨λ”© 포함) element.offsetTop μš”μ†Œμ˜ YμΆ• κ°’ (λ¬Έμ„œ κΈ°μ€€) element.offsetLeft μš”μ†Œμ˜ XμΆ•.. 2022. 9. 1.
[CSS] μš”μ†Œλ₯Ό μˆ¨κΈ°λŠ” 방법 CSS : μš”μ†Œ(element)λ₯Ό μ•ˆλ³΄μ΄κ²Œ ν•˜λŠ” 방법 CSS 속성을 μž‘μ—…ν•˜λ‹€ 보면 μš”μ†Œλ₯Ό μˆ¨κ²¨μ•Ό ν•˜λŠ” 속성듀이 ν•„μš”ν•˜κ²Œ λ©λ‹ˆλ‹€. 이번 μ‹œκ°„μ—λŠ” CSS 기법 쀑 ν•˜λ‚˜μΈ μš”μ†Œλ₯Ό μ•ˆλ³΄μ΄κ²Œ ν•˜λŠ” 방법 5가지에 λŒ€ν•΄ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€!πŸ˜„ #1. display : none; κ°€μž₯ 보편적으둜 μ‚¬μš©ν•˜λŠ” 속성 쀑 ν•˜λ‚˜λ‘œ μš”μ†Œμ˜ μ˜μ—­μ΄ μ™„μ „νžˆ μ‚¬λΌμ§€κ²Œ λ©λ‹ˆλ‹€. λ˜ν•œ 이 속성을 μ‚¬μš©ν•˜κ²Œ 되면 μ• λ‹ˆλ©”μ΄μ…˜ νš¨κ³Όλ„ 쀄 수 μ—†κ²Œ λ©λ‹ˆλ‹€. πŸ’‘ μ½”λ“œ 보기 p {display : none;} μ—†μ–΄μ§‘λ‹ˆλ‹Ή 뾰둜둱 #2. opacity: 0; opacityλŠ” 투λͺ…도λ₯Ό μ„€μ •ν•˜λŠ” 속성 쀑 ν•˜λ‚˜λ‘œ μš”μ†Œμ˜ 투λͺ…도λ₯Ό 0으둜 ν•˜μ—¬ μš”μ†Œλ₯Ό μ•ˆλ³΄μ΄κ²Œ ν•©λ‹ˆλ‹€. λ•Œλ¬Έμ— μš”μ†ŒλŠ” 사라져도 μ˜μ—­μ€ λ‚¨κ²Œ 되며 μ• λ‹ˆλ©”μ΄μ…˜λ„ 적용이 κ°€λŠ₯ν•©λ‹ˆλ‹€. πŸ’‘ μ½”λ“œ 보기 p {opac.. 2022. 8. 26.
μš”μ†Œ 선택 μžλ°”μŠ€ν¬λ¦½νŠΈ μš”μ†Œ 선택 μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ CSS μ„ νƒμžλ₯Ό λ„˜κ²¨μ„œ μ›ν•˜λŠ” HTML μš”μ†Œλ₯Ό 찾을 수 μžˆλ„λ‘ ν•¨μˆ˜λ₯Ό μ œκ³΅ν•˜κ³  μžˆλ‹€. λŒ€ν‘œμ μœΌλ‘œ querySelector() ν•¨μˆ˜λŠ” μ„ νƒμžμ— λΆ€ν•©ν•˜λŠ” μš”μ†Œ μ€‘μ—μ„œ 첫 번째 μš”μ†Œλ§Œμ„ λ°˜ν™˜ν•˜κ³ , querySelectorAll() ν•¨μˆ˜λŠ” μ„ νƒμžμ— λΆ€ν•©ν•˜λŠ” λͺ¨λ“  μš”μ†Œλ₯Ό λ°˜ν™˜ν•œλ‹€. 01. μš”μ†Œλ₯Ό 직접 μ„ νƒν•˜λŠ” λ©”μ„œλ“œ λ©”μ„œλ“œ 속성 μž…λ ₯ 방법 : document . λ©”μ„œλ“œλͺ… ( ' μš”μ†Œλͺ… ' ) λ©”μ„œλ“œ μ„€λͺ… getElementById() HTML μš”μ†Œ 쀑 id 속성인 μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. ex) document.getElementById('header') getElementByClassName() HTML μš”μ†Œ 쀑 classλͺ…μœΌλ‘œ μ„ μ–Έν•œ μš”μ†Œλ₯Ό μ„ νƒν•œλ‹€. ex) document.g.. 2022. 8. 7.
728x90
λ°˜μ‘ν˜•
Lucky Charms Rainbow
js

JAVASCRIPT

보러 κ°€κΈ°
html

HTML

보러 κ°€κΈ°
css

CSS

보러 κ°€κΈ°

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”