CSS : Cascading Style Sheets
css는 룰 기반 (rule-based) 언어이다.
css를 통해 특정, 요소 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다.
- 선택자 ( Selector ) : 스타일을 지정할 HTML 요소를 선택
- 선언 블록(declation block) : 중괄호 내부의 여러 선언들을 작성
- 선언(declations) : 프로퍼티와 값으로 이루어진 쌍
CSS 적용방법
- 내부 스타일로 적용
<head>
<style>
h1 { color: red; }
</style>
</head>
<body>
<h1>Welcome!</h1>
</body>- 인라인 스타일로 적용
<head></head>
<body>
<h1 style="color:red">Welcome</h1>
</body>- 외부 스타일로 적용
<head>
<title></title>
<link rel="stylesheet" href=“style/main.css” />
<head>Cascading 원칙
- 스타일 우선순위
- 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일 - 적용범위가 적을수록 우선시 된다
tag 스타일 < class 스타일 < id스타일 < 인라인 스타일 - 소스코드의 순서가 뒤에 있으면 덮어쓴다.
- 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해진다.
- 스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
자식 요소에서 재 정의할 경우 부모의 스타일을 덮어쓴다. - 상속이 되지 않는 속성도 있다. ( ex 배경이미지, 배경 색 등)
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
Frontend 개발자입니다 😎