CSS (Cascading Style Sheets) 란?
CSS의 version
- css는 모듈 별 버전이 다르게 진행되므로 최신 모듈은 적용 전 브라우저의 지원 유무를 확인 필요
Cascading이란?
스타일 우선순위
- 동일한 스타일이라도 선언된 곳에 따라 우선순위 결정
- 브라우저에 의해 정의 된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
- 적용 점위가 적을수록 우선시 된다.
- tag 스타일 < class 스타일 < id 스타일 < 인라인 스타일
- 소스코드의 순서가 뒤에 있으면 덮어쓴다.
스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
- 상속이 되지 않는 속성도 있다 (예 : 배경 이미지, 배경 색 등)
CSS는 어떻게 생겼을까?
예시
h1 {
color:red;
font-size:12px;
}
- CSS는 룰 (규칙) 기반의 언어
- CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다.
- 선택자(selector) : 스타일을 지정할 요소 선택
- 선언 블록 : 중괄호 {} 내부에 여러 선언들을 작성
- 선언 : property:value; 형태의 쌍으로 이루어짐
/* 주석 */
h1 {
color:red;
font-size:12px;
}
CSS를 적용하는 방법
내부 스타일 (embedded)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color : red;
}
</style>
<title>CSS</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
인라인 스타일 (inline)
<h1 style="color:red;">Welcome!</h1>
외부 스타일 (external)
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
모르는 CSS 속성에 대한 탐색 방법
- 궁금한 속성 값 + MDN 서치하기!
- 브라우저 호환성 확인하기
