[HTML/CSS] CSS Position 속성

yayaya_hojinΒ·2024λ…„ 2μ›” 7일

HTML/CSS

λͺ©λ‘ 보기
3/8
post-thumbnail

🚩 CSS Position

CSS position 속성은 HTML μš”μ†Œλ₯Ό μ›ν•˜λŠ” μœ„μΉ˜μ— λ°°μΉ˜ν•˜κΈ° μœ„ν•œ μ‚¬μš©ν•œλ‹€.

position μ†μ„±μœΌλ‘œ 기쀀을 μž‘μ•„ 상(top), ν•˜(bottom), 쒌(left), 우(right) 속성을 ν•¨κ»˜ μ‚¬μš©ν•΄ λ°°μΉ˜ν•œλ‹€.

✨ Position 속성 κ°’

1) position: static

  • HTML λ¬Έμ„œ μƒμ—μ„œ μ›λž˜ μœ„μΉ˜μ— λ°°μΉ˜ν•œλ‹€.
  • position의 κΈ°λ³Έ κ°’(default value)이닀.
  • μœ„μΉ˜λ₯Ό μ‘°μ •ν•˜λŠ” top, bottom, left, right κ°’ 적용이 λΆˆκ°€λŠ₯ν•˜λ‹€.

2) position: relative

  • μ›λž˜ μœ„μΉ˜λ₯Ό κΈ°μ€€μœΌλ‘œ μƒλŒ€μ  μœ„μΉ˜μ— λ°°μΉ˜ν•œλ‹€.
  • top, bottom, left, right κ°’μœΌλ‘œ μ μš©ν•œλ‹€.

3) position: absolute

  • μƒμœ„ μš”μ†Œμ˜ κΈ°μ€€μœΌλ‘œ μƒλŒ€μ  μœ„μΉ˜μ— λ°°μΉ˜ν•œλ‹€.
  • DOM 트리λ₯Ό 따라 μƒμœ„ μš”μ†Œμ˜ position이 static이 μ•„λ‹Œ 것을 μ°Ύμ•„ κΈ°μ€€μœΌλ‘œ μ‚ΌλŠ”λ‹€.
  • top, bottom, left, right κ°’μœΌλ‘œ μ μš©ν•œλ‹€.
  • λ§Œμ•½ λͺ¨λ“  μƒμœ„ μš”μ†Œμ˜ position이 static일 경우 <body> νƒœκ·Έλ₯Ό κΈ°μ€€μœΌλ‘œ ν•œλ‹€.

4) position: fixed

  • viewport(μ›Ή νŽ˜μ΄μ§€μ— λ³΄μ—¬μ§€λŠ” μ˜μ—­)λ₯Ό κΈ°μ€€μœΌλ‘œ λ°°μΉ˜ν•œλ‹€.
  • top, bottom, left, right κ°’μœΌλ‘œ μ μš©ν•œλ‹€.

5) position: sticky

  • stickyλŠ” 화면에 λΆ™μ–΄μ„œ 떨어지지 μ•ŠλŠ” κ²ƒμ²˜λŸΌ μž‘λ™ν•œλ‹€.
  • μŠ€ν¬λ‘€μ„ ν•˜κΈ° μ „μ—λŠ” position: staticκ³Ό 같이 μ›λž˜ μœ„μΉ˜μ— λ°°μΉ˜ν•œλ‹€.
  • μŠ€ν¬λ‘€μ„ ν•˜λ©΄ position: fixed와 같이 viewportλ₯Ό κΈ°μ€€μœΌλ‘œ λ°°μΉ˜ν•œλ‹€.

pos_img

profile
yayaya_hojin
이전 포슀트

[HTML/CSS] CSS Display & Flex 속성

λ‹€μŒ 포슀트

[HTML/CSS] CSS λ‹¨μœ„(feat. λ°˜μ‘ν˜•)

0개의 λŒ“κΈ€