01. CSS 문법, 선택자

1) CSS란?

 

- Cascading style sheets의 약자. 
  마크업 언어로 작성된 웹 페이지에 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다.
  
2) CSS 작성 방법

선택자 {

  속성:값;

}

선택자(Selector) : 서식을 적용할 대상

속성(Property) : 서식의 종류(글자, 문단, 배경, 배치 등) 

값(Value) : 속성을 사용하기 위한 지정 내용

 

1. 내부스타일 : 문서 내부에 스타일을 선언
2. 외부스타일 : 별도의 .css 시트 안에 스타일을 작성하여 link로 연결하는 방식
3. 인라인스타일 : 서식을 적용하려는 태그 요소 안에 직접 스타일을 작성하는 방식
4. import : css 문서 내에 다른 css 문서를 삽입하는 방식

 

3) CSS 선택자

- css 선택자 우선순위

  !important > inline > #id > .class > tag > 외부서식

 

- 명시도

  !important : 1000

  id : 100

  class :10

  tag : 1

 

- 기본 선택자

• class (.)
• id (#)
• tag selector (tag name)

- 자손 후손 선택자

• 자손 : a>b
• 후손: a b

- 그룹 선택자

• a, b, c

- 링크선택자

• :link : 하이퍼링크가 걸린 a 태그에 서식적용 a:link { }
• :visited : 링크를 클릭한 적이 있는 경우의 서식 적용 a:visited { }

- 반응선택자

• :hover : 마우스를 올렸을 때 서식 적용 div:hover { }
• :active : 마우스로 해당 영역을 누르고 있을 때 서식 적용 div:active { }

- 동위 선택자

• 선택자1 + 선택자 2 : 1 바로 뒤에 있는 2를 선택하여 서식 적용
• 선택자1 ~ 선택자 2 : 1 뒤에 있는 요소 중 2를 전부 선택하여 서식 적용

 

- 구조 선택자 (일반, 형태)

• 일반구조 선택자
  first-child{}
  last-child{}
  nth-child(n){}

• 형태구조 선택자
  first-of-type{}
  last-of-type{}