position ์์ฑ์ ํ๊ทธ์ ์์น๋ฅผ ๊ฒฐ์ ํ๋ค. ๋ชจ๋ ํ๊ทธ๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก position:static ์ํ์ด๋ฉฐ, ์ผ์ชฝ->์ค๋ฅธ์ชฝ/์->์๋ ์์ผ๋ก ์์ธ๋ค.
relative๋ ํ๊ทธ์ ์์น๋ฅผ ์กฐ๊ธ ๋ณ๊ฒฝํ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ฉด ๋๋ค. ์์น๋ฅผ ์ด๋์์ผ์ฃผ๋ top, right, bottom, left ํ๋กํผํฐ๋ก ์ด๋์ ์ํค๋ฉฐ, ์ด๋ static ์ํ๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ค.
top, right, bottom, left ๋ position์ด๋ผ๋ ํ๋กํผํฐ๊ฐ ์์ ๋๋ง ์ ์ฉ๋๋ ํ๋กํผํฐ๋ค. ํ๊ทธ ๋ฐ๊นฅ์ชฝ์ผ๋ก ์ด๋ํ๊ณ ์ถ์ผ๋ฉด ์์๊ฐ์ ์ฃผ๋ฉด ๋๋ค.
position: absolute; ๋ static ์์ฑ์ ๊ฐ์ง์ง ์์ ๋ถ๋ชจ๋ฅผ ๊ธฐ์ค์ผ๋ก ์ ๋์ ์ผ๋ก ์์ง์ธ๋ค. ๋ง์ฝ ๋ถ๋ชจ ์ค static์ด ์๋ ํ๊ทธ๊ฐ ์๋ค๋ฉด ๊ฐ์ฅ ์์ ํ๊ทธ์ธ body๊ฐ ๊ธฐ์ค์ด ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก absolute๋ฅผ ์ธ ๊ฒฝ์ฐ, ๊ธฐ์ค์ด ๋ ๋ถ๋ชจ์๊ฒ position: relative; ๋ฅผ ๋ถ์ฌํ๋ฉด ๋๋ค.
fixed๋ ๋ง๊ทธ๋๋ก ๊ณ ์ ๋๋ค๋ ๋ปdlek. absolute๋ relative๋ฅผ ๊ฐ์ง ๋ถ๋ชจ๊ฐ ํ์ํ์ง๋ง fixed๋ ํ์์๋ค.
[์ฐธ๊ณ ]https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
<header>, <footer>, <p>, <li>, <table>, <div>, <h1>
๋ฑ๊ณผ ๊ฐ์ด ๋๋ถ๋ถ์ ์์๋ block ์์๋ค. block ์์ ์์ ๋ค๋ฅธ ์์๋ฅผ ๋ถ์ฌ๋ฃ์ ์ ์๋ค. width, height, margin, padding ์์ฑ์ด ๋ชจ๋ ๋ฐ์๋๋ค.
inline ์์๋ ์ค๋ฐ๊ฟ ์์ด ํ ์ค์ ๋ค๋ฅธ ์์๋ค๊ณผ ๋๋ํ ๋ฐฐ์น๋๋ค. <span>, <a>, <img>
ํ๊ทธ ๋ฑ์ด inline ์์์ ์ํ๋ค. ํด๋น ํ๊ทธ ์ปจํ
์ธ ํฌ๊ธฐ ๋งํผ๋ง ๊ณต๊ฐ์ ์ฐจ์งํ๋๋ก ๋์ด ์์ผ๋ฉฐ, margin๊ณผ padding ์์ฑ์ ์ข ๊ฐ๊ฒฉ๋ง ๋ฐ์์ด ๋์ด ์๋ค.
display:inline-block์ ์ง์ ํ๋ฉด ์์๋ inline ์์์ฒ๋ผ ๋๋ํ ๋ฐฐ์น๋๋ค. ํ์ง๋ง inline์์ ๋ถ๊ฐ๋ฅํ๋ width, height, margin/padding์ ์ํ ๊ฐ๊ฒฉ ๋ชจ๋ ์ง์ ์ด ๊ฐ๋ฅํด์ง๋ค. ๋ํ์ ์ธ ์์๋ก <button>, <input>, <select>
๋ฑ์ด ์๋ค. inline-block ์์๋ display:inline-block์ ๋ช
์์ ์ผ๋ก ์ง์ ํด์ฃผ์ด์ผ ํ๋ค.
[์ฐธ๊ณ ] https://www.daleseo.com/css-display-inline-block/
float ์์ฑ์ ํน์ ์์๋ฅผ ๋ ์๊ฒ/ํ๋ฅด๋๋ก ๋ง๋ ๋ค. float ์์ฑ์ ์ฌ์ฉํด ๋ฐ์ค๋ฅผ ์ผ์ชฝ ๋๋ ์ค๋ฅธ์ชฝ์ ๋ ์๊ฒ ๋ง๋ค ์ ์๋ค. ์ฆ, ๊ธฐ๋ณธ์ ์ธ ๋ฌธ์ ๋ฐฐ์น์ ํ๋ฆ์์ ๋ฒ์ด๋ ์์๊ฐ ํ์ด์ง์ ์ผ์ชฝ์ด๋ ์ค๋ฅธ์ชฝ์ผ๋ก ์ด๋ํ๊ฒ ํ๋ค. ์ค์ ๊ฐ๋ฅํ ๊ฐ์ left, none, right์ด๋ค.
- float ์์ฑ์ ์ฌ์ฉํ ์์๋ position ์์ฑ์ absolute ๊ฐ๊ณผ ์๋ฆฝํ ์ ์๋ค.
- float ์ ์ฉ๋ ์์๋ ๊ทธ ์์์ ์ข ๋ฅ์ ์๊ด ์์ด ์์ ์ ์์ญ๋ง์ ๊ฐ์ง๊ณ ์๋ ์ธ๋ผ์ธ ๋ธ๋ญ ๋ฐ์ค์ฒ๋ผ ๋ ๋๋ง์ด ๋๋ค. ์ฆ, display:inline-block์ ์ ์ธํ ๊ฒ๊ณผ ๋์ผํด์ง๊ธฐ ๋๋ฌธ์ ๋ค์ ์ ์ธํ ํ์๋ ์๋ค.
floatํ ์์๊ฐ ๋ ์ด์์์ ๋ฌด๋๋จ๋ฆฌ๋ ํ์์ ๊ฒช์ผ๋ฉด ์๋ ๋ธ๋ก๊ทธ๋ฅผ ์ฐธ์กฐํด์ ํ๋กํ ์ ํด์ ํ์. ๋ฐฉ๋ฒ์ ๊ณ์ ์ ๋ฐ์ดํธ ๋๋ ์ค!