1. 선언 방식

• 인라인(in-iine)방식

  HTML 요소(태그)의 'style' 속성에 직접 작성하는 방식

  <div style="color: red; font-size: 20px; font-weight: bold;">Hello</div>

• 내장(enbedded) 방식

  HTML <style></style> 안에 작성하는 방식

• 링크(link)방식

  HTML <link> 를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식 → 추천 방식

  <link rel="stylesheet" href="css/common.css">

• @import 방식

  CSS에서 @import를 이용하여 외부 문서로 CSS를 불러와 적용하는 방식

  <link rel="stylesheet" href="css/common1.css"> → HTML File

  @import url("./common2.css"); → CSS File

  ⚠️ @import 사용 시 주의사항

  link 방식으로 CSS 호출 시 병렬 방법으로 거의 동시에 CSS 파일을 불러오는 반면,

  @import 방식으로 CSS 호출 시 직렬 방법으로 링크 CSS가 호출이 완료가 되어야 @import 된 CSS 를 호출하기 때문에 해당 CSS가 전부 호출되어야 하는 조건일 때 사용하면 괜찮다.

2. 기본 선택자

• 전체 선택자 : *
• 태그 선택자 : div
• 클래스 선택자 : .name
• 아이디 선택자 : #name

→ 위에서 부터 차례대로 순서를 기억해 주면 좋다.

3. 복합 선택자

• 일치 선택자 : span.orange → 조건: span
• 자식 선택자 : ul > .orange → 조건: ul
• 후손(하위) 선택자 : div .orange → 조건: div
• 인접 형제 선택자 : .orange + li → 조건: .orange (.orange 바로 다음에 인접한 형제 li 1개)
• 일반 형제 선택자 : .orange ~ li → 조건: .orange (.orange 바로 다음부터 인접한 형제 li n개)