1. html
ํ๋ css ๊ท์น์ html์ ์ ์ฉ๋๊ณ html ์์ ํฌํจ๋ ์์๋ค์๋ ์์๋๋ค.
์๋์ css ๋ณ์ ์์ ์์ ์ฌ์ฉํ๋ ๋ ผ๋ฆฌ
html {
--color-grey-100: rgb(236, 236, 236);
--color-grey-400: rgb(134, 134, 134);
--color-grey-600: rgb(58, 58, 58);
--color-grey-900: rgb(41, 41, 41);
--color-primary-300: rgb(167, 226, 255);
--color-primary-700: rgb(0, 170, 255);
--size-1: 18px;
--size-5: 50px;
background-color: var(--color-grey-100);
}
2. :root ๊ฐ์ ์ ํ์
๋ฌธ์์ ์ต์์ ์์๋ฅผ ์ ํํ๋ค. ์ด ๊ฒฝ์ฐ css ๊ท์น์ ์ต์์ ์์์ ์ ์ฉ๋์ด์ ์ต์์ ์์ ์์ ํฌํจ๋ ์์์ ์์๋๋ค.
html๊ณผ :root์ ์ฐจ์ด
- html ๊ด๋ จ ํ๋ก์ ํธ์ธ ์น ํ ์ด๋ธ ๋ฑ์์๋ ๋ ์ ํ์๊ฐ ํ๋ ์ผ์ด ๊ฑฐ์ ๋๊ฐ์ง๋ง, css๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ค๋ฅธ ์์ญ๋ค์ด ์๋ค.(ex. xml) ์ด๋ฌํ ๋ค๋ฅธ ์์ญ์์๋ html ์์๊ฐ ์ต์์ ์์๊ฐ ์๋๋ผ๋ ์ ์์ ์ฐจ์ด๊ฐ ์๋ค.
- css์ ํน์์ฑ์ ๊ฐ๋ ์์ ๋ณด๋ฉด :root ์ ํ์๊ฐ html ์ ํ์๋ณด๋ค ๋ ๋๊ธฐ ๋๋ฌธ์ :root ์ ํ์๊ฐ html ์ ํ์๋ฅผ ๋ฎ์ด์ด๋ค. ์ฐธ๊ณ ๋ธ๋ก๊ทธ
3. * ์ ํ์
* ์ ํ์๋ ๋จ์ํ๊ฒ html ๋ฌธ์์ ๋ชจ๋ ์์๋ฅผ ์ ํํ๋ค. ์ด๋ css ๊ท์น์ ๋ชจ๋ ์์์ ๋ฐ๋ก ์ ์ฉํด๋ฒ๋ฆฐ๋ค๋ ์๋ฏธ์ด๋ค.
html๊ณผ :root ์ ํ์๋ css ๊ท์น์ด ํฌํจ๋ ์์๋ก ์์๋๋ ๊ฒ์ด๊ณ , * ์ ํ์๋ ๊ท์น์ html ๋ฌธ์์ ๋ชจ๋ ์์์ ๋ฐ๋ก ์ถ๊ฐํ์ฌ ์ ์ฉํ๋ค๋ ์ ์์ ์ฐจ์ด๊ฐ ์๋ค.
'๐ป Programming > HTML, CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[CSS] ๋ณํ๊ณผ ์ ํ (Transformations & Transitions) (0) | 2024.01.10 |
---|---|
[CSS] em, rem, % (0) | 2024.01.09 |
[HTML] ์น ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ: header, main, footer (0) | 2023.05.19 |
[CSS] BEM (Block-Element-Modifier) (0) | 2023.02.25 |
[CSS] CSS, ๊ทธ๋ฆฌ๊ณ ์คํ์ผ ์ํธ (0) | 2023.02.20 |
1. html
ํ๋ css ๊ท์น์ html์ ์ ์ฉ๋๊ณ html ์์ ํฌํจ๋ ์์๋ค์๋ ์์๋๋ค.
์๋์ css ๋ณ์ ์์ ์์ ์ฌ์ฉํ๋ ๋ ผ๋ฆฌ
html {
--color-grey-100: rgb(236, 236, 236);
--color-grey-400: rgb(134, 134, 134);
--color-grey-600: rgb(58, 58, 58);
--color-grey-900: rgb(41, 41, 41);
--color-primary-300: rgb(167, 226, 255);
--color-primary-700: rgb(0, 170, 255);
--size-1: 18px;
--size-5: 50px;
background-color: var(--color-grey-100);
}
2. :root ๊ฐ์ ์ ํ์
๋ฌธ์์ ์ต์์ ์์๋ฅผ ์ ํํ๋ค. ์ด ๊ฒฝ์ฐ css ๊ท์น์ ์ต์์ ์์์ ์ ์ฉ๋์ด์ ์ต์์ ์์ ์์ ํฌํจ๋ ์์์ ์์๋๋ค.
html๊ณผ :root์ ์ฐจ์ด
- html ๊ด๋ จ ํ๋ก์ ํธ์ธ ์น ํ ์ด๋ธ ๋ฑ์์๋ ๋ ์ ํ์๊ฐ ํ๋ ์ผ์ด ๊ฑฐ์ ๋๊ฐ์ง๋ง, css๋ฅผ ์ฌ์ฉํ ์ ์๋ ๋ค๋ฅธ ์์ญ๋ค์ด ์๋ค.(ex. xml) ์ด๋ฌํ ๋ค๋ฅธ ์์ญ์์๋ html ์์๊ฐ ์ต์์ ์์๊ฐ ์๋๋ผ๋ ์ ์์ ์ฐจ์ด๊ฐ ์๋ค.
- css์ ํน์์ฑ์ ๊ฐ๋ ์์ ๋ณด๋ฉด :root ์ ํ์๊ฐ html ์ ํ์๋ณด๋ค ๋ ๋๊ธฐ ๋๋ฌธ์ :root ์ ํ์๊ฐ html ์ ํ์๋ฅผ ๋ฎ์ด์ด๋ค. ์ฐธ๊ณ ๋ธ๋ก๊ทธ
3. * ์ ํ์
* ์ ํ์๋ ๋จ์ํ๊ฒ html ๋ฌธ์์ ๋ชจ๋ ์์๋ฅผ ์ ํํ๋ค. ์ด๋ css ๊ท์น์ ๋ชจ๋ ์์์ ๋ฐ๋ก ์ ์ฉํด๋ฒ๋ฆฐ๋ค๋ ์๋ฏธ์ด๋ค.
html๊ณผ :root ์ ํ์๋ css ๊ท์น์ด ํฌํจ๋ ์์๋ก ์์๋๋ ๊ฒ์ด๊ณ , * ์ ํ์๋ ๊ท์น์ html ๋ฌธ์์ ๋ชจ๋ ์์์ ๋ฐ๋ก ์ถ๊ฐํ์ฌ ์ ์ฉํ๋ค๋ ์ ์์ ์ฐจ์ด๊ฐ ์๋ค.
'๐ป Programming > HTML, CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[CSS] ๋ณํ๊ณผ ์ ํ (Transformations & Transitions) (0) | 2024.01.10 |
---|---|
[CSS] em, rem, % (0) | 2024.01.09 |
[HTML] ์น ๋ฌธ์์ ๊ธฐ๋ณธ ๊ตฌ์กฐ: header, main, footer (0) | 2023.05.19 |
[CSS] BEM (Block-Element-Modifier) (0) | 2023.02.25 |
[CSS] CSS, ๊ทธ๋ฆฌ๊ณ ์คํ์ผ ์ํธ (0) | 2023.02.20 |