캐스캐이딩(Cascading) 원칙

Cascading : 폭포

= 위에서 아래로 흐르는

 

 

---

 

1. 스타일 우선순위

• 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
  
  • 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일(흔치않음)
• 적용 범위가 적을 수록 우선시 된다.
  • tag 스타일(h1 { }) < class 스타일(.class { }) < id 스타일(#id { }) < 인라인 스타일(<div style="color: red";>)
• 소스코드의 순서가 뒤에 있으면 덮어쓴다.
  • 중복으로 작성된 내용이 있다면 뒤에 있는 코드로 스타일이 적용됨

 

 

2. 스타일 상속

• 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
  • 자식 요소에서 재정의 할 경우, 부모의 스타일을 덮어쓴다.
• 상속이 되지 않는 속성도 있다. (ex: 배경 이미지, 배경 색 등)

 

---

 

★ 스타일을 적용하고 싶은 속성의 이름 찾는 법

글자 색을 변경하고 싶을 때 위와 같이 검색하면 color 속성을 사용하면 되는 것을 알 수 있다.(공식 사이트를 활용할것)

 

 

★활용하기 좋은 사이트들

 

https://developer.mozilla.org/ko/

MDN Web Docs

 

https://www.w3schools.com/

W3Schools Free Online Web Tutorials