💅Decorate from CSS : 상속

Notice

Recent Posts

Recent Comments

Link

« 2025/03 »
일	월	화	수	목	금	토
						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

관리 메뉴

C-log

💅Decorate from CSS : 상속 본문

💅CSS/⚡ver.0

💅Decorate from CSS : 상속

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

728x90

이번 시간에는 css의 상속 관계에 관해서 포스팅할 것이다. 선택자를 공부했던 우리에겐 이젠 상속관계에 관한 것은 어려움이 없을 것이다. 상속은 어떤 property 값의 효과를 주게 되면 그 element에 속해 있는 하위의 element가 해당 효과를 이어 받게되는 성질을 상속이라 한다. 상속을 이용하게 되는 이유는 효율적으로 생상하기 위함이다. html,css 코드는 아래와 같다.

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</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

Full CSS property table

Is there a full CSS property table/list? I need a compact list like this: CSS Properties Index. Is there a W3C one? The one I wrote is good, but for each property I need all possible values like line-

stackoverflow.com

728x90

저작자표시

'💅CSS > ⚡ver.0' 카테고리의 다른 글

💅✨Decorate from CSS : 캐스케이딩(2) (0)	2024.02.19
💅✨Decorate from CSS : 캐스케이딩(1) (0)	2024.02.19
💅Decorate from CSS : Text - align (0)	2024.02.18
💅Decorate from CSS : 다양한 선택자들 #12 (0)	2024.02.13
💅Decorate from CSS : 다양한 선택자들 #7 (0)	2024.02.13

'💅CSS/⚡ver.0' Related Articles

Comments

C-log

💅Decorate from CSS : 상속 본문

💅Decorate from CSS : 상속

'💅CSS > ⚡ver.0' 카테고리의 다른 글

티스토리툴바