CSS란??

CSS.

 

Cascading Style Sheet

 

Cascading Style Sheet = 스타일을 잘 정리한 문서한 장.

 

cascade 폭포처럼흐르다. 무언가 연속해서 흐르는 느낌 = Cascading Style Sheet

 

 

예를들어, 브라우저에 버튼이 보여질때, 브라우저에서 css가 작성된 문서에

"야, 너희 이 버튼에 관련된 스타일링있어?"

"없는데?" 하면 다시 또 이번엔 브라우저에 기본적으로 있는 문서에

"야, 너희 이 버튼에 관련된 스타일링 있어?" 묻는다.

 

기본값문서에 스타일링이 있으면 그 값을 가져와서 

브라우저에서는 기본값으로 보여지는 것!

 

이렇듯, cascading 은 정의된 지정된 값이 있다면 그것을 쓰고, 

그 값이 없다면 정의된 기본값으로 사용하는 것을 나타낸다.

 

---

웹사이트를 스타일링 할 떄, 

총 크게 3가지로 나누어서 생각해 볼 수 있다.

 

1. Author Style
2. User Style
3. Browser

 

 

1. 우리가(개발자들이) 작성하는 Style (최고의 우선순위)

 

↓

 

2. 사용자가 설정하는 Style

(브라우저 상에서 우리가 다크모드를 사용할건지,

글자크기는 어떻게 바꿀건지, 등등)

 

↓

 

3. 브라우저 상에서 기본적으로 지정된 스타일.

 

 

1번에 없다면 2번. 2번이 없다면 3번..  이 순서. 

이 것이 바로 cascading

 

 

이 cascading 연결고리를 끊어내는 아이 = !important

 

이 아이를 쓰면 "무조건 날 써야해" 

 

보통의 경우, 이 아이는 쓰지 않는다.... 

 

 

 

---

CSS Selectors

 

Universal  * {}

type   Tag {}

ID   #id {}

Clss  .class {}

State   :{}

Attribute   [속성값]{}

 

 [속성값]

 

a[href="naver.com"] {color:purple;}

 

-a태그 중에 href가 naver.com 인 친구만 글자 컬러를 보라로 바꿔주세요.

 

a[href^="naver"] {color:purple;} 

 

-a태그 중에 href가 naver로 시작하는 친구만 글자 컬러를 보라로 바꿔주세요.

 

a[href$=".com"] {color:purple;} 

 

-a태그 중에 href가 .com으로 끝나는 친구만 글자 컬러를 보라로 바꿔주세요.

 

a[href*="o"] {color:purple;} 

 

-a태그 중에 href가 중간에 o가 들어가는 친구만 글자 컬러를 보라로 바꿔주세요.

 

 

**

li#special {color:purple;}

 

li태그중에 아이디값이 special인 친구만 글자 컬러를 퍼플로 바꿔주세요.

 

 

**

개발도구 여는 법  F12 or Ctrl + Shift + I

 

 

https://flukeout.github.io/선택자연습