2์ผ์ฐจ๋ ๋ฆฌ์คํธ HTML, ์๋งจํฑํ๊ทธ, CSS์ box-model ๋ฑ์ ๋ด์ฉ์ ๋ค๋ฃจ์๋ค.
์ฒ์ CSS ๋ฐฐ์ ์๋, ํญ์ ํท๊ฐ๋ฆฌ๋ box๋ชจ๋ธ ๋ฐฐ์น ๋ฑ์ ์ค์ ์ผ๋ก ๋ค์ ํ๋ฒ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค.
CSS(Cascading Style Sheets)?
์ข ์์คํ์ผ์ํธ๋ ๋ ๊ฐ ์ด์์ css๊ท์น์ด ๋์ผํ ์์์ ์ ์ฉ๋ ์ ์๊ธฐ ๋๋ฌธ์ "์ข ์"์ด๋ผ๋ ๋จ์ด๋ ์คํ์ผ ๊ท์น์ด ์ด๋ป๊ฒ ์ ์ฉ๋๋์ง๋ฅผ ๋ํ๋ด๋ฉฐ, ์คํ์ผ ๊ท์น์ด ๋ค์ํ ์์ธ์ ๋ฐ๋ผ ์ฐ์ ์์๋ฅผ ๊ฐ๋๋ค๋ ๊ฐ๋ ์ ๋ํ๋ ๋๋ค. ์ฌ๋ฌ ์คํ์ผ ๊ท์น์ด ํ๋์ ์์์ ์ ์ฉ๋ ๋, ์ด๋ค ๊ท์น์ด ์ฐ์ ์์๋ฅผ ๊ฐ์ง๋์ง๋ฅผ ๊ฒฐ์ ํ๋ ๋ฐฉ์์ ๋ํ๋ ๋๋ค.
CSS์์ ์ด 3๊ฐ์ง ํน์ง์ผ๋ก ์คํ์ผ๋ง์ด ๊ฒฐ์ ๋๋ค.
Inheritance : ์ปจํ ์ด๋์ ํน์ ์์ฑ์ด ํ์ ํญ๋ชฉ์ ์ ์ฉ๋๋ค. ํ์ง๋ง ๋ชจ๋ ํ์์์๊ฐ ์์์ ๋ฐ๋๊ฒ์ ์๋๋ค. (๋๋น๊ฐ์ ์์๋ ์์๋์ง ์๋๋ค)
Cascading Style Sheets: ํ๋์ ์์์ ์ฌ๋ฌ ๊ท์น์ ์ ์ฉํ ์ ์๋ค. ๊ณ๋จ์ ์์ ๋ก์ง์ ๊ฐ๊ธฐ ์์์ ์ด ๋ค๋ฅธ ์ฌ๋ฌ ๊ท์น์ ํ๋์ ์์์ ์ ์ฉํ ์ ์๋ค. ํ๋์ ๊ท์น์ด ์ฌ๋ฌ๊ฐ์ผ๋๋, ๊ฐ์ฅ ์ต๊ทผ์ ๊ท์น์ด ์ฐ์ธ์ ์ผ๋ก ์ ์ฉ๋๋ค.
Specificity : ์ฐ์ ์์๋ ๋์ฑ ๊ตฌ์ฒด์ ์ธ ์ ํ์์ ์ ์ฉ๋ ๊ท์น์ด ์ฐ์ธํ๋ค.
CSS์ฑ์ง์ ์ํด aํ๊ทธ์ color๋ ๋ธ๋ผ์ฐ์ ์์ ๋งํฌ์ ์ ์ฉํ๋ ๊ธฐ๋ณธ์์์ด ์ด๋ฏธ ์ ์๋์ด์๊ธฐ ๋๋ฌธ์ ์์ body์ color๊ฐ ์ ์ฉ๋์ง ์๋๋ค.
CSS ์ ํ์
์์ฑ ์ ํ๊ธฐ: [src] { ... }
โ ์๋ฅผ ๋ค์ด ์ด HTML ์์๋ฅผ ์ ํํ๋ฉด: <img src="...">
โ ์ด ์ ํ์๋ ์ด HTML ์์ฑ์ด ์๋ ๋ชจ๋ ์์๋ฅผ ์ ํํฉ๋๋ค.
๋ฒ์ฉ ์ ํ๊ธฐ : * { ... }
โ ์๋ฅผ ๋ค์ด ์ด HTML ์์๋ฅผ ์ ํํ๋ฉด: <p>....</p><img ...>
โ ์ด ์ ํ์๋ ๋ชจ๋ HTML ์์๋ฅผ ์ ํํฉ๋๋ค(์์์ ํตํ์ง ์๊ณ ๋ชจ๋ HTML ์์๋ฅผ ๊ฐ๋ณ์ ์ผ๋ก ๋์์ผ๋ก ์ง์ ํ๋ ๊ฒ์ฒ๋ผ ์ง์ ๊ฐ๋ฅ).
๊ฒฐํฉ ์ ํ์
โ CSS: p.some-class { ... }
โ ์๋ฅผ ๋ค์ด ์ด HTML ์์๋ฅผ ์ ํํ๋ฉด: <p class="some-class">...</p>
์์ฌ ์ ํ์
โ CSS: a:hover { ... }
โ ์๋ฅผ ๋ค์ด ์ด HTML ์์๋ฅผ ์ ํํ๋ฉด: <a>...</a>(์ฌ์ฉ์๊ฐ ํด๋น ์์ ์๋ก ๋ง์ฐ์ค๋ฅผ ๊ฐ์ ธ๊ฐ ๋)
โ ์ด ์ ํ๊ธฐ๋ ์ด "์์ฌ ์ํ"๋ฅผ ์ถฉ์กฑํ๋ ๋ชจ๋ ์์๋ฅผ ์ ํํฉ๋๋ค(์ฆ, ์ด ์์์ ๊ฐ๋ฆฌํค๊ณ ์๋ ๋ชจ๋ ๋งํฌ).
<ul>, <ol> ๋ฆฌ์คํธ ํ๊ทธ
์์๊ฐ ์๋ ๋ฆฌ์คํธ ol, ์์๊ฐ ์๋ ul ํ๊ทธ๋ค์ ์ฒ์ CSS๋ฅผ ๋ฐฐ์ธ๋, ํผ๋์ ๋ง์ด ์ฃผ์๋ ํ๊ทธ์ด์๋ค.
์๋ํ๋ฉด?! ์ด๋ ๊ฒ ๊ธฐ๋ณธ์ ์ธ css ๋ฐ์ค๋ชจ๋ธ ์ ์๋์ด์๋ค.
padding, margin์ด ์ด๋ฏธ ์ ์๋์ด์๊ธฐ ๋๋ฌธ์, ํท๊ฐ๋ฆด๋๊ฐ ๋ง์๋ค.๐ต๐ซ
๐<ul>, <ol>์ ๊ฐ์ด๋ฐ ์ ๋ ฌ
text-align์ผ๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ์๋ํด๋ณด๋ฉด, ์ ์ฉ๋์ง ์๋๋ค.
text-align์ ์ ์ฉํ๋๊ฒ์ด ์์๊ฐ ์๋๋ผ ํด๋น ์์ ์์ ์ฝํ ์ธ ๋ฅผ ์ ๋ ฌํ๋ค.
๊ทธ๋์ <img>๋ text-align๋ฅผ ์ ์ฉํ๋ฉด, imgํ๊ทธ๋ ์์ฑ์ผ๋ก๋ง ์ด๋ฃจ์ด์ง ํ๊ทธ์ด๋ฏ๋ก, ์ฝํ ์ธ ๊ฐ ์์ผ๋ฏ๋ก ์ ๋ ฌ์ด ๋์ง ์๋๋ค.
<img>์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ๋ค์์ ๋ ์์ธํ ๋ค๋ค๋ณผ ๊ฒ์ด๋ค.
Text-align
body์ text-align:center๋ฅผ ์ ๋ ฅํ๋ค๋ฉด, ์ด๋ฏธ์ง๊ฐ ํ ์คํธ(body์์ ์๋ ์ฝํ ์ธ )์ด๊ธฐ ๋๋ฌธ์ , ์ํฅ์ ๋ฐ๋๋ค๊ณ ๊ฐ์ฃผํ๋ฏ๋ก ์ค์๋ฐฐ์น๊ฐ ๊ฐ๋ฅํ๋ค!
๋ฐ๋ผ์, ๋ถ๋ชจ ์์์ text-align: center;๋ฅผ ์ ๋ ฅํ๋ค๋ฉด? ํ์์์๋ค์ด ์์์ ๋ฐ๊ธฐ๋๋ฌธ์ ๋ ๊ฐ๊ฒฐํ ์ฝ๋๋ฅผ ์์ฑํ ์์๋ค!
๊ทธ๋์ ๋ธ๋ก๋ ๋ฒจ์ ์กด์ฌํ๋ค๋ฉด, text-align์ ์ฌ์ฉํ์ฌ ๊ฐ์ด๋ฐ ์ ๋ ฌ๋ ๊ฐ๋ฅํ๋ค.
์, ๊ทธ๋ผ ๋ณธ๋ก ์ผ๋ก ๋์๊ฐ์ ๊ทธ๋ ๋ค๋ฉด <ul>,<ol>์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์?
ul {
text-align: center;
}
text-align:center๋ฅผ ์ฌ์ฉํ๋ฉด, ๋ฆฌ์คํธ๋ ๊ทธ๋๋ก์๊ณ , ์ฝํ ์ธ ๋ง ๊ฐ์ด๋ฐ ๋ฐฐ์น๊ฐ ๋๋ค.
๋ชฉ๋ก์์ฒด๋ฅผ ๊ฐ์ด๋ฐ ๋ฐฐ์นํ๊ณ ์ถ๋ค๋ฉด,
1. ๋๋น๋ฅผ ์ ์ํ๋ค.
2. ์ข์ฐ์ margin auto ์์ฑ์ ์ฌ์ฉํ๋ค.
ul/ol ํ๊ทธ์ ๊ธฐ๋ณธ ๊ฐ๋ก ํฌ๊ธฐ๋ 100%๋ผ์ width ๊ฐ์ ์ ํด์ค์ผ๋ก์จ ๋ชฉ๋ก ์์ฒด๊ฐ ๊ฐ์ด๋ฐ ์ ๋ ฌ๋ก ๋ง๋ค ์ ์๋ค
ul {
width: 300px;
margin-left: auto;
margin-right: auto;
}
inline ์์
inline์์๋ height๊ฐ์ ๊ฐ์ง์ง ์๊ธฐ ๋๋ฌธ์, layout ๋ฐฐ์น์ ์ฌ๋ฐฑ์ด ์์์ ํฌ๊ธฐ๋ก ์ ์ฉ๋์ง ๋ชปํ๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ธ๋ผ์ธ ์์๋ ๋๋น์ ๋์ด๋ฅผ ์ง์ ์ง์ ํ ์ ์์ผ๋ฉฐ, ๋ด์ฉ์ ํฌ๊ธฐ์ ๋ง๊ฒ ์๋์ผ๋ก ์กฐ์ ๋๋ค.
1.Margin๊ณผ Padding์ ์์ง ๋ฐฉํฅ ์ ์ฉ ๋ถ๊ฐ
2.๋๋น์ ๋์ด์ ์ํฅ์ด ์๋ค.
์ด๋ฌํ ์ ์ ํด๊ฒฐํ๊ธฐ ์ํด์ , inline-block
inline ์์์ฒ๋ผ ๊ฐ๋ก๋ก ๋ฐฐ์ด๋ ๋ฟ, block์ ํน์ฑ์ ์ง๋๊ณ ์๊ธฐ ๋๋ฌธ์ height๋ฅผ ๊ฐ์ง๋ค.
๋ฐ๋ผ์ block๊ณผ ๊ฒน์น์ง ์๋ ๋ชจ์ต์ ๋ณผ ์ ์๋ค!
Margin ์์: margin collapsing
์ฌ๋ฐฑ ๊ฒน์นจ์ ์์ง ์ฌ๋ฐฑ์์๋ง ๋ฐ์ํ๊ณ , ๋ธ๋ก ์์์์๋ง ๋ฐ์ํ๋ค.
์ธ๋ผ์ธ ์์์๋ ์์ง ์ฌ๋ฐฑ ์ ์ฉ์ด ์ ์ด์ ๋ถ๊ฐ๋ฅํ๊ธฐ๋๋ฌธ์ด๋ค.
์์์ ์์ ์ฌ์ด์ margin-top ๋๋ margin-bottom์ด ๊ฒน์น ๊ฒฝ์ฐ ๋ ๋์ ๊ฐ์ margin ๊ฐ์ด ์ ์ฉ๋๋ ํ์์ผ๋ก ๋ถ๋ชจ์์์ ์์์์ ์ฌ์ด์์๋ ๋ฐ์ํฉ๋๋ค.
์ ๋ฐ์ํ๋? CSS๊ฐ ์์ ์ ์ธ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด์ ์์๋๊ฐ ๊ฒน์ณ์ง๋ ๋ถ๋ถ์ ์์์ ๊ฐ์ฅ ๋์ ๊ฐ์ผ๋ก ์ฒ๋ฆฌํด๋ฒ๋ ค์ ๊ทธ๋ ์ต๋๋ค.
์ด์ ๋ํ ํด๊ฒฐ๋ฐฉ๋ฒ์ผ๋ก๋,
1. ๋ถ๋ชจ ์์์ overflow: hidden์ ์ฃผ๋ฉด ์์ ์์๊ฐ ๋ถ๋ชจ ์์ ๋ฒ์ ๋ฐ์ผ๋ก ๋๊ฐ์ง ๋ชปํ๊ฒ ๋ฉ๋๋ค. ๋ถ๋ชจ์ ๋ฐ์ผ๋ก ๋๊ฐ์ง ๋ชปํ ์์์์๋ ๋ถ๋ชจ ์์ ์์์๋ง ์๊ฒ ๋ฉ๋๋ค.
2. ๋ถ๋ชจ ์์์ display: inline-block์ ์ง์ ํ์ฌ, ์ธ๋ผ์ธ๊ณผ ๋ธ๋ญ ๋๊ฐ์ง ํน์ง์ ๊ฐ์ง๊ฒ ๋๋ฉด์ ์์ ์์์ ๋ง์ง๊ฐ์ ์ด๋ฆด ์ ์๊ฒ ๋ฉ๋๋ค.
3. ๋ถ๋ชจ์์์ padding ๊ฐ์ ์ฃผ์ด์ ๋ฏธ๋ฆฌ ๊ทธ๋งํผ์ ๊ฐ๊ฒฉ์ ๋์ด ๋๋ ๊ฒ์ ๋๋ค. ์์์์์ margin์ด ๋ฟ์ผ๋ฉด ๋ง์ง๊ฒน์นจํ์์ด ์ผ์ด๋์ง ์์ ๊ฐ๊ฒฉ์ด 2๋ฐฐ๊ฐ ๋๋ฏ๋ก ์ด๋๋ ์์์ ์์๋ margin ๊ฐ์ 0์ผ๋ก ๋์ด์ผํ๋ค.
๐<img> ์ํ ๊ฐ์ด๋ฐ ์ ๋ ฌ
- text-align ์์ฑ
ํ์ง๋ง ์ด ๋ฐฉ๋ฒ์ ์ด๋ฏธ์ง๊ฐ <div>์ ๊ฐ์ ๋ธ๋ก ๋ ๋ฒจ ์ปจํ ์ด๋ ์์ ์์ ๋๋ง ์๋ํฉ๋๋ค: - margin: auto
์์ฑ์ ์ธ๋ผ์ธ ์์์ ์๋ฌด ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค. ๋ฐ๋ผ์ ์ธ๋ผ์ธ ์์์ธ ํ๊ทธ์ ๊ฒฝ์ฐ ๋จผ์ ์ด๋ฅผ ๋ธ๋ก์ผ๋ก ๋จผ์ ๋ฐ๊ฟ์ฃผ์ด์ผ ํฉ๋๋ค.
img {
margin: auto;
display: block;
}
3. display: flex
์ปจํ ์ด๋ ์์์ text-align ์์ฑ์ ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ ์ปจํ ์ด๋์ display: flex๋ฅผ ๋๊ฐ์ด ์ฌ์ฉํด ์ค ์ ์์ต๋๋ค.
ํ์ง๋ง display: flex๋ง์ผ๋ก๋ ๋ถ์กฑํฉ๋๋ค. ์ปจํ ์ด๋ ์์์ ์ํ์ ๋ ฌ justify-content๋ผ ๋ถ๋ฆฌ๋ ์ถ๊ฐ์ ์ธ ์์ฑ์ ๊ฐ์ ธ์ผ ํฉ๋๋ค.
div {
display: flex;
justify-content: center;
}
img {
width: 60%;
}
๊ทธ๋์ ๋ณดํต, img๋ div๊ฐ์ ํ๊ทธ๋ก ๊ฐ์ธ์ ์ฌ์ฉํ๋ค!
์ค๋์ ํญ์ ํท๊ฐ๋ฆฌ๋ CSS ๋ฐ์ค๋ชจ๋ธ์ ๋ํ ํ์ต์ผ๋ก, ์ด์ ๋ํ ์ ๋ฆฌ๋ฅผ ์งํํ์์ต๋๋ค.
์ด์ ๋์ด์ ํผ๋ํ์ง ์๊ธธ ๋ฐ๋ผ๋ฉฐ!!
์๊ฐ์ด ๋๋ฌด๋ ๋น ๋ฅด๊ฒ ์ง๋๊ฐ๋๋ค. ๋ด์ผ๋ ํ์ดํ :)