CSS 개요

선택자{속성:값;}
:은 ;이다

CSS 선언 방식

• 내장 방식
  <style></style>의 내용(Contents)으로 스타일을 작성하는 방식
• 인라인 방식
  요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음)
• 링크 방식
  <link />로 외부 CSS 문서를 가져와서 연결하는 방식
• @import 방식
  CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식

선택자_기본

• (Asterisk)* 전체 선택자
  모든 요소를 선택

• ABC 태그 선택자
  태그 이름이 abc인 요소 선택
  ex) li

• .ABC 클래스 선택자
  html class속성의 값이 ABC인 요소 선택
  ex) .orange

• #ABC 아이디 선택자
  html id 속성의 값이 ABC인 요소 선택
  ex) #orange

선택자_복합

• ABCXYZ 일치 선택자
  선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
  ex) span.orange

• ABC > XYZ 자식 선택자
  선택자 ABC의 자식 요소 XYZ 선택
  ex) ul > .orange

• ABC XYZ 하위(후손) 선택자
  선택자 ABC의 하위 요소 XYZ선택
  '띄어쓰기'가 선택자의 기호
  ex) div .orange

• ABC + XYZ 인접 형제 선택자
  선택자 ABC의 다음 형제 요소 XYZ 하나를 선택
  ex) .orange + li

• ABC ~ XYZ 일반 형제 선택자
  선택자 ABC의 다음 형제 요소 XYZ 모두를 선택
  ex) .orange ~ li

선택자_가상 클래스(1)

• ABC:hover
  선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택

• ABC:active
  선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택

• ABC:focus
  선택자 ABC 요소가 포커스되면 선택
  (실제로 포커스가 가능한 요소에만 작동)

선택자_가상 클래스(2)

• ABC:first-child
  선택자 ABC가 형제 요소 중 첫째라면 선택
  ex) .fruits span:first-child

• ABC:last-child
  선택자 ABC가 형제 요소 중 막내라면 선택
  ex) .fruits h3:last-child

• ABC:nth-child(n)
  선택자 ABC가 형제 요소 중 (n)라면 선택
  ex) .fruits * :nth-child(2)
  (2n): 2의 배수 > n은 0부터 시작
  (2n+1): 3의 배수(홀수)
  (n+2): 첫번째 요소를 뺀 두번째 요소부터

• 부정 선택자
  ABC:not(XYZ)
  선택자 XYZ가 아닌 ABC 요소 선택
  ex) .fruits * :not(span)

선택자_가상 요소

• ABC::before 인라인(글자) 요소
  선택자 ABC 요소의 내부 앞에 내용(content)을 삽입
  ex) .box::before {
  content: "앞!";
  }

• ABC::after 인라인(글자) 요소
  선택자 ABC 요소의 내부 뒤에 내용(content)을 삽입
  ex) .box::before {
  content: "뒤!";
  }
  (before, after은 content와 한세트!)

선택자_속성

• [ABC] attr
  속성 ABC을 포함한 요소 선택
  ex) [disabled]

• [ABC="XYZ"] attr=value
  속성 ABC을 포함하고 값이 XYZ인 요소 선택
  ex) [type="password"]

스타일 상속

글자/ 문자 관련 속성들

• 강제 상속
  문자/글자가 아닌 요소를 강제로 상속받게 하여 사용
  • inherit 부모 요소로 부터 값을 상속 받아 사용
    ex) height: inherit;

선택자 우선순위

:: 요소=태그
:not 부정 선택자로 가상 선택자이긴 하지만 값이 0이다.
!important 무한대점수
style 인라인 선언 1000점
(Sharp)# id선택자 100점
. class선택자 10점
div 태그=요소 선택자 1점
(Asterisk)* 전체 선택자 0점