Position

1. ๊ฐœ์š”

position ํ”„๋กœํผํ‹ฐ๋Š” ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ •์˜ํ•œ๋‹ค. ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์›น ๋ฌธ์„œ์—์„œ ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. top, bottom, left, right ํ”„๋กœํผํ‹ฐ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ ์œ„์น˜๋ฅผ ์ง€์ •ํ•œ๋‹ค.

์•„๋ž˜์˜ ํ‘œ๋Š” position ํ”„๋กœํผํ‹ฐ๊ฐ’์ด๋‹ค.

์ข…๋ฅ˜
์„ค๋ช…

static

๋ฌธ์„œ์˜ ํ๋ฆ„์— ๋งž์ถฐ ๋ฐฐ์น˜ํ•œ๋‹ค. ๊ธฐ๋ณธ๊ฐ’

relative

์œ„์นซ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์„ ์ œ์™ธํ•˜๋ฉด static๊ณผ ๊ฐ™๋‹ค.

absolute

relative๊ฐ’์„ ์‚ฌ์šฉํ•œ ์ƒ์œ„ ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ๋ฐฐ์น˜ํ•œ๋‹ค.

fixed

๋ธŒ๋ผ์šฐ์ € ์ฐฝ์„ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜๋ฅผ ์ง€์ •ํ•ด ๋ฐฐ์น˜ํ•œ๋‹ค.


2. static (๊ธฐ๋ณธ์œ„์น˜)

๊ธฐ๋ณธ์ ์ธ ์š”์†Œ์˜ ๋ฐฐ์น˜ ์ˆœ์„œ์— ๋”ฐ๋ผ ์œ„์—์„œ ์•„๋ž˜๋กœ, ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ˆœ์„œ์— ๋”ฐ๋ผ ๋ฐฐ์น˜๋˜๋ฉด ๋ถ€๋ชจ ์š”์†Œ ๋‚ด์— ์š”์†Œ๋กœ์„œ ์กด์žฌํ•  ๋•Œ๋Š” ๋ถ€๋ชจ ์š”์†Œ์˜ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ฐฐ์น˜๋œ๋‹ค.

