HTML + CSS + JS

6-6. μ›Ή μš”μ†Œ μœ„μΉ˜ μ •ν•˜λŠ” 방법- position(static, relative, absolute, fixed)

초보보 ν˜œμ§„ 2021. 10. 12. 23:39
728x90

1. μ›Ή μš”μ†Œμ˜ μœ„μΉ˜λ₯Ό μ •ν•˜λŠ” left, right, top, bottom 속성

μ›Ή λ¬Έμ„œμ—μ„œ μš”μ†Œλ₯Ό μ›ν•˜λŠ” 곳에 κ°–λ‹€ λ†“μœΌλ €λ©΄ μœ„μΉ˜λ₯Ό μ§€μ •ν•΄μ•Όν•œλ‹€. 

left : κΈ°μ€€ μœ„μΉ˜μ™€ μš”μ†Œ 사이에 μ™Όμͺ½μœΌλ‘œ μ–Όλ§ˆλ‚˜ λ–¨μ–΄μ Έ μžˆλŠ”μ§€ μ§€μ •ν•œλ‹€. 

right : κΈ°μ€€ μœ„μΉ˜μ™€ μš”μ†Œ 사이에 였λ₯Έμͺ½μœΌλ‘œ μ–Όλ§ˆλ‚˜ λ–¨μ–΄μ Έ μžˆλŠ”μ§€ μ§€μ •ν•œλ‹€. 

top : κΈ°μ€€ μœ„μΉ˜μ™€ μš”μ†Œ 사이에 μœ„μͺ½μœΌλ‘œ μ–Όλ§ˆλ‚˜ λ–¨μ–΄μ Έ μžˆλŠ”μ§€ μ§€μ •ν•œλ‹€. 

bottom : κΈ°μ€€ μœ„μΉ˜μ™€ μš”μ†Œ 사이에 μ•„λž˜μͺ½μœΌλ‘œ μ–Όλ§ˆλ‚˜ λ–¨μ–΄μ Έ μžˆλŠ”μ§€ μ§€μ •ν•œλ‹€. 

 

 

 

2. postion 

positon 속성을 μ΄μš©ν•˜λ©΄ ν…μŠ€νŠΈλ‚˜ 이미지λ₯Ό λ‚˜λž€νžˆ λ°°μΉ˜ν•  μˆ˜λ„ 있고, μ›ν•˜λŠ” μœ„μΉ˜λ₯Ό 선택할 수 μžˆλ‹€. 

 

postion 속성값 

1️⃣ static : λ¬Έμ„œμ˜ 흐름에 맞좰 λ°°μΉ˜λ˜λŠ” 기본값이닀. 

2️⃣ relative : μœ„μΉ«κ°’μ„ 지정할 수 μžˆλ‹€λŠ” 점을 μ œμ™Έν•˜λ©΄ staticκ³Ό κ°™λ‹€. 

3️⃣ absolute : relative 값을 μ‚¬μš©ν•œ μƒμœ„ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ μœ„μΉ˜λ₯Ό 지정해 λ°°μΉ˜ν•œλ‹€. 

4️⃣ fixed : λΈŒλΌμš°μ € 창을 κΈ°μ€€μœΌλ‘œ μœ„μΉ˜λ₯Ό 지정해 λ°°μΉ˜ν•œλ‹€. 

 

 

 

 

❗❗❗❗

position 속성 μ€‘μ—μ„œ absolute 값을 μ‚¬μš©ν•  λ•ŒλŠ” μ£Όμ˜ν•΄μ•Όν•œλ‹€. 

μš”μ†Œμ— postion : absolute 라고 ν•œ ν›„ μœ„μΉ«κ°’μ„ μ§€μ •ν•˜λ©΄ μš”μ†Œ μ€‘μ—μ„œ postion: relative λ₯Ό μ‚¬μš©ν•œ μš”μ†Œλ₯Ό κΈ°μ€€μœΌλ‘œ μœ„μΉ˜λ₯Ό κ²°μ •ν•œλ‹€. 

근데 λ§Œμ•½ λΆ€λͺ¨ μš”μ†Œ 쀑에 μ—†λ‹€λ©΄ μƒμœ„ μš”μ†Œλ₯Ό 찾아보고, κ·Έλž˜λ„ μ—†μœΌλ©΄ 더 μœ„μ˜ μš”μ†Œλ₯Ό μ°Ύμ•„λ³Έλ‹€. 

 

 

 

 

 

 

 

 

 

 

 

728x90