📝 CSS (Cascading Style Sheets) 란?

✔ 웹페이지의 디자인과 레이아웃을 제어하는 스타일 시트 언어

---

👀 선택자(Selector) 란?

: 스타일을 적용하고 싶은 html 요소를 선택하는 요소

선택자 { 스타일 속성1, : 스타일 값1; 스타일 속성2, : 스타일 값2;  ...  } 

ex) 
body { background-color : black; }

👉  전체 선택자 * 
: 모든 요소를 선택

* { margin: 10px; } //모든 요소에 마진 10px를 줌 

👉 id 선택자 #
: 특정 아이디 요소를 선택

<div id="my\_id"> 

#my\_id{ 속성:값 }

👉 클래스 선택자  .

해당 클래스 요소 선택

<div class="my\_class">

  #my\_class{ 속성:값 } 

✔ id 선택자와 클래스 선택자 차이?
id 선택자는 유일한 값으로 한 번만 사용 가능하지만 클래스 선택자는 여러 요소에 중복으로 값을 넣을 수 있다. 
아이디와 클래스 선택자가 중복 정의할 경우 우선순위 : 아이디 선택자 > 클래스 선택자

👉 태그 선택자

: html 태그를 선택

p { 속성: 값 }  // p태그에 속성 값을 줌 

✔ 여러 선택자를 선택할 경우 ,를 사용한다. ex ) h1, h2, h3 { }


👉속성 선택자 : 특정 속성을 갖는 HTML의 요소를 선택

사용 방법
태그명[속성]	특정 속성을 가진 태그를 선택.  img[src]{ 속성:값 }
태그명[속성 = 값]	특정한 속성 값을 가진 태그를 선택

👉자손 선택자 : 선택자A > 선택자B
선택자A 바로 밑의 자식 중 선택자B를 선택

👉후손 선택자 : 선택자A 선택자B
선택자A의 모든 하위요소 중 선택자B를 선택

ex)

<div id="p1">
        <p>1번</p>
        <div>
            <p>2번</p>
        </div>
        <p>3번</p>
</div> 

✏ 자손 선택자

#p1 > p{
            background-color: yellow;
        }

✏ 후손 선택자

#p1 p{
            background-color: yellow;
        }

👉동위 선택자 선택자A + 선택자 B
선택자A와 인접한 선택자B를 선택

---

✍ CSS 기본 속성 정리

(단축 속성 :서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성)

👉박스 관련 속성

박스 관련 속성
border	박스 요소의 테두리를 지정하는 단축 속성
margin	border와 요소의 바깥쪽의 사이 간격의 크기 설정
padding	border와 내용(content) 사이 간격의 크기 설정
width	요소 크기의 너비
height	요소 크기의 높이
background-color	요소의 내용과 padding 배경 색 지정
color	요소의 글자색 지정
text-shadow	요소의 글자에 그림자를 적용

👉 글꼴 관련 속성

글꼴 관련 속성
font	단축 속성
font-size	글꼴 크기 지정 수치에 단위를 붙여 지정 (normal, number, length, percentage)
font-style	글꼴 모양새를 지정. italic(기울기), normal
font-family	글꼴 지정
font-weight	두께 지정 bold / noraml
line-height	줄 간격을 수치로 지정