CSS 란 ???
CSS( 캐스케이딩(Cascading) + 스타일 시트(Style Sheets))
→ 웹 페이지를 꾸며주는 코드입니다.
캐스케이딩 →폭포(위에서 아래로 쏟아지는 의미를 가진 영어단어 )
캐스케이딩 스타일 시트 → 위에서 아래로 적용되는 스타일 시트
왜 케스 케이딩 중요한가?????
Html/Css를 사용하다 보면 한 태그에 여러 스타일이 겹쳐지는 경우가 발생된다. 이럴 경우에 어떤 스타일요소를
우선적용할지 결정하는 것이 캐스케이딩입니다. 그렇기 때문에 케스케이딩 개념에 대한 이해가 필요합니다.
케스케이딩 원칙 2가지
1.스타일 우선순위
2. 스타일 상속
1. 스타일 우선순위 원칙
→우선순위에 따라 스타일이 적용되는 것을 말한다.
우선 순위 3가지
1.중요도 2. 명시도 3. 코드 순서
1. 중요도 : CSS가 어디에 선언되었는지에 따라 우선순위가 달라진다.
- head요소 내의 style 요소
- head요소 내의 style 요소 내의 @import문
- <link>로 연결된 CSS파일
- <link>로 연결된 CSS파일 내의 @import문
- 브라우저 default 스타일 시트
2. 명시도 :대상을 명확하게 특정 할수록 명시도가 높아지고 우선순위가 높아진다.
명시도: 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단
https://developer.mozilla.org/ko/docs/Web/CSS/Specificity
명시도 - CSS: Cascading Style Sheets | MDN
명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.
developer.mozilla.org
명시도 우선순위 : Important > 인라인 스타일 > 아이디 선택자 > 클래스/어트리뷰트(속성)/가상 선택자 >
태그 선택자 > 전체 선택자 > 상위 요소애 의해 상속된 속성
인라인 스타일(InLine Styles) : HTML요소의 style 속성 내에 직접 정의된 스타일입니다. 해당 요소에 직접 적용되며 다른 스타일 규칙보다 높은 우선순위를 가집니다.
3. 코드순서 : 선언된 순서에 따라 우선순위가 적용됩니다. 먼저 선언되면 먼저 , 나중에 선언되면 나중에!!
스타일 상속(Inheritance) :부모 요소에 적용된 값을 자식 요소가 물려받는 것을 의미합니다. 즉 우리가 아버지의 성을 물려받아 이름을 짓는 거랑 비슷하다고 보면 됩니다.
<style>
/* html태그 <html lang="en">~</html>가리킨다 .->최상위 요소 (단군 같은 )*/
html{color: red;}
/* 효율적인 방법 :부모 컬러를 자식들이 물려 받는것이 효율적이다
기본적으로 부모가 가진 컬러를 자식들이 불려 받으면서 특정 요소 컬러를 변경 시켜주면 된다
*/
#selector{color: black;
}
</style>
</head>
<body>
<h1>수업 내용</h1>
<ul>
<li>html</li>
<li>css</li>
<li id="selector">javascript</li>
</ul>
</body>