CSS 개요

1. 기본 문법

• 선택자 { 속성: 값; }

2. 선언 방식

1) 내장 방식 : HTML의 head 내에 <style></style>의 내용으로 작성
2) 인라인 방식 : 요소의 style 속성에 직접 작성

• 선택자 없음, 지나치게 우선시되어 덮어쓰기 어려움

3) ⭐링크 방식 : <link />로 외부 CSS 문서를 가져와 연결

• 병렬 연결, 가장 추천

4) @import 방식 : CSS 파일에서 @import url("링크");

• CSS와 CSS 직렬 연결, 지연 발생

3. 선택자

✔ 기본 선택자

• 전체 선택자 * : 모든 요소 선택
• 태그 선택자 ABC
• 클래스 선택자 .ABC
• 아이디 선택자 #ABC

✔ 복합 선택자 : 마지막에 써져있는 선택자가 최종적으로 찾아지는 개념

• 일치 선택자 ABCXYZ : ABC와 XYZ 동시에 만족하는 요소 선택
  ㄴ 태그 선택자는 가장 앞에 적어야 함
• 자식 선택자 ABC>XYZ : ABC의 자식 요소인 XYZ 선택
• 하위(후손) 선택자 ABC XYZ : ABC의 하위 요소인 XYZ 선택
  ㄴ 띄어쓰기가 선택자의 기호, 일반적으로 많이 사용
• 인접 형제 선택자 ABC+XYZ : ABC의 다음 형제 요소 XYZ 하나를 선택
• 일반 형제 선택자 ABC~XYZ : ABC의 다음 형제 요소 XYZ 모두 선택

✔ 가상 클래스 선택자 : 콜론(:) 사용

• 동작을 제어하는 가상 클래스 선택자 (사용자가 특정 행동을 했을 때 동작하는 개념)
  • ABC:hover : ABC 요소에 마우스 커서가 올라가 있는 동안 선택
    ㄴ ABC에 transition: 1s; 속성 추가하면 자연스러운 변환 가능
  • ABC:active : ABC 요소에 마우스 클릭하고 있는 동안 선택
  • ABC:focus : ABC 요소가 포커스되면 선택
    ㄴ 포커스 될 수 있는 요소 : HTML 대화형 콘텐츠 (input, a, button, label, select 등) + tabindex="-1" 속성 사용한 요소
• ABC:first-child : ABC가 형제 요소 중 첫째라면 선택
• ABC:last-child : ABC가 형제 요소 중 막내라면 선택
• ABC:nth-child(n) : ABC가 형제 요소 중 (n)째라면 선택
  ㄴ n은 Zero-Based Numbering, *:nth-child(2n+1) 등 다양하게 변형 가능
• 부정 선택자 ABC:not(XYZ) : XYZ가 아닌 ABC 선택

✔ 가상 요소 선택자 : 콜론 두 개(::) 사용 -> 가상의 inline 요소 만들어 내용 삽입

• ABC::before : ABC 요소의 내부 앞에 내용(content) 삽입
• ABC::after : ABC 요소의 내부 뒤에 내용(content) 삽입
  ㄴ 필수 속성 content: "";
  ㄴ 삽입할 inline 요소 크기 지정하려면 display:block; 후에 width, height 적용

✔ 속성 선택자

• [ABC] : 속성ABC를 포함한 요소 선택 (값과 상관 없이 이름만 가지고 있으면 됨!)
• [ABC="XYZ"] : 속성ABC를 포함하고 값이 XYZ인 요소 선택

4. 스타일 상속

• 상속 : 부모 요소에 적용된 스타일이 하위 요소까지 영향을 미치는 것
  • 상속되는 CSS 속성은 전부 글자/문자 관련 속성 (모든 글자/문자 속성이 상속되는 것은 아님)
• 강제 상속 : 속성 값으로 inherit 지정

5. 선택자 우선순위

• 우선순위 : 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 -> 점수 우선, 점수 같으면 마지막에 해석된 선언 우선
• 🌟 상속 X < 전체 선택자(*) 0점 < 태그 선택자 1점 < Class 선택자 10점 < ID 선택자 100점 < 인라인 선언 1000점 < !important 999999999점
  • 중요도 지정 : { 속성: 값 !important; }
  • important나 인라인 선언은 비교적 덮어쓰기 어려우므로 피해야 함