[생활코딩] CSS 3. 선택자와 속성

* [생활코딩] CSS 목차
 
 

1. 선택자와 속성

출처 : 생활코딩

 

1. 선택자 (Selector)

- 효과를 누구에게 줄 것인가 표시
 
 

2. 효과 (선언, Declaration)

- 선택자에 지정될 효과
- 속성(property)과 값(Value)으로 나뉨
 
 
 

2. 선택자 스스로 알아내는 법

1. 종류

- id 선택자: #id, 1번만 등장 (중복 X)
- 클래스 선택자: .class
- 태그 선택자: a, h1, 나머지
 
 

2. 우선순위

id > 클래스 > 태그
- 더 구체적인 것이 우선순위가 높음
- 클래스가 더 유리
 
 

3. 검색어: CSS Selector

CSS Selectors Reference

 
 

4. 실습

1) 결과

 
- id 선택자: active 설정 (글씨색: 빨강)
- class 선택자: saw 설정 (글씨색: 회색)
- 2.html과 3.html 부분: 클래스 선택자 saw
- 3.html 부분: id 선택자 active
 
 
2) 코드

 
 
 

3. 속성을 스스로 알아내는 법

1. 검색어: CSS property

ex) 글씨 크기 변경: CSS text size property
ex) 가운데 정렬: CSS text center property
 
* 추천 사이트

CSS text-align property

 
 

2. 실습

1) 결과

 
- h1 제목: 가운데 정렬, 글씨 크기 45px
 
 
2) 코드

 
- h1 태그를 선택자로 지정
- 효과는 {} 안에 적기