반응형
1. CSS 적용하는 방법
- 인라인 스타일
- 요소의 style 속성의 값 안에 CSS 문법으로 스타일을 적용하는 방법
ex) <p style="color:red;>
- 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 대상에 직접 표기함
- 해당 요소에 쓰기 때문에 선택자를 쓸 필요가 없음 - 내부 스타일 시트
- 해당 HTML 문서 내의 <head> 태그 안에 <style> 태그를 이용해서 CSS를 적용하는 방법
- 선택자가 이용되기 시작
- 지금까지 했던 방법이 내부 스타일 시트 방법 - 외부 스타일 시트
- 내부 스타일 시트를 이용하면 모든 파일에 동일하게 적용되는 스타일의 경우 매 파일마다 다 써주어여 함
- 하나의 파일에 .css 확장자를 사용하여 저장하고 내부에 css 문법을 이용하면 외부 스타일 시트 파일이 됨
- 안에 <link> 태그를 사용해서 외부 스타일 시트를 포함시켜 적용
<link href="경로/파일명.css" rel="stylesheet">
2. CSS 우선순위 및 상속
- 우선순위
0. !important가 적용된 속성
1. 인라인 속성 -> 1000점
2. id 속성 -> 100점
3. class 속성 -> 10점
4. 태그선택자 -> 1점
5. 동일한 점수의 선택자인 경우 나중에 적용한 것이 우선
- 속성값에 !important를 붙이게 되면 제일 최우선으로 하게 된다.
- 같은 속성이 중복될 때 각 선택자에 따라서 점수가 정해져 우선순위가 정해지게 된다.
- 근데 자식을 정하는 ">"나 선택자를 두개 써서 사용하게 되면 각 점수가 더해져서 우선순위가 정해진다.
- 그래서 "ul>li>.li-class"를 보면 태그 선택자 2개 클래서 1개이기에 총 12점으로 점수가 정해진다.
- 상속
- CSS 속성은 상속되는 속성과 상속되지 않는 속성이 있음
- 상속되는 속성은 포하마고 있는 자식 요소에 영향을 미치며 상속되지 않는 속성은 영향을 미치지 않음
https://www.w3.org/TR/CSS22/propidx.html
Full property table
'cursor' [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto yes visual, interactive
www.w3.org
반응형
'웹개발 > CSS' 카테고리의 다른 글
| [CSS] CSS position, z-index (0) | 2022.05.11 |
|---|---|
| [CSS] CSS display, box-sizing, border(radius) (0) | 2022.05.11 |
| [CSS] background(배경) (0) | 2022.05.09 |
| [CSS] font(폰트) (0) | 2022.05.07 |
| [CSS] CSS와 CSS 선택자 (0) | 2022.05.01 |