구성요소
선택자{속성: 속성값;}
h1{color:red;}- 선택자 : 디자인을 적용할 영역
- 속성 : 어떤 디자인을 적용할지 정의
- 속성값 : 어떤 역할을 수행할지 정의
CSS 연동하는 방법 (3가지)
- inline style sheet
태그 안에 직접 작성
<h1 style="color:red;">사과</h1>- internal style sheet
스타일 태그안에 작성
h1{color:red;}- external style sheet
link 태그로 불러와서 사용
가독성이 좋고 유지 보수가 쉽다
<head>
<link rel="stylesheet" href="css/style.css">
</head>선택자
- 기본 선택자
- type: 특정태그
- id : #id명으로 표기
- class : .class명으로 표기
- "*": 전체선택
- 그룹 선택자
선택자를 다중으로 여러개 선택
a,b,c{color:red;}- 결합자
- 자손 결합자(공백)
- 자식 결합자(>)
- 일반 형제 결합자(~)
- 인접 형제 결합자(+)
- 가상 클래스 선택자
선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족하는 조건을 지정
콜론(:)을 사용하고 뒤에 키워드를 사용해서 정의
hover,active,checked,focus,disabled
box:hover{
width:200px;
}- 가상 요소 선택자
선택한 요소의 일부분에 스타일을 입힌다
콜론2개(::)를 사용하고 뒤에 키워드를 붙임
before ,after, placeholde
CSS 우선 순위 결정
- 순서: 나중에 적용한 속성값
- 디테일: 더 구체적으로 작성된 선택자(예 : p < header p)
- 선택자: style>id>class>type 순으로 우선 순위가 높음
<html>
<h3 style=“color: pink” id=“color” class=“color”> color</h3>
</html>
// style.css 문서
<style>
#color{color:blue;}
.color{color:red;}
h3{color:green;}
</style>
-> h3은 분홍색으로 출력
Just do it!