CSS 선언 방식에는 내장 방식, 인라인 방식, 링크 방식, @import 방식으로 총 4가지의 방식이 있다.
유지보수 측면에서 단점이 많다. 직접적으로 코드를 작성 시에 내장 방식을 사용하는 것은 권장되지 않는다.
너무 지나치게 우선해서 css
를 덮어쓰면서 수정하고 싶어도 수정이 되지 않는다는 단점이 있다. 마찬가지로 인라인 방식도 사용하는 것은 권장되지 않는다.
'병렬로 연결한다.'고 할 수 있다.
@import
방식'직렬로 연결한다.'고 할 수 있다. main.css
가 html
에 연결돼서 해석이 끝나야만 box.css
가 연결되는 구조이다. 연결이 지연된다는 점이 장점이자 단점이다. 고의로 연결을 지연시키는 상황에 장점으로 사용되기도 한다. 일반적으로 많이 사용되는 방식은 아니다.
CSS 선택자에는 기본 선택자, 복합 선택자, 가상 클래스, 가상 요소, 속성이 있다.
되도록이면 순서대로 기억하는 것이 좋다.
*
ABC
.ABC
#ABC
ABCXYZ
ABC > XYZ
ABC XYZ
ABC + XYZ
ABC ~ XYZ
본래 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"]
animal
이라는 클래스를 가지고 있는 요소의 하위 요소까지 스타일이 적용된 것을 알 수 있다. 👉 이를 스타일 상속이라고 한다.
모든 속성이 상속되는 것은 아니고 상속되는 속성들이 정해져 있다. 이 속성들은 모두 글자와 문자와 관련된 속성들이다.
inherit
이라는 값을 통해 부모 요소가 가지고 있는 값을 강제로 상속시켜 적용할 수 있다.
.parent {
width: 300px;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: inherit;
background-color: orange;
}
같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법이다.
- 점수가 높은 선언이 우선하다.
- 점수가 같으면, 가장 마지막에 해석된 선언(가장 마지막에 코드로 작성한 선언)이 우선하다.
not
은 부정 선택자, 0) + 클래스 선택자(10) = 10점