CSS 스타일 규칙: 올바른 용어를 사용합니다 (CSS Style Rules: Using the Right Terms)

이 글은 aliceytCSS Style Rules: Using the Right Terms글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

<div>와 <span>의 적절한 용어는 무엇입니까?


presentation
이 글을 클릭한 경우, CSS를 충분히 작성하여 <div><span>의 차이와 사용 방법을 알 수 있습니다. 하지만 여러분은 그것들이 무엇이라고 불리는지 알고 있나요? 우리가 HTML의 맥락에서 그것들을 사용할 때, 그것들은 elements입니다. CSS에서는 selectors입니다. 좀 더 구체적으로 설명하려면 type selectors입니다.
CSS 쓰기 방법을 아는 것만으로는 다른 사람과 코드에 대해 이야기하거나 코드를 작성해야 할 때 충분하지 않을 수 있습니다. 면접에서 CSS 코드를 다른 사람에게 알려야 할 수도 있습니다. 이유가 무엇이든, 우리가 올바른 용어를 아는 것은 우리에게 유익합니다.
이 글에서는 굵은 글씨로 메모할 적절한 용어를 강조하면서 CSS 스타일 규칙을 살펴보겠습니다.

스타일 규칙

스타일 규칙은 문서의 요소에 적용되는 스타일을 결정합니다. 각 스타일 규칙은 a selectora declaration으로 구성됩니다.

Selectors

선택기는 규칙 집합이 적용되는 요소를 정의합니다. simple selectors, compound selectors, complex selectors, 또는 selector lists일 수 있습니다.
Simple selectors: 요소의 단일 조건입니다..
presentation
type selector의 예
Simple selectors 포함:
  • type selector e.g. <div>
  • universal selector e.g. *
  • attribute selector e.g. [target=”_blank”]
  • class selector: e.g. .buttons
  • ID selector: e.g. #firstbutton
  • pseudo-class: e.g. div:hover
Compound selector: combinator로 분리되지 않고 둘 이상의 simple selector를 사용하는 선택기입니다.
presentation
type selector와 class selector로 구성된 compound selector의 예
Complex selector : combinators로 분리 된 하나 이상의 compound selectors의 순서예요.
presentation
descendant combinator의 type selector와 class selector로 구성된 complex selector의 예
Complex selectors는 combinators에 의해 설명 된 특정 관계에서 일련의 요소에 대한 일련의 동시 조건을 나타냅니다. 그들은 다음을 포함합니다 :
  • : the descendant combinator (whitespace) e.g. div.background
  • > : the child combinator div > p
  • + : the next-sibling combinator p + img
  • ~ : the subsequent-sibling combinator ul ~ .myclass
Selector 목록 : simple, compound 또는 complex selectors의 쉼표로 구분 된 목록
presentation
두 가지 유형 selector로 구성된 selectors 목록의 예
주어진 요소는 selectors 목록의 selectors 중 하나 이상과 일치 할 때 selectors 목록과 일치한다고합니다. 반복하지 않고 다른 selectors에 동일한 스타일을 적용 할 수 있습니다.

선언

마지막으로 스타일 규칙의 다른 절반 인 선언에 대해 이야기하겠습니다.
선언은 중괄호 안에 표시됩니다. property, 구성 요소 값 목록으로 구성된 value 및 초기에 설정 해제 된 중요한 플래그(important flag)가 있습니다. 각 선언은 세미콜론(semi-colon)으로 끝납니다.
presentation
모든 <div> 요소의 배경은 파란색입니다. 선언에는 둘 이상의 속성이있을 수도 있습니다.
presentation
모든 <li> 요소는 목록 형식으로 표시되지 않으며 각각 10px padding과 그 주위에 1px의 검은 윤곽선(black outline)이 있습니다.

충돌하는 스타일 규칙

때로는 동일한 요소에 충돌하는 스타일 규칙이 적용되는 경우가 있습니다. 이러한 경우 순서와 특이성(specificity)이 적용되어 어떤 스타일 규칙이 우선하는지 결정합니다.

마지막 규칙

동일한 selectors가 있으면 나중에 스타일 시트에 배치 된 스타일이 우선합니다.
div { background-color: red; }

div { background-color: blue; }
이 경우 <div>의 배경색은 파란색입니다.

특성

selector가 다른 것보다 높은 특이성(higher specificity)을 가지면 다른 것보다 우선합니다. 일반적으로 ID selectors는 클래스 selectors, 속성 selectors 및 pseudo-classes보다 우선합니다. 후자는 type selectors 및 pseudo-elements보다 우선합니다.
#firstdiv { background-color: green; }

div { background-color: blue; }.

mydiv { background-color: blue; }
위의 경우, mydiv 클래스와 id firstdiv가있는 <div>의 배경색은 녹색입니다. ID selectors가 우선하기 때문에 세 selectors의 배치는 중요하지 않습니다.
세부 사항을 자세히 조사해야하는 경우 w3.org는 selector의 고유성(specificity)을 계산하는 방법을 제공합니다.
  • selectors의 ID selectors 수를 계산합니다 (= a).
  • selector에서 class selectors, attributes selectors 및 pseudo-classes 수를 계산합니다 (= b).
  • selectors의 type selectors 및 pseudo-elements 수를 계산합니다 (= c).
  • universal selector를 무시
세 개의 숫자 a-b-c (큰 밑 수가있는 숫자 시스템에서)를 연결하면 특이성(specificity)이 나타납니다.
presentation
From w3.org

중요한 깃발

마지막으로 스타일 선언에 important 규칙을 사용하면이 선언이 다른 선언보다 우선합니다. MDN에 따르면!important는 스타일 시트에서 자연적인 계단식(cascading)을 끊어 디버깅을 더 어렵게하므로 사용하지 않는 것이 좋습니다.

참조:

  • CSS Syntax Module 3
  • MDN’s Syntax
  • HTML & CSS: Design and build websites by Jon Duckett
이 기사에서 다루어야 할 용어가 누락 된 경우 메모 해 두십시오.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz