발전함에 따라 font, table, animation 등등이 버전에 따라서 업데이트 됨.
모듈별로 버전이 달라지기 때문에 웹 브라우저의 지원 범위가 다를 수도 있음
--> 재미난 속성들을 공부해서 바로 적용하는것보단 사용자들이 어떤 웹브라우저를 많이 사용하는지 확인 한 후에 적용하는것이 좋음.
Cascading (폭포처럼 흐른다.) 위에서 정의한 것들이 아래에까지 적용됨.
<작성방법>
1. 룰 기반 (규칙)의 언어 (여러가지)
ex. ⓐh1태그는 red, ⓑ li 태그는 green ... -> 그대로 적용
2. 특정요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음.
-그것이 태그가 될 수도 있고 그 외의 것이 될수도 있음-- > selector
ex. h1 {color:red;font-size:12px;} h1: selector, {} 괄호 안에 있는것이 어떻게 스타일링 할지 작성 -->선언블럭 (선언부) 속성:값 선언이 끝나면;
주석 (comments)
-설명할때 사용할 수 있지만 임시적으로 룰들을 주석으로 사용할 수 있음. 특정선언 하나만 주석처리 할 수 있음.
표현 : /* @@@ */
html은 <!-- @@@ --> 라고 표현
연결방법
1.css를 html 내부에 작성하기 (embedded) -> 전체적인 규칙을 <head>에 넣음
2. 인라인 스타일(inline) 요소에 직접
3. html 파일과 css 파일 연결하기 외부스타일(external)
<head> 안에 <link rel="~~~" href="@경로@/>
rel 어떤 관계인지 설명 ex. stylesheet
<a href=".test/sample.css>
. 현재 파일이 위치한 경로
.. 이전경로, / 상위경로
Cascading 원칙
1. 스타일 우선순위
-동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
-적용 범위가 적을 수록 우선시된다.
tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
tag와 같이 (h1) 광범위한 것들의 스타일보다 하나만 콕 찝어서 정의하는 인라인 스타일이 더 우선시 된다.
-소스코드의 순서가 뒤에 있으면 덮어쓴다.
2. 스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
자식 요소에서 재정의 할 경우엔 부모의 스타일을 덮어쓴다.
-상속이 되지 않는 속성도 있다 (배경이미지, 배경 색 등)
'제로베이스_정리' 카테고리의 다른 글
| 폰트관련속성 (0) | 2024.04.21 |
|---|---|
| selector (셀렉터) (1) | 2024.04.20 |
| 전역속성 (0) | 2024.04.12 |
| 메타데이터의 역할 <head> (0) | 2024.04.10 |
| Form 관련 요소 (0) | 2024.04.09 |
