Position
1. ๊ฐ์
position
ํ๋กํผํฐ๋ ์์์ ์์น๋ฅผ ์ ์ํ๋ค. ํด๋น ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ฉด ์น ๋ฌธ์์์ ์์์ ์์น๋ฅผ ์์ ๋กญ๊ฒ ์ ํ ์ ์๋ค. top
, bottom
, left
, right
ํ๋กํผํฐ์ ํจ๊ป ์ฌ์ฉํ์ฌ ์์น๋ฅผ ์ง์ ํ๋ค.
์๋์ ํ๋ position
ํ๋กํผํฐ๊ฐ์ด๋ค.
static
๋ฌธ์์ ํ๋ฆ์ ๋ง์ถฐ ๋ฐฐ์นํ๋ค. ๊ธฐ๋ณธ๊ฐ
relative
์์นซ๊ฐ์ ์ง์ ํ ์ ์๋ค๋ ์ ์ ์ ์ธํ๋ฉด static๊ณผ ๊ฐ๋ค.
absolute
relative๊ฐ์ ์ฌ์ฉํ ์์ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ์์น๋ฅผ ์ง์ ํด ๋ฐฐ์นํ๋ค.
fixed
๋ธ๋ผ์ฐ์ ์ฐฝ์ ๊ธฐ์ค์ผ๋ก ์์น๋ฅผ ์ง์ ํด ๋ฐฐ์นํ๋ค.
2. static (๊ธฐ๋ณธ์์น)
๊ธฐ๋ณธ์ ์ธ ์์์ ๋ฐฐ์น ์์์ ๋ฐ๋ผ ์์์ ์๋๋ก, ์ผ์ชฝ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ์์์ ๋ฐ๋ผ ๋ฐฐ์น๋๋ฉด ๋ถ๋ชจ ์์ ๋ด์ ์์๋ก์ ์กด์ฌํ ๋๋ ๋ถ๋ชจ ์์์ ์์น๋ฅผ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์น๋๋ค.
์ขํ ํ๋กํผํฐ(top
, bottom
, left
, right
)๋ฅผ ๊ฐ์ด ์ฌ์ฉํ ์ ์์ผ๋ฉฐ ์ฌ์ฉํ ๊ฒฝ์ฐ ๋ฌด์๋๋ค.
3. relative (์๋์์น)
๊ธฐ๋ณธ ์์น๋ฅผ ๊ธฐ์ค์ผ๋ก ์ขํ ํ๋กํผํฐ(top
, bottom
, left
, right
)๋ฅผ ์ฌ์ฉํ์ฌ ์์น๋ฅผ ์ด๋์ํฌ ์ ์๋ค.
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 ํ๋กํฐํผ ์์๋ ๋ถ๋ชจ ์์์ ์์ญ์ ๋ฒ์ด๋ ์์ ๋กญ๊ฒ ์ด๋๋ ์ง ์์นํ ์ ์๋ค.
5. fixed (๊ณ ์ ์์น)
๋ถ๋ชจ ์์์ ๊ด๊ณ์์ด ๋ธ๋ผ์ฐ์ ์ viewport๋ฅผ ๊ธฐ์ค์ผ๋ก ์ขํ ํ๋กํผํฐ(top
, bottom
, left
, right
)๋ฅผ ์ฌ์ฉํ์ฌ ์์น๋ฅผ ์ด๋์ํจ๋ค.
์คํฌ๋กค์ด ๋๋๋ผ๋ ํ๋ฉด์์ ์ฌ๋ผ์ง์ง ์๊ณ ํญ์ ๊ฐ์ ๊ณณ์ ์์นํ๋ค.
fixed ํ๋กํผํฐ ์ ์ธ ์, block ๋ ๋ฒจ ์์์ width๋ inline ์์์ ๊ฐ์ด content์ ๋ง๊ฒ ๋ณํ๋๋๋ก ์ ์ ํ width๋ฅผ ์ง์ ํ์ฌ์ผ ํ๋ค.
6. overflow ํ๋กํผํฐ
overflow ํ๋กํผํฐ๋ ์์ ์์๊ฐ ๋ถ๋ชจ ์์์ ์์ญ์ ๋ฒ์ด๋ฌ์ ๋ ์ฒ๋ฆฌ ๋ฐฉ๋ฒ์ ์ ์ํ๋ค.
์๋๋ overflow ํ๋กํผํฐ ๊ฐ์ ๋ํ ์ค๋ช ์ด๋ค.
visible
์์ญ์ ๋ฒ์ด๋ ๋ถ๋ถ์ ํ์ํ๋ค. ๊ธฐ๋ณธ๊ฐ
hidden
์์ญ์ ๋ฒ์ด๋ ๋ถ๋ถ์ ์๋ผ๋ด์ด ๋ณด์ด์ง ์๊ฒ ํ๋ค.
scroll
์์ญ์ ๋ฒ์ด๋ ๋ถ๋ถ์ด ์์ด๋ ์คํฌ๋กค ํ์ํ๋ค.(ํ์ฌ ๋๋ถ๋ถ ๋ธ๋ผ์ฐ์ ๋ auto์ ๋์ผํ๊ฒ ์๋ํ๋ค.)
auto
์์ญ์ ๋ฒ์ด๋ ๋ถ๋ถ์ด ์์๋๋ง ์คํฌ๋กค ํ์ํ๋ค.
7. Conclusion
position: relative;
๋ฅผ ์ง๊ธ๊น์ง๋ ๋จ์งabsolute
๊ฐ์ ์ค์ ํ๊ธฐ ์ํด ๋ถ๋ชจ์์ ์ค ์ํ๋ ์์์ ์์ฑํด์ผํ๋ ํ๋กํผํฐ๋ก ์๊ณ ์์๋ค. ํ์ง๋งrelative
๋ง์ ํน์ง์ด ์์๊ณ ๊ทธ ์ฐ์์๊ฐabsolute
์ ๊ต์ฅํ ๋น์ทํ๋ค๋ ๊ฒ์ ์์๋ค. ๋จ์ง ๋ฐ๋ก ์์ ๋ถ๋ชจ ์์์ธ์ง ์๋์ง์ ์ฐจ์ด๋ง ์๋ค. ํ์ง๋ง ์ง๊ธ๊น์ง ๋จ๋ ์ผ๋กrelative
๋ฅผ ์ฌ์ฉํ์ง ์์๋ ๊ฒ์ ์๊ฐํ๋ฉด ํด๋น ํ๋กํผํฐ ๋์ ํ์ฌpadding
์ ์ฌ์ฉํ ์ ์์ด์ ๊ทธ๋ฐ ๊ฒ์ด์ง ์์๊น ์ถ๋ค. ๊ทธ๋ฆฌ๊ณ ์ง๊ธ๊น์ง ์ปจํ ์ธ ๋ด์ scroll๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์๋absolute
๋ฅผ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉํ๋๋ฐ ๊ตณ์ด ๊ทธ๋ฌ์ง ์๊ณrelative
๋ฅผ ์ฌ์ฉํด๋ ๋ ๋ฏ ํ๋ค~
์ฐธ๊ณ
poiemaweb 2-8 ์์์ ์์น ์ ์ ๋์ - HTML + CSS + ์๋ฐ์คํฌ๋ฆฝํธ ์น ํ์ค์ ์ ์
๐ 2022-07-20
Last updated