기본선택자, 전체, 그룹
1. CSS 구문
: 선택자(selector) / 선언블록(declaration) 으로 구성
선택자 { 속성이름:값; …}
Ex) h1 { color:blue;font-size:12px}
property:value property : value
속성이름 : 값
selector declare declare
Ex ) h1,h2,h3 { ... }
2. 기본 선택자
2-1) 전체 선택자 : 스타일을 문서의 모든 요소에 적용
*{속성: 값;…}
Ex)
*{
text-align: center;
color: blue;
}
2-2) 타입(type) 선택자 (= 태그 선택자): 특정 태그를 사용한 모든 요소에 스타일 적용(태그명으로 호명)
태그명{스타일 규칙)
Ex) p {
text-align: center;
color: red;
}
2-3) 클래스(class)선택자 : 같은 태그라도 일부는 다른 스타일을 적용 하고 싶을 때
앞에 마침표(.)을 붙여 표현
.클래스명{스타일 규칙}
Ex)
.center {
text-align: center;
color: red;
}
html..
<div class = "center left right" > </div>
//html애서 클래스 쓸 때 띄어쓰기하여서 class 구분
- class = "center"
- 두개 사용 가능: "클래스명 클래스명" 띄어쓰기
- <head> 안 <style></style>안에 사용
2-4) id 선택자 : 웹 문서의 특정 부분 선택 (한번만 사용 가능)
- Html 요소의 id 속성을 사용
#사용
#아이디명{스타일 규칙}
사용법: 태그 안에 id="아이디명"
- <head> 안 <style></style>안에 사용
Id와 클래스 선택자의 차이 : 둘다 <head> 안 <style></style>안에 사용
하지만 id는 html에 한번만 사용가능
클래스는 두번이상도 가능
2-5) css 그룹화 선택자
- 스타일의 정의가 동일한 모든 html 요소 선택
Ex ) h1, h2, p {
text-align: center;
color: red;
}