- ๊ด๋ฆฌ์ ๋ก๊ทธ์ธ
- ์ผ์ชฝ ๋ฉ๋ด์์
ํ์ด์ง > ๋ชจ๋ ํ์ด์ง
ํด๋ฆญ - ๋ชฉ๋ก์์ ์์ ํ์ด์ง ์ฐพ๊ธฐ
- ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด
ํธ์ง
๋ฒํผ์ด ๋ณด์ โ ํด๋ฆญ - ์ค๋ฅธ์ชฝ์์ ์ ๋ชฉ(์์ ํ์ด์ง) ๋ถ๋ถ์ ์ํ๋ ์ด๋ฆ์ผ๋ก ๋ณ๊ฒฝ
(์: โ์๊ฐโ, โํ์ฌ์ ๋ณดโ ๋ฑ) - ์ค๋ฅธ์ชฝ ์๋จ ์ ๋ฐ์ดํธ ๋ฒํผ ํด๋ฆญ

๐น ๊ธฐ๋ณธ ํ ๋ง (Twenty-Four)์์ ํ์ด์ง ๋ฐฐ๊ฒฝ์ ๋ณ๊ฒฝ ๋ฐฉ๋ฒ
1. ์ฌ์ดํธ ์ ์ฒด ๋ฐฐ๊ฒฝ์ ๋ณ๊ฒฝ (๋ชจ๋ ํ์ด์ง์ ์ ์ฉ)
- ์๋ํ๋ ์ค ๊ด๋ฆฌ์ ๋ก๊ทธ์ธ
- ์ผ์ชฝ ๋ฉ๋ด โ ์ธ๋ชจ โ ํธ์ง๊ธฐ(๋๋ ์ฌ์ฉ์ ์ ์ํ๊ธฐ)
์คํ์ผ
โ์์
โ๋ฐฐ๊ฒฝ
์์ ์์ ์ ํ- ์ ์ฅ โ ์ ์ฒด ์ฌ์ดํธ ๋ฐฐ๊ฒฝ์ด ๋ฐ๋
2. ํน์ ํ์ด์ง(์: โ์์ ํ์ด์งโ) ๋ฐฐ๊ฒฝ๋ง ๋ฐ๊พธ๊ณ ์ถ์ ๋
- ๊ด๋ฆฌ์์์ โ ํ์ด์ง > ๋ชจ๋ ํ์ด์ง
- ์์ ํ์ด์ง ํธ์ง ํด๋ฆญ
- ๋ธ๋ก ํธ์ง๊ธฐ(๊ตฌํ
๋ฒ ๋ฅดํฌ) ํ๋ฉด์ด ๋์ค๋ฉด
- ์ค๋ฅธ์ชฝ ์ฌ์ด๋๋ฐ์์ โ
๋ธ๋ก
์ด ์๋๋ผ ํ์ด์ง(๋ฌธ์) ํญ ์ ํ - ์๋์ชฝ์ ์คํ์ผ(์์) ํญ๋ชฉ์ด ์๋ ๊ฒฝ์ฐ,
๋ฐฐ๊ฒฝ์
์ง์
- ์ค๋ฅธ์ชฝ ์ฌ์ด๋๋ฐ์์ โ
- ์ ์ฅ
3. ์ถ๊ฐ CSS๋ก ํน์ ํ์ด์ง์๋ง ๋ฐฐ๊ฒฝ ์ ์ฉ
์์ ํ์ด์ง๋ ๊ธฐ๋ณธ์ ์ผ๋ก page-id-2
๊ฐ์ ๊ณ ์ ID๋ฅผ ๊ฐ์ง๋๋ค.
ํ์คํ ํ๋ ค๋ฉด โ ์์ ํ์ด์ง๋ฅผ ์ด๊ณ ๋ธ๋ผ์ฐ์ ์์ ์ฐํด๋ฆญ โ ํ์ด์ง ์์ค ๋ณด๊ธฐ โ <body class=”page-id-XX”> ํ์ธ
์: ์์ ํ์ด์ง๊ฐ page-id-2
๋ผ๋ฉด์ธ๋ชจ โ ์ฌ์ฉ์ ์ ์ํ๊ธฐ โ ์ถ๊ฐ CSS
์์ ์๋ ์ฝ๋ ์ถ๊ฐ:
/* ์์ ํ์ด์ง ๋ฐฐ๊ฒฝ์ ๋ณ๊ฒฝ */
.page-id-2 {
background-color: #f0f0f0 !important;
}
โ ์ ๋ฆฌํ๋ฉด:
- ์ฌ์ดํธ ์ ์ฒด ๋ฐฐ๊ฒฝ์ ๋ฐ๊พธ๋ ค๋ฉด โ ์ธ๋ชจ โ ํธ์ง๊ธฐ(์คํ์ผ ์ค์ )
- ํน์ ํ์ด์ง๋ง ๋ฐ๊พธ๋ ค๋ฉด โ ํ์ด์ง ํธ์ง ํ๋ฉด์์ ์์ ์ต์ ๋๋ ์ถ๊ฐ CSS