2. CSS selector

[

Specificity Calculator

Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own.

specificity.keegan.st

](https://specificity.keegan.st/)

CSS Selector Cheat Sheet - Dark.pdf

2.05MB

내 질문

1. CSS 선택자 네이밍을 어떤 식으로 하고 계신가요?
2. CSS의 가상 요소와 가상 선택자에 대해 설명해주세요.

• CSS에는 가상요소(:pseudo-element)와 가상 클래스(:pusedo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있다. HTML 문서를 읽는 화면 리더기가 무의미한 정보를 읽지 않도록 하고 불필요한 클래스 사용을 피해 코드 가독성을 높일 수 있다.
• 가상 클래스는 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입힐 수 있다. (ex. :first-child)
• 가상 요소는 실제로 존재하지 않는 요소를 만들게 해준다. (ex. ::before)

3. CSS 선택자 별로 탐색시간이 다를까요? 만약 탐색시간이 다르다면 누가 가장 빠르고 누가 제일 느릴까요? (id, class, dataset)

출처 365kim

도비 질문

1. css 선택자 중에 +, ~ 의 차이점은 무엇일까요?
   • + 의 경우 div + p 에서바로 뒤에 오는 첫번째요소를 선택 (단, 형제 요소만 가능)
   • ~ 의 경우 div ~ p 에서뒤에 오는 모든
     요소 선택 (단, 형제 요소만 가능)
   • Tryit Editor v3.6
2. **!important 를 지양해야한다고 한다고 리뷰를 받은 적이 있는데 이유가 무엇이라고 생각하시나요?**
   • CSS 우선순위를 무시하기 때문이다. 여러명이 협업하여 코드를 작성할 때, !important가 적용된 코드가 있으면 스타일을 변경해도 변경이 되지 않는 경우가 생긴다. 따라서 !important를 제거하거나 새롭게 수정하는 스타일에도 !importatnt를 적용해야한다. 따라서 !important는 꼭 필요한 경우에만 사용해야하며 이때는 주석을 작성하여 팀원들에게 왜 !imporatnt를 사용해야만 했는지 이유를 설명해야 한다. (출처 도비 블로그)
   • 외부 CSS 라이브러리를 쓰는데 그 내용을 바꾸고 싶은데 라이브러리를 바꾸고 싶지 않을 때는 쓸 수 있을 듯. + CSS를 바꾸는 비용이 더 들 때
3. css 우선순위는 어떤 순서로 적용될까요? 이 때 주의해야 할 점이 있을까요?
   • 기본적으로 뒤에 나오는 CSS가 우선순위가 높다.
   • !importatnt > inline style attribute > id > class, attribute, pseudo class > tag element, pseudo element
   • 우선순위가 같다면 개수가 많은 CSS가 우선순위가 높다.

추가 인사이트

1. attribute는 대소문자 구분이 안된다. 프로퍼티는 Camel case

2. CSS는 계단식이기 때문에 앞의 요소를 선택하는 선택자가 없다

3. 단위를 표시할 때는 after pseudo element 선택자를 쓰면 편하다.

p::after{
    content: ' km'
}

4. anchor 태그 스타일 적용 순서 LVHA (link, vistited, hover, active) 순서로 적용해야 된다. 안 그러면 덮어쓴다.