์ขŒํ‘œ ํ”„๋กœํผํ‹ฐ(top, bottom, left, right)๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์œผ๋ฉฐ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ๋ฌด์‹œ๋œ๋‹ค.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .parent {
        width: 150px;
        height: 150px;
      }
      .children {
        background-color: bisque;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="children">Static</div>
    </div>
  </body>
</html>

3. relative (์ƒ๋Œ€์œ„์น˜)

๊ธฐ๋ณธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ขŒํ‘œ ํ”„๋กœํผํ‹ฐ(top, bottom, left, right)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์œ„์น˜๋ฅผ ์ด๋™์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .parent {
        width: 150px;
        height: 150px;
        background-color: rgb(78, 78, 78);
      }
      .child {
        position: relative;
        background-color: bisque;
        height: 100%;
        top: 20px;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">relative</div>
    </div>
  </body>
</html>

4. absolute (์ ˆ๋Œ€์œ„์น˜)

๋ถ€๋ชจ ์š”์†Œ ๋˜๋Š” ๊ฐ€์žฅ ๊ฐ€๊นŒ์ด ์žˆ๋Š” ์กฐ์ƒ ์š”์†Œ(static ์ œ์™ธ)๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ขŒํ‘œ ํ”„๋กœํผํ‹ฐ(top, bottom, left, right)๋งŒํผ ์ด๋™ํ•œ๋‹ค. ์ฆ‰, relative, absolute, fiexed ํ”„๋กœํผํ‹ฐ๊ฐ€ ์„ ์–ธ๋˜์–ด ์žˆ๋Š” ๋ถ€๋ชจ ๋˜๋Š” ์กฐ์ƒ ์š”์†Œ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์œ„์น˜๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค.

๋งŒ์ผ ๋ถ€๋ชจ ๋˜๋Š” ์กฐ์ƒ ์š”์†Œ๊ฐ€ staitc์ธ ๊ฒฝ์šฐ, document body๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜์—ฌ ์ขŒํ‘œ ํ”„๋กœํ„ฐํ‹ฐ๋Œ€๋กœ ์œ„์น˜ํ•˜๊ฒŒ ๋œ๋‹ค.

absolute ํ”„๋กœํผํ‹ฐ ์„ ์–ธ ์‹œ, block ๋ ˆ๋ฒจ ์š”์†Œ์˜ width๋Š” inline ์š”์†Œ์™€ ๊ฐ™์ด content์— ๋งž๊ฒŒ ๋ณ€ํ™”๋˜๋Š๋กœ ์ ์ ˆํ•œ width๋ฅผ ์ง€์ •ํ•˜์—ฌ์•ผ ํ•œ๋‹ค.

relative ํ”„๋กœํผํ‹ฐ๋Š” ๊ธฐ๋ณธ ์œ„์น˜๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ขŒํ‘œ ํ”„๋กœํผํ‹ฐ(top, bottom, left, right)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์œ„์น˜๋ฅผ ์ด๋™์‹œํ‚จ๋‹ค. ํ•˜์ง€๋งŒ absoulte ํ”„๋กœํ„ฐํ”ผ ์š”์†Œ๋Š” ๋ถ€๋ชจ ์š”์†Œ์˜ ์˜์—ญ์„ ๋ฒ—์–ด๋‚˜ ์ž์œ ๋กญ๊ฒŒ ์–ด๋””๋“ ์ง€ ์œ„์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        display: flex;
      }
      .parent {
        width: 150px;
        height: 150px;
        margin: 50px;
        background-color: rgb(78, 78, 78);
      }
      .children-relative {
        position: relative;
        background-color: bisque;
        height: 100%;
        top: 20px;
        left: 20px;
      }
      .children-absolute {
        position: absolute;
        background-color: bisque;
        width: 150px;
        height: 150px;
        top: 20px;
        left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="children-absolute">absolute</div>
    </div>
    <div class="parent">
      <div class="children-relative">relative</div>
    </div>
  </body>
</html>

5. fixed (๊ณ ์ •์œ„์น˜)

๋ถ€๋ชจ ์š”์†Œ์™€ ๊ด€๊ณ„์—†์ด ๋ธŒ๋ผ์šฐ์ €์˜ viewport๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ขŒํ‘œ ํ”„๋กœํผํ‹ฐ(top, bottom, left, right)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์œ„์น˜๋ฅผ ์ด๋™์‹œํ‚จ๋‹ค.

์Šคํฌ๋กค์ด ๋˜๋”๋ผ๋„ ํ™”๋ฉด์—์„œ ์‚ฌ๋ผ์ง€์ง€ ์•Š๊ณ  ํ•ญ์ƒ ๊ฐ™์€ ๊ณณ์— ์œ„์น˜ํžŒ๋‹ค.

fixed ํ”„๋กœํผํ‹ฐ ์„ ์–ธ ์‹œ, block ๋ ˆ๋ฒจ ์š”์†Œ์˜ width๋Š” inline ์š”์†Œ์™€ ๊ฐ™์ด content์— ๋งž๊ฒŒ ๋ณ€ํ™”๋˜๋Š๋กœ ์ ์ ˆํ•œ width๋ฅผ ์ง€์ •ํ•˜์—ฌ์•ผ ํ•œ๋‹ค.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        background-color: rgb(137, 137, 137);
        color: white;
        padding: 10px;
        box-sizing: border-box;
      }
      .nav {
        position: fixed;
        width: 100%;
        top: 0;
        right: 0;
      }
      .side{
        position: fixed;
        height: 100%;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="nav">fixed nav-bar</div>
    <div class="side">fixed side-bar</div>
</html>

6. overflow ํ”„๋กœํผํ‹ฐ

overflow ํ”„๋กœํผํ‹ฐ๋Š” ์ž์‹ ์š”์†Œ๊ฐ€ ๋ถ€๋ชจ ์š”์†Œ์˜ ์˜์—ญ์„ ๋ฒ—์–ด๋‚ฌ์„ ๋•Œ ์ฒ˜๋ฆฌ ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•œ๋‹ค.

์•„๋ž˜๋Š” overflow ํ”„๋กœํผํ‹ฐ ๊ฐ’์— ๋Œ€ํ•œ ์„ค๋ช…์ด๋‹ค.

ํ”„๋กœํผํ‹ฐ ๊ฐ’
์„ค๋ช…

visible

์˜์—ญ์„ ๋ฒ—์–ด๋‚œ ๋ถ€๋ถ„์„ ํ‘œ์‹œํ•œ๋‹ค. ๊ธฐ๋ณธ๊ฐ’

hidden

์˜์—ญ์„ ๋ฒ—์–ด๋‚œ ๋ถ€๋ถ„์„ ์ž˜๋ผ๋‚ด์–ด ๋ณด์ด์ง€ ์•Š๊ฒŒ ํ•œ๋‹ค.

scroll

์˜์—ญ์„ ๋ฒ—์–ด๋‚œ ๋ถ€๋ถ„์ด ์—†์–ด๋„ ์Šคํฌ๋กค ํ‘œ์‹œํ•œ๋‹ค.(ํ˜„์žฌ ๋Œ€๋ถ€๋ถ„ ๋ธŒ๋ผ์šฐ์ €๋Š” auto์™€ ๋™์ผํ•˜๊ฒŒ ์ž‘๋™ํ•œ๋‹ค.)

auto

์˜์—ญ์„ ๋ฒ—์–ด๋‚œ ๋ถ€๋ถ„์ด ์žˆ์„๋•Œ๋งŒ ์Šคํฌ๋กค ํ‘œ์‹œํ•œ๋‹ค.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        display: flex;
      }
      div {
        background-color: rgb(187, 187, 187);
        padding: 10px;
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        margin-right: 20px;
      }
      .visible {
        overflow: visible;
      }
      .hidden {
        overflow: hidden;
      }
      .scroll {
        overflow: scroll;
      }
      .auto {
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div class="visible">
      <h3>Visibel</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae veniam quisquam tenetur architecto amet possimus omnis ullam error, eius dolores aliquid? Eaque recusandae esse quidem. Provident labore id cupiditate ratione.</p>
    </div>
    <div class="hidden">
      <h3>Hidden</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae veniam quisquam tenetur architecto amet possimus omnis ullam error, eius dolores aliquid? Eaque recusandae esse quidem. Provident labore id cupiditate ratione.</p>
    </div>
    <div class="scroll">
      <h3>Scroll</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae veniam quisquam tenetur architecto amet possimus omnis ullam error, eius dolores aliquid? Eaque recusandae esse quidem. Provident labore id cupiditate ratione.</p>
    </div>
    <div class="auto">
      <h3>Auto</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae veniam quisquam tenetur architecto amet possimus omnis ullam error, eius dolores aliquid? Eaque recusandae esse quidem. Provident labore id cupiditate ratione.</p>
    </div>
</html>

7. Conclusion

position: relative;๋ฅผ ์ง€๊ธˆ๊นŒ์ง€๋Š” ๋‹จ์ง€ absolute๊ฐ’์„ ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•ด ๋ถ€๋ชจ์š”์†Œ ์ค‘ ์›ํ•˜๋Š” ์š”์†Œ์— ์ž‘์„ฑํ•ด์•ผํ•˜๋Š” ํ”„๋กœํผํ‹ฐ๋กœ ์•Œ๊ณ  ์žˆ์—ˆ๋‹ค. ํ•˜์ง€๋งŒ relative๋งŒ์˜ ํŠน์ง•์ด ์žˆ์—ˆ๊ณ  ๊ทธ ์“ฐ์ž„์ƒˆ๊ฐ€ absolute์™€ ๊ต‰์žฅํžˆ ๋น„์Šทํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜๋‹ค. ๋‹จ์ง€ ๋ฐ”๋กœ ์œ„์˜ ๋ถ€๋ชจ ์š”์†Œ์ธ์ง€ ์•„๋‹Œ์ง€์˜ ์ฐจ์ด๋งŒ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ์ง€๊ธˆ๊นŒ์ง€ ๋‹จ๋…์œผ๋กœ relative๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋˜ ๊ฒƒ์„ ์ƒ๊ฐํ•˜๋ฉด ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ ๋Œ€์‹ ํ•˜์—ฌ padding์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์„œ ๊ทธ๋Ÿฐ ๊ฒƒ์ด์ง€ ์•Š์„๊นŒ ์‹ถ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ง€๊ธˆ๊นŒ์ง€ ์ปจํ…์ธ  ๋‚ด์˜ scroll๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” absolute๋ฅผ ์ ๊ทน์ ์œผ๋กœ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ๊ตณ์ด ๊ทธ๋Ÿฌ์ง€ ์•Š๊ณ  relative๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๋  ๋“ฏ ํ•˜๋‹ค~


์ฐธ๊ณ 

poiemaweb 2-8 ์š”์†Œ์˜ ์œ„์น˜ ์ •์˜ ๋„์„œ - HTML + CSS + ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์›น ํ‘œ์ค€์˜ ์ •์„


๐Ÿ‘†

๐Ÿ“… 2022-07-20

Last updated