CSS 기초 및 셀렉터

 

https://www.youtube.com/watch?v=gGebK7lWnCk&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=7

유튜브 드림코딩으로 공부한 내용입니다. 

 

🌈 공식문서

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

🌈 셀렉터

HTML에서 어떤 태그들을 고를 것인지 규정하는 문법이다. 구체적인 조건일수록 우선순위가 높아진다. 가령 universal 로 초록색, li tag 로 파란색을 부여했다면, 더 구체적인 tag 의 설정 즉 파란색이 적용된다. 

 

1. *

모두

* {
color:green;
 }

 

2. Tag

태그 타입

li {
color: blue;
]

 

3. #id 

id

<!--HTML-->

<ol>
    <li id="special">First</li>
</ol>
<h1 id="special"></h1>


<!--CSS-->

#special {
color:pink;
]

 

4. .class

class

<!--HTML-->

<div class="hello"></div>

<!--CSS-->

.hello{
width:100px;
height:100px;
background:yellow;
}

 

 

5. :

state에 따라 변화

button:hover{
color:red;
]

 

 

6. []

속성값에 따라 변화

a[href] {
color:purple;
}
//a 태그 중에 href 속성값 있는 애들만

 

🌈 Margin 과 Padding 차이

Margin : 외북 여백

Padding: 내부 여백

 

 

🌈 셀렉터 연습 게임

https://flukeout.github.io/

CSS Diner

 

1. Descendant (자손) Selector

A B

B 태그 중에서 A 안에 있는 B 태그. 

 

p  strong selects all strong elements that are inside of any p

 

 

2. Combine the Class Selector

A.className

A 태그 중에서 해당 클래스 이름을 가진 A 태그 선택

 

ul.important selects all ul elements that have class="important"

#big.wide selects all elements with id="big" that also have class="wide"

 

3. Comma Combinator

A,B

A와 B 태그 선택

p, .fun selects all p elements as well as all elements with class="fun"

 

4. Combine Universal 

A *

A 안에 있는 모든 것

ul.fancy * selects every element inside all ul class="fancy" elements

 

5. Sibling Selector

A+B

B중에 A 옆에 나오는 B

p + .intro selects every element with class="intro" that directly follows a p

 

 

A~B

B중에 A 뒤에 나오는 B

A ~ B selects all B that follow a A

 

 

A > B

A 바로 뒤에 있는 B

A > B selects all B that are a direct children A

 

 

6. Child Selector

:first-child

:only-child

:last-child

:nth-child

div p:first-child selects all first child p elements that are in a div

ul li:only-child selects the only li element that are in a ul

div p:nth-child(2) selects the second p in every div