📃 프론트엔드 인터뷰 문제 답해보기 #3 CSS 선택자 특정성

Jake Seo·2020년 6월 3일

인터뷰-문제-답해보기

목록 보기

3/10

📃 프론트엔드 인터뷰 문제 답해보기 #3 CSS 선택자 특정성

Prologue

깃허브를 돌아다니다가 예전에 프론트엔드 개발자 인터뷰 질문이라는 레포지토리를 본적이 있다. 사실 그 당시에는 그냥 스타만 눌러놓고 큰 관심이 없었지만 지금부터 하나씩 풀어보려 합니다.

물론 많은 답들이 이미 이 레포지토리에 작성되어 있긴 한데, 작성되지 않은 것들도 있고 내 답이랑 모범답안을 비교하는 것도 좋을 것 같아서 한번 풀어보려 합니다.

문제 선정

기존 레포지토리에는 문제의 분류가 아래와 같이 되어있습니다.

General Questions
HTML Questions
CSS Questions
JS Questions
Accessibility Questions (external link)
Testing Questions
Performance Questions
Network Questions
Coding Questions
Fun Questions

매일 1가지씩 돌아가며 풀 건데, General Questions 항목에서 너무 일반적인 문제는 풀지 않을 것이다. 너무 일반적인 문제의 정의는 사람마다 답이 다를 수 있는 문제입니다.

이를테면...

~~What did you learn yesterday/this week? (어제/이번주에 무엇을 배웠나요)~~
~~What excites or interests you about coding? (무엇이 당신을 코딩하고 싶게 만드나요?)~~
~~What is a recent technical challenge you experienced and how did you solve it?(최근에 겪은 기술적인 어려움과 그것을 어떻게 해결했는지 알려주세요)~~

이러한 것들은 답변하지 않는다. 이런 문제는 그때그때 답이 달라질 수 있습니다.

참고

나의 답변은 높은 확률로 틀릴 수도 있으며, 아니면 맞게 가다가 중간에 이상한 길로 빠질 수도 있다. 댓글에 자신만의 답을 올려주면 매우 고마울 것 같습니다.

Q: CSS 선택자의 특정성은 무엇이며 어떻게 동작하나요?

원문 : What is CSS selector specificity and how does it work?

CSS 선택자 특정성은 어떠한 스타일이 엘리먼트에 적용될 것인지를 결정하는 일종의 규칙입니다. 더 높은 점수의 CSS 스타일이 엘리먼트에 적용됩니다.

이것을 이해하지 못하거나 이해함에도 많은 개발자들이 !important를 남발하고 있습니다.

CSS 선택자 나누기

먼저 나누자면 3가지 종류의 CSS 선택자로 나눌 수 있습니다.

타입 선택자와 Pseudo 엘리먼트

// Type selectors
h1 { ... }

// Pseudo elements
::before { ... }

클래스 선택자, 속성 선택자, 슈도 클래스

// Class selector
.cat { ... }

// Attribute selectors
[type="radio"] { ... }

// Pseudo classes
:hover { ... }

ID 선택자

// ID selectors
# cat { ... }

기타 추가적인 Rule들
- 전체 선택자(*), 콤비네이터(>, +, ...), 부정 슈도 클래스 (:not)는 CSS 특정성에 아무런 영향을 갖지 못합니다. 그 안에 내재된 속성들은 슈도 클래스가 갖는 특정성과 같습니다.
- HTML 엘리먼트 내부에 인라인 속성들을 정의하는 것은 일반적으로 좋은 관행이 아닙니다. 되도록이면 스타일은 헷갈리지 않도록 한 곳에 정의하도록 하는 것이 좋습니다.
- !important는 매우 안좋은 관행입니다. CSS코드의 디버그를 어렵게 만듭니다.