πŸ’…CSS/⚑ver.0

πŸ’…Decorate from CSS : 상속

4:Bee 2024. 2. 18. 17:10
728x90

이번 μ‹œκ°„μ—λŠ” css의 상속 관계에 κ΄€ν•΄μ„œ ν¬μŠ€νŒ…ν•  것이닀. μ„ νƒμžλ₯Ό κ³΅λΆ€ν–ˆλ˜ μš°λ¦¬μ—κ² 이젠 상속관계에 κ΄€ν•œ 것은 어렀움이 없을 것이닀. 상속은 μ–΄λ–€ property κ°’μ˜ 효과λ₯Ό 주게 되면 κ·Έ element에 속해 μžˆλŠ” ν•˜μœ„μ˜ elementκ°€ ν•΄λ‹Ή 효과λ₯Ό 이어 λ°›κ²Œλ˜λŠ” μ„±μ§ˆμ„ 상속이라 ν•œλ‹€. 상속을 μ΄μš©ν•˜κ²Œ λ˜λŠ” μ΄μœ λŠ” 효율적으둜 μƒμƒν•˜κΈ° μœ„ν•¨μ΄λ‹€.  html,css μ½”λ“œλŠ” μ•„λž˜μ™€ κ°™λ‹€.

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="./style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>μˆ˜μ—…λ‚΄μš©</h1>
  <ul>
    <li>html</li>
    <li id="select">css</li>
    <li>js</li>
  </ul>
</body>

</html>
html {
  border: 1px solid gray;
  color: tomato;
}

ul {
  border: 1px solid gray;
  color: gray;
}

#select {
  border: 1px solid gray;
  color: aquamarine;
}
html {
  border: 1px solid red;
  color: tomato;
}

ul {
  /* border: 1px solid gray; */
  /* color: gray; */
}

#select {
  /* border: 1px solid gray; */
  color: aquamarine;
}

μƒ‰μƒλ§Œμ„ 두고 λ³΄μ•˜μ„ λ•Œ μƒμ†μ˜ 영ν–₯을 λ°›λŠ” 것을 μ•Œ 수 μžˆλ‹€. 개발자 도ꡬλ₯Ό ν†΅ν•΄μ„œ μ–΄λ””λ‘œ λΆ€ν„° 상속이 λ˜μ—ˆλŠ”μ§€ 확인해 λ³Ό 수 μžˆλ‹€. inherited from html을 보면 htmlλ‘œλΆ€ν„° 상속을 λ°›μ•˜ λ‹€λŠ” 것을 μ•Œ 수 μžˆλ‹€.

ν•˜μ§€λ§Œ μ—¬κΈ°μ„œ border같은 경우 상속을 받지 μ•Šκ³  직접 지정을 ν•΄μ£Όμ–΄μ•Ό μ„€μ •μ΄λœλ‹€. μ΄λŠ” 상속이 λ˜λŠ” css propertyκ°€ 있고 그렇지 μ•Šμ€ css propertyκ°€ μžˆλ‹€. κ°•μ˜ λ‚΄μš©μ— ν•΄λ‹Ή μ •λ³΄μ˜ μžλ£Œκ°€ μžˆμ§€λ§Œ css2λ₯Ό κΈ°μ€€μœΌλ‘œ μž‘μ„±λ˜μ—ˆλ‹€

 

Full property table

 

www.w3.org

css3 κ³Όλ ¨ 속성 ν…Œμ΄λΈ” 질문 from stack overflow

728x90
μ €μž‘μžν‘œμ‹œ (μƒˆμ°½μ—΄λ¦Ό)