CSS 개요

1. CSS 선언 방식

CSS 선언 방식에는 내장 방식, 인라인 방식, 링크 방식, @import 방식으로 총 4가지의 방식이 있다.

내장 방식

유지보수 측면에서 단점이 많다. 직접적으로 코드를 작성 시에 내장 방식을 사용하는 것은 권장되지 않는다.

인라인 방식

너무 지나치게 우선해서 css를 덮어쓰면서 수정하고 싶어도 수정이 되지 않는다는 단점이 있다. 마찬가지로 인라인 방식도 사용하는 것은 권장되지 않는다.

링크 방식

'병렬로 연결한다.'고 할 수 있다.

@import 방식

'직렬로 연결한다.'고 할 수 있다. main.css가 html에 연결돼서 해석이 끝나야만 box.css가 연결되는 구조이다. 연결이 지연된다는 점이 장점이자 단점이다. 고의로 연결을 지연시키는 상황에 장점으로 사용되기도 한다. 일반적으로 많이 사용되는 방식은 아니다.

2. CSS 선택자

CSS 선택자에는 기본 선택자, 복합 선택자, 가상 클래스, 가상 요소, 속성이 있다.

기본 선택자

되도록이면 순서대로 기억하는 것이 좋다.

• *

  • 전체 선택자(Universal Selector)
  • 모든 요소를 선택한다.
    
    

• ABC

  • 태그 선택자(Type Selector)
  • 선택자 부분에 별다른 기호 없이 태그의 이름만 명시되어 있다면 태그 선택자이다.
    
    

• .ABC

  • 클래스 선택자(Class Selector)
    
    

• #ABC

  • 아이디 선택자(ID Selector)
    
    

복합 선택자

• ABCXYZ

  • 일치 선택자(Basic Combinator)
    
    

• ABC > XYZ

  • 자식 선택자(Child Combinator)
  • 해석을 뒤에서부터 하면 쉽다.
    
    

• ABC XYZ

  • 하위(후손) 선택자(Descendant Combinator)
  • 일반적으로는 하위 선택자가 더 편하게 사용되어 자식 선택자보다 자주 사용된다.
    
    

• ABC + XYZ

  • 인접 형제 선택자(Adjacent Sibling Combinator)
  • 선택자의 다음 형제 요소 하나를 선택한다.
  • 보통 일반 형제 선택자보다 인접 형제 선택자가 더 자주 쓰인다.
    
    

• ABC ~ XYZ

  • 일반 형제 선택자(General Siblilng Combinator)
  • 선택자의 다음 형제 요소 모두를 선택한다.
    
    

가상 클래스 선택자

본래 css에서는 동작을 처리하는 개념이 아니지만 예외로 동작을 처리하는 선택자인 hover, active, focus가 존재한다.

• ABC:hover

  • 마우스를 올려놓았을 때 동작한다.
    
    

• ABC:active

  • 클릭하고 있는 동안에만 동작한다.
    
    

• ABC:focus

  • 대표적인 <input>
  • 기본적으로 사용자에게 데이터를 입력받는 요소에서 사용이 가능하다.
  • focus를 사용할 수 없는 요소의 속성에 tabindex="-1"를 추가하여 focus를 사용할 수 있는 요소로 만들 수 있다.
    
    

동작을 처리하는 선택자가 아닌 특정한 요소를 선택하는 선택자를 알아보자.

• ABC:first-child: 형제 요소 중 첫 번째인 요소가 선택된다.
• ABC:last-child: 형제 요소 중 막내인 요소가 선택된다.
• ABC:nth-child(n): 형제 요소 중 n 번째인 요소가 선택된다.
  • .fruits *:nth-child(2n): 짝수 요소를 선택한다. n은 0부터 시작(Zero-Based Numbering)
    
  • .fruits *:nth-child(2n): 홀수 요소를 선택한다.
    
  • .fruits *:nth-child(n+2): 두 번째 요소부터 선택한다.
    
• ABC:not(XYZ)
  • 앞에 있는 선택자를 제외하는 것이 아닌 괄호 안에 있는 선택자를 제외한다.
    

가상 요소 선택자

• ABC::before
  • 선택자 요소의 내부 앞에 내용을 삽입한다.
  • 자주 사용되는 선택자이다!
  • 삽입되는 요소는 인라인(글자) 요소이다.
    
    
• ABC::after
  • 선택자 요소의 내부 뒤에 내용을 삽입한다.
  • 마찬가지로 자주 사용되는 선택자이며, 삽입되는 요소는 인라인(글자) 요소이다.
    
    

🤔 ::before와 ::after
이 선택자들은 앞이나 뒤에 요소를 삽입하는 선택자이므로 그 요소의 내용이 무엇인지 명시를 해야 한다. 따라서 선택자 사용 시에는 내용을 비워두더라도 꼭! content 속성을 꼭 함께 사용해야 한다.
content를 쓰지 않으면 아무것도 동작하지 않는다!!

속성 선택자

• [ABC]
  • 대괄호 안의 속성을 포함하고 있는 요소를 선택한다.
    
    
• [ABC="XYZ"]
  • 대괄호 안의 속성을 포함하고 값이 XYZ인 요소를 선택한다.
    
    

3. 스타일 상속

animal이라는 클래스를 가지고 있는 요소의 하위 요소까지 스타일이 적용된 것을 알 수 있다. 👉 이를 스타일 상속이라고 한다.

모든 속성이 상속되는 것은 아니고 상속되는 속성들이 정해져 있다. 이 속성들은 모두 글자와 문자와 관련된 속성들이다.

강제 상속

inherit이라는 값을 통해 부모 요소가 가지고 있는 값을 강제로 상속시켜 적용할 수 있다.

.parent {
  width: 300px;
  height: 200px;
  background-color: red;
}
.child {
  width: 100px;
  height: inherit;
  background-color: orange;
}

4. 선택자 우선순위

같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다.

• 점수가 높은 선언이 우선하다.
• 점수가 같으면, 가장 마지막에 해석된 선언(가장 마지막에 코드로 작성한 선언)이 우선하다.

• 상속: 점수 X
• 전체 선택자: 0점
• 태그 선택자: 1점
• Class 선택자: 10점
• ID 선택자: 100점
• 인라인 선언: 1000점
• !important: 9999999999점
  
  

• 클래스 선택자(10) + 태그 선택자(1) + 클래스 선택자(10) = 21점
• 클래스 선택자(10) + 태그 선택자(1) + 가상 '클래스' 선택자(10) = 21점
• 클래스 선택자(10) + 가상 '요소'(요소는 태그로 볼 수 있음, 1) = 11점
• 아이디 선택자(100) + 태그 선택자(1) = 101점
• 태그 선택자(1) + 클래스 선택자(10) + 태그 선택자(1) + 클래스 선택자(10) = 22점
• 태그 선택자(1) = 1점
• 가상 클래스 선택자(not은 부정 선택자, 0) + 클래스 선택자(10) = 10점