๐Ÿ’ป Programming/HTML, CSS

[CSS] html, :root, * ์„ ํƒ์ž

2024. 1. 10. 17:17
๋ชฉ์ฐจ
  1. 1. html
  2. 2. :root ๊ฐ€์ƒ ์„ ํƒ์ž
  3. html๊ณผ :root์˜ ์ฐจ์ด
  4. 3. * ์„ ํƒ์ž

 

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. 1. html
  2. 2. :root ๊ฐ€์ƒ ์„ ํƒ์ž
  3. html๊ณผ :root์˜ ์ฐจ์ด
  4. 3. * ์„ ํƒ์ž
'๐Ÿ’ป Programming/HTML, CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [CSS] ๋ณ€ํ™˜๊ณผ ์ „ํ™˜ (Transformations & Transitions)
  • [CSS] em, rem, %
  • [HTML] ์›น ๋ฌธ์„œ์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ: header, main, footer
  • [CSS] BEM (Block-Element-Modifier)
Jiwon()
Jiwon()
Jiwon()
jiwondev.log
Jiwon()
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ์ „์ฒด๋ณด๊ธฐ (86)
    • โœ๏ธ What I Learned (52)
      • TIL (41)
      • ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ… (8)
    • ๐Ÿ’ป Programming (31)
      • Algorithm (12)
      • React (1)
      • JS, TS (7)
      • HTML, CSS (7)
      • ๊ธฐํƒ€ (4)
    • ๐Ÿ–Š๏ธ ์ผ๊ธฐ (3)
      • ์ผ์ƒ๊ธฐ๋ก (2)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • ํด๋ฆฐ์ฝ”๋“œ
  • css
  • javascript
  • ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ…
  • ChatGPT
  • SSR
  • Redux
  • recoil
  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
  • TypeScript
  • ํ”„๋ก ํŠธ์—”๋“œ
  • reduxtoolkit
  • React-Hook-Form
  • ๋‚ด์ผ๋ฐฐ์›€์บ ํ”„
  • ์›น๊ฐœ๋ฐœ
  • React
  • Firebase
  • transition
  • tailwindcss
  • HTML
  • nextjs
  • ๋ฆฌ์•กํŠธ
  • Prisma
  • slice
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • ์ฝ”๋”ฉ
  • Next.js
  • Til

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
Jiwon()
[CSS] html, :root, * ์„ ํƒ์ž
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.