Notice
Recent Posts
Recent Comments
Link
Β«   2026/05   Β»
일 μ›” ν™” 수 λͺ© 금 ν† 
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

η„‘μ œ

μš°μ„ μˆœμœ„(Precedence)와 상속(Inheritance) λ³Έλ¬Έ

<style>

μš°μ„ μˆœμœ„(Precedence)와 상속(Inheritance)

yo-u-loo 2026. 3. 13. 16:21

 

πŸ’‘β€Š

CCS (Cascading Style Sheets)

Cascading의 의미 '폭포수처럼 μœ„μ—μ„œ μ•„λž˜λ‘œ 흐λ₯Έλ‹€.'

즉, ν•˜λ‚˜μ˜ HTML μš”μ†Œμ— μ—¬λŸ¬ CSS κ·œμΉ™μ΄ 적용될 λ•Œ, μ–΄λ–€ μŠ€νƒ€μΌμ΄ μ΅œμ’…μ μœΌλ‘œ μ μš©λ μ§€ κ²°μ •ν•˜λŠ” κ·œμΉ™.

 


 

 

🟒 μš°μ„ μˆœμœ„ (Precedence)

μ—¬λŸ¬ CSS κ·œμΉ™μ΄ 같은 μš”μ†Œμ— 적용될 λ•Œ μ–΄λ–€ μŠ€νƒ€μΌμ΄ μš°μ„  μ μš©λ˜λŠ”μ§€λ₯Ό κ²°μ •ν•˜λŠ” κΈ°μ€€.

μ„ νƒμžμ˜ ꡬ체성에 μ˜ν•΄ κ²°μ •λ˜λ©°, μ„ νƒμžκ°€ νŠΉμ • μš”μ†Œλ₯Ό 더 ꡬ체적으둜 μ§€μ •ν• μˆ˜λ‘ μš°μ„ μ μœΌλ‘œ μ μš©λœλ‹€.

μš°μ„ μˆœμœ„ μ„ νƒμž μ’…λ₯˜ μ„€λͺ…
1 !important 무쑰건 μ΅œμš°μ„  적용 (μ‚¬μš© 자제 ꢌμž₯)
2 Inline Style HTML νƒœκ·Έ 내에 style="..."둜 직접 μž‘μ„±
3 ID μ„ νƒμž #header, #main λ“±
4 Class/가상 μ„ νƒμž .container, :hover λ“±
5 Element μ„ νƒμž div, h1, p λ“± νƒœκ·Έ 이름
6 전체 μ„ νƒμž *

 

πŸ”Žβ€Šβ€Š μ€‘μš”λ„(Importance): !importantκ°€ 적용된 μŠ€νƒ€μΌμ΄ κ°€μž₯ μš°μ„ μ μœΌλ‘œ μ μš©λœλ‹€.

πŸ”Žβ€Š μš°μ„ μˆœμœ„(Specificity): μ„ νƒμžκ°€ μ–Όλ§ˆλ‚˜ ꡬ체적인지에 따라 μš°μ„ μˆœμœ„κ°€ κ²°μ •λœλ‹€.

πŸ”Žβ€Š μ†ŒμŠ€ μˆœμ„œ(Source Order): 같은 μš°μ„ μˆœμœ„λΌλ©΄ λ‚˜μ€‘μ— μž‘μ„±λœ CSS μ½”λ“œκ°€ μ μš©λœλ‹€.

 

 

🟒 상속 (Inheritance)

λΆ€λͺ¨ μš”μ†Œμ— 적용된 CSS μŠ€νƒ€μΌμ΄ μžμ‹ μš”μ†Œμ—κ²Œ μžλ™μœΌλ‘œ μ „λ‹¬λ˜λŠ” νŠΉμ„±.

즉, λΆ€λͺ¨ μš”μ†Œμ˜ μŠ€νƒ€μΌμ„ μžμ‹ μš”μ†Œκ°€ λ¬Όλ €λ°›μ•„ μ μš©λ˜λŠ” 것이닀.

  • 상속이 λ˜λŠ” λŒ€ν‘œ 속성: color, font-family, font-size, font-weight, line-height, text-align λ“±

 

 

πŸ“‹ ν‚€μ›Œλ“œλ³„ 핡심 μš”μ•½ν‘œ πŸ“‹

κ°œλ… 핡심 λ‚΄μš©
Cascading μŠ€νƒ€μΌ 적용의 μš°μ„ μˆœμœ„λ₯Ό μ •ν•˜λŠ” 전체적인 μ‹œμŠ€ν…œ
Precedence μ„ νƒμžμ˜ μ’…λ₯˜μ— 따라 λΆ€μ—¬λ˜λŠ” 점수 (ID > Class > Tag)
Inheritance λΆ€λͺ¨μ˜ μŠ€νƒ€μΌ(주둜 ν…μŠ€νŠΈ)이 μžμ‹μ—κ²Œ λŒ€λ¬Όλ¦Όλ˜λŠ” νŠΉμ„±

 


 

βš™οΈ μ‹€β€Šμ „ 예제 μ½”λ“œ βš™οΈ

<style>
  /* 1. 상속: λΆ€λͺ¨μΈ div에 colorλ₯Ό μ£Όλ©΄ λ‚΄λΆ€ p와 span도 νŒŒλž€μƒ‰μ΄ 됨 */
  .parent {
    color: blue;
    border: 2px solid black; /* borderλŠ” μƒμ†λ˜μ§€ μ•ŠμŒ */
  }

  /* 2. μš°μ„ μˆœμœ„ 좩돌: class(10점) vs tag(1점) */
  p { color: red; } /* 1점 */
  .text-blue { color: blue; } /* 10점 -> νŒŒλž€μƒ‰ 적용 */

  /* 3. μ†ŒμŠ€ μˆœμ„œ: 같은 점수(10점)라면 μ•„λž˜μ— μžˆλŠ” 것이 이김 */
  .box { background-color: yellow; }
  .box { background-color: orange; } /* μ΅œμ’…: μ˜€λ Œμ§€μƒ‰ */
</style>

<div class="parent">
  λΆ€λͺ¨ μ˜μ—­ (νŒŒλž€ κΈ€μž, κ²€μ • ν…Œλ‘λ¦¬)
  <p class="text-blue">λ‚˜λŠ” 무슨 μƒ‰μΌκΉŒμš”? (νŒŒλž€μƒ‰)</p>
  <span>λ‚˜λ„ 상속받아 νŒŒλž€μƒ‰!</span>
</div>
<div class="box">λ‚˜μ€‘μ— μ“΄ 색이 μ΄κΉλ‹ˆλ‹€.</div>

 

'<style>' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

color 속성  (0) 2026.03.17
Web font  (0) 2026.03.16
font 속성  (0) 2026.03.13
Selectors (μ„ νƒμž) νƒ€μž…  (0) 2026.03.13
CSS와 Style sheet  (0) 2026.03.12