[CSS] 선택자 종류 & 스타일 우선순위과 상속

CSS 선택자의 종류

1. HTML 요소 선택자 (타입 선택자)

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.

특정 태그에만 적용하고 싶을 때 사용되며, 특정 태그 전체에 적용됩니다.

/* p 태그에 style 적용시키기 */
p {
  color: blueviolet;
  margin: 0;
}

2. id 선택자

id 선택자는 CSS에 적용할 대상으로 특정 요소를 선택할 때 사용합니다.

#을 사용해서 구분합니다.

id 선택자는 고유하게 적용하기 때문에, 한번만 적용하는 것이 원칙입니다.

(여러 요소에 같은 아이디 이름을 사용해도 문제없이 동작하나, 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생하기 때문에 id는 한번만 적용하는 것이 좋습니다.)

#container {
	border: 2px solid blue;
	padding: 10px;
}

<div id="container"></div>

3. Class 선택자

클래스 선택자는 특정 부분의 여러 요소에 Style을 적용할 때 사용합니다.

문서 안에서 여러번 사용할 수 있으며, 각기 다른 Class를 중복해서 적용이 가능합니다.

앞에 마침표(.)을 사용해서 나타냅니다.

<h1>클래스 선택자를 이용한 선택</h1>

<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>

<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>

<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

<h3 class="headings headings2">이 부분에는 다른 스타일과 추가 스타일을 적용합니다.</h3>

.headings {
    color: lime;
    text-decoration: overline;
}
.headings2 { 
    color: blue; 
    font-size: 50px; 
}

4. 그룹 선택자

그룹 선택자는 여러 선택자를 같이 사용하고자 할 때 사용합니다.

여러 선택자를 쉼표(,)로 구분하여 연결합니다.

h1,
p {
	color: blueviolet;
}

5. 전체 선택자

전체 선택자는 * 와일드카드 문자를 사용하며 요소 내부의 모든 요소를 선택합니다.

* { color: teal; text-decoration: underline; }
div * { color: teal; text-decoration: underline; }

Cascading이란

영어 사전 의미 : 위에서 아래로 쏟아지는

즉, 계단식으로 스타일이 적용된다는 의미로 사용됩니다.

선택자에 여러 스타일이 적용될 때 스타일 충돌을 막기 위해 우선순위에 따라 적용할 스타일을 결정합니다.

 

Cascading에는 두가지 원칙이 있습니다.

• 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선 순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일 적용
• 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달

원칙 1. 스타일 우선순위

https://www.youtube.com/watch?v=QC6e80wLrLU&t=1349s

1. 얼마나 중요한가에 따라 적용

1. 사용자 스타일 : 시스템에서 만든 스타일이며, 사용자가 제어할 수 없습니다.
2. 제작자 스타일 : 웹 사이트를 만들 때 제작자가 만든 스타일을 의미합니다.(CSS, SaSS)
3. 브라우저 스타일 : 브라우저의 기본 스타일

2. 얼마나 한정지을 수 있는가에 따라 적용

1. !important : 어떠한 스타일보다 우선 적용되는 스타일입니다.
2. 인라인 스타일 : 해당 태그에만 적용되는 스타일입니다.
3. id 스타일 : 특정 부분에만 적용되는 스타일이며, 문서 안에서 한번만 사용되는 특징이 있습니다.
4. 클래스 스타일 : 특정 부분에만 적용되는 스타일이며, 문서 안에서 여러번 사용되는 스타일입니다.
5. 타입(태그) 스타일 : 특정 태그에만 적용되는 스타일이며, 문서 안의 같은 태그에 모두 적용됩니다.
6. 전체 스타일 : 문서 전체에 적용되는 스타일입니다.

3. 소스 순서에 따라

• 중요도와 명시도에 같다면 소스 순서에 따라 결정됩니다.
• 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어 사용됩니다.

  p {
    color: black;
  }
  /* important이기 때문에 무조건 첫번째 우선순위이다. */
  h1 {
    color: brown !important;
  }
  /* 나중에 있는게 먼저 있는 것을 덮어 씌운다. */
  p {
    color: blue;
  }

원칙 2. 스타일 상속

자식 요소(태그)에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됩니다.

Ex) p태그 안에 있는 글자 크기를 정해놓지 않는다면, 그 위에 div 태그 혹은 Body 태그에서 글자 크기를 따라갈 수 있다.

/* body에 적용하면 head 태그와 p태그에 모두 상속된다.
단 head 태그는 기본 크기가 있기 때문에 더 크게 되는 특징 */
body {
	font-size: 20px;
}

참조

🎨 CSS 기본 사용법 & 문법 정리

🎨 CSS 속성 상속 개념 & 적용 우선순위

https://www.youtube.com/watch?v=QC6e80wLrLU&t=1349s