스타일 형식
- 선택자 = 어디에 적용할 것인지를 나타냄
속성과 속성 값은 콜론(:)으로 구분 '속성:속성 값' 같은 형시으로 표시하고 다음에는 세미콜론(;)으로 구분한다
스타일 시트
- 여러개 사용된 스타일 규칙들을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데 묶어 놓은 것
내부 스타일 시트
= 문서 안에 정리한 것, 모든 스타일 정보는 < head > 태그 안에서 정의해야 하고 < style > 태그 사이에 작성한다.
외부 스타일 시트
= 따로 저장해 놓은 스타일 정보, .css라는 파일 확장자를 사용, < style > 태그 없이 < link > 태그만 사용해 미리 만들어 놓은 외부 스타일 시트 파일을 연걸한다.
<--기본형-->
<link rel="stylesheet" href="외부 스타일 파일 경로">인라인 스타일
= 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시하는 방법, < style > 속성을 사용해 style="속성:속성 값"; 형태로 스타일을 바꿀 수 있다.
주요 선택자
- 전체 선택자 = 모든 요소에 스타일 적용
<--기본형-->
* {
속성:속성 값;
,,,
}- 태그 선택자 = 특정 태그를 사용한 요소에 스타일 적용
<--기본형-->
태그 {
속성:속성 값;
,,,
}- 클래스 선택자 = 특정 부분에 스타일 적용(문서 안에서 여러 번 사용)
<--기본형-->
.클래스명 {
속성:속성 값;
,,,
}
<--특정 태그에만 클래스 선택자를 적용-->
태그.클래스명 {
속성:속성 값;
,,,
}- id 선택자 = 특정 부분에 스타일 적용(문서 안에서 한번만 사용)
<--기본형-->
#아이디명 {
속성:속성 값;
,,,
}- 그룹 선택자 = 둘 이상 요소에 같은 스타일 적용
<--기본형-->
이름1, 이름2 {
속성:속성 값;
,,,
}캐스케이딩 스타일 시트
의미
- '위에서 아래로 흐른다'는 뜻
- 선택자에 여러 스타일이 적용될 때 충돌을 막기 위해 '위에서 아래로 흐르며 적용되는' 방법을 선택
원칙
-
스타일 상속
-자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식요소로 전달됨
-스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아님
-부모 요소로 부ㅜ터 스타일이 상속되는데 자식 요소에서 다른 스타일을 사용하고자 한다면, '명시도' 나 '소스순서' 등에 따라 우선 순위 결정 -
스타일 우선순위(캐스케이딩에서 가장 중요)
1순위. 사용자 스타일 시트 = 저시력자나 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트를 말함2순위. 제작자가 만든 스타일 중 !important가 붙은 스타일 = 제작자는 스타일을 정의할 때 다른 어느 스타일보다 최우선으로 적용해야 할 스타일에는 !important를 붙일 수 있다.
3순위. 제작자가 만든 일반 스타일 = 사이트를 제작하면서 만든 스타일들이다.
4순위. 기본적인 브라우저 스타일 시트 = 브라우저들마다 기본적으로 지정하고 있는 스타일이다.
