🌈CSS:Selector

Universal Selector

* =  전체 선택자

Element Selector

img, button, etc.



Selector List

,(쉼표로) 여러개 가능

h1,h2 { color : blue;}

ID Selector - '#'

<button id="signup">Sign Up</button> -html

#signup {background-color: black;} - css

id - 띄어쓰기 x

     짧은 길이

     의미 포함

     중복 사용 x (파일안에서 하나만 사용 할 것)

Class Selector - .

<span class="tag">funny</span>

.tag { background-color: #e63946;

       color: #f1faee;

       font-size: 16px;}
       

유형이 같지 않아도 됨 class를 이용하면 공통적으로 요소 적용 가능

우선순위로 class selector 적용

<li class="done">Walk Chickens</li>

<li>Clean Out Coop</li>

<li class="done">Collect Chicken Eggs</li>
 
<li>Incubate Chicken Eggs</li>

<li>Hatch New Chickens!</li>

.done{color:grey;}

li{color:blue;}

Descendant Selector- (공백)

header a {font-size:30px; color:teal;}



#dislikes a {color:red; font-weight:bold;}



공백(띄어쓰기)가 중요함

Adjacent Selector - +

 <nav>

      <label for="search">Search</label>

      <input type="text" placeholder="search" id="search">

      <input type="password" placeholder="password">

      <button>Log In</button>

      <button id="signup">Sign Up</button>

</nav>

input + button { background-color: pink;}

설명 : input 다음에오는 button을 선택함

Direct Child - >

 <footer>
        <nav>
            <ul>
                <li>
                    <a href="#home">Home</a>
                </li>
                <li>
                    <a href="#about">About</a>
                </li>
                <li>
                    <a href="#contact">Contact</a>
                </li>
                <li>
                    <a href="www.google.com">Google</a>
                </li>
            </ul>
        </nav>
      <a href="#license">Content is available under these licenses.</a>
 </footer>

footer>a {color: red;}

footer 한단계 아래인 <a> tag에만 적용

footer >ul >li >a 에는 적용이 안됨

+)adjicent selector와 direct child 는 많이 쓰이지는 않음

Attribute Selector

<input type="password" placeholder="password">

input [type="password"] { color: greenyellow;}

<a href="www.google.com">Google</a>

a[href *="google"] { color: magenta;}

" *= " 

Pseudo Classes

:hover = 커서를 올려두면 특정 효과 발생

button:hover { color: aqua;}



:active = 활성화되었을 때 다른 색이나 상태를 부여 (ex)버튼을 클릭하고 있으면)

button:active {color: yellowgreen;}



:checkd = radio type or checkbox type 에서 체크가 되어있을 나타나는 다른 색이나 상태를 부여



:nth-of-type = 동일한 유형에서 위치를 기준으로 적용시킴



.post:nth-of-type(3n) { background-color: wheat;}

Pseudo Elements

보통 :: 로 작동

h2::first-letter { font-size: 50px;}

first-line 등등 여러 옵션이 있음

- The Cascade 

 code순서에 따라 위에서부터 아래로 적용됨


- Specificity

 Inline Styles > ID > CLASS > ELEMENT

 충돌이 있을 때는 점수 합산으로 결정됨

 specificity calculator 사용 가능



- chrome 개발자 도구는 유용하다


- Inline Styles

 사용도가 떨어짐 html 코드속에 적다 보니 코드 가독성과 실용성이 떨어짐


- !important

 specificity를 넘어서는 명시적 지시 


- Inheritance

color : inherite

이런식으로 이용 가능



- 개발자도구 - elments를 들어가면 무엇으로부터 상속받았는지 등을 알 수 있음