반응형
0. CSS의 개요
1) CSS 소개
✔ CSS(Cascading Style Sheets)
웹 문서의 스타일을 책임 진다.
- CSS3 부터는 모듈별로 버전을 달리 함 ex) font, table...
- 사용시 웹브라우저마다 지원 되는지 확인
- cascading : 폭포, 위에서 적용한 스타일이 아래 요소에게 적용 됨
2) CSS의 생김새
CSS는 룰 기반(Rule-based) 언어이다.
- CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있음
- 선택자(Seletor): 스타일을 지정할 HTML 요소를 선택
- 선언 블록(declation block): 중괄호 {} 내부의 여러 선언들을 작성
- 선언(declation): 프로퍼티와 값으로 이루어진 쌍
- 선택자 { 속성: 값; }의 형태로 이루어진 Rule(Rule Set)
- 주석(Comments): /* contents */, 여러 줄 가능
3) CSS를 적용하는 방법
✔ 내부 스타일(embedded)
<html>
<head>
<style>
h1 { color: red; }
</style>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>✔ 인라인 스타일(inline)
되도록 지양하는 것이 좋음
<body>
<h1 style="color:red">Welcome!</h1>
</body>✔ 외부 스타일(embedded)
<html>
<head>
<link rel="stylesheet" href="style/main.css">
</head>
</html>4) 캐스캐이딩 원칙
✔ 스타일 우선순위
- 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해짐
- 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
- 적용 범위가 적을 수록 우선시 됨
- tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
- 소스코드의 순서가 뒤에 있으면 덮어씀
✔ 스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됨
- 자식 요소에서 재정의 할 경우, 부모의 스타일을 덮어씀
- 상속이 되지 않는 속성도 있음(ex. background-image, background-color...)
5) MDN 활용
property와 값을 알고싶으면 열심히 활용할 것~
- can i use: property 호환성 확인 site
반응형
