[CSS] CSS기초, 셀렉터 완전 정리!

1. CSS

---

CSS란 Cascading Style Sheet의 약자로, 우리는 Cascading이 뭔지 좀 더 살펴볼 필요가 있다.

 

Cascading 이란, 폭포, 연쇄라는 뜻으로 그 이유는

 

웹페이지 화면이 로드될 때, 실제 화면이 꾸며지는 순서는 아래 그림처럼

 

Cascading

 

우리가 정의한 CSS가 있다면, Author style이 적용되고,

 

없으면 다크모드 설정과 같은 유저가 설정한 User style이

 

그리고 이도 없다면 Browser에서 정의한 기본스타일이 적용이 되기 때문이다.

 

2. Selector

---

CSS에서 Selector란, HTML에서 우리가 꾸미고자 하는 요소를 골라오는 것 즉, 선택하는 것을 말한다.

 

무엇가를 꾸민다는 것은 잘 분류하고 공통적인 특성을 부여함으로써 통일적인 느낌을 주는게 중요하기 때문에

 

잘 분류된 HTML 태그를 아래 표와 같이 Selector를 이용해 이쁘게 꾸밀 수 있다..

 

HTML	CSS
Universal	*
Type	Tag
ID	#id
Class	.class
State	:
Attribute	[]

See the Pen jOVRxzN by Hamsworth (@hampro) on CodePen.

3. Practice

---

Selector 연습은 게임으로!

 

CSS Diner

 

4. Resource

---

MDN CSS Selectors: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors​

CSS Reference: developer.mozilla.org/en-US/docs/Web/CSS/Reference​

CSS Properties Reference: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference