CSS(Cascading Style Sheet)

1. 삽입 방법
   1) style 태그 넣기

   <style> ... </style>

   2) 외부파일로 만들어서 링크 걸기

   <link rel="stylesheet" href="#">

   3) 태그에 직접 삽입

   <h1 style="background: dodgerblue"> ... </h1>

2. 형식
   : selcetor(속성: 값; 속성: 값; 속성: 값;)

h1 { background: dodgerblue; }

위에 코드로 예시를 들면 h1은 태그, background는 속성, dodgerblue는 값이다.

1. selector
   : 태그, 클래스, 아이디
2. class
   : 선언할 때는 .class 이름, 적용시에는 class=class
3. id
   : 선언할 때는 #id 이름, 적용시에는 id="id 이름"

   class는 여러 번 적용 가능하지만, id는 한 파일에서 한 번만 사용 가능하다. (이름이 중복되어서는 안 됨)

---

box 모델

1. block 모델
   : 배치가 아래로 향한다.
   ex) div, p, h1~h6...

2. inline 모델
   : 배치가 옆으로 향한다.
   ex) a, span

3. inline-block 모델
   : inline과 block의 속성을 모두 가졌다.

block -> inline 모델으로 변경하려면?

display: inline;
or
display: inline-block;
// inline: width, height, padding-top 줄 수 없음
// inline-block: width, height 줄 수 있음

inline -> block 모델으로 변경하려면?

display: block;

---

selector

1. 자식 선택자(>)
   : 내 바로 아래 자식만 선택한다.

div > ul
//div 밑에 있는 첫번째 자식에게만 스타일을 적용한다.

section > p {
	color: blue;
}
//section 밑에 있는 첫번째 p에서 파란색을 적용한다.

2. 자손 선택자(:)
   : 내 아래에 있는 모든 애들을 선택한다.

div ul :
//div 밑에 있는 모든 ul에 스타일을 적용한다.

section : p {
	background: gray;
}
//section 밑에 있는 모든 p에 회색 배경을 적용한다.

3. 형제 선택자
   : 같은 부모를 가진 형제들 사이에 적용한다.

div + h1
//div 태그의 형제중 첫번째 h1에게만 스타일을 적용한다.

div ~ h1
//div 태그의 형제중 모든 h1에게 스타일을 적용한다.

4. 속성 선택자
   : 지정한 속성을 가진 태그에 적용한다.

a[href] {
	color: red;
}
//a 태그에 href 속성을 가진 태그에 빨간색을 적용한다.

---

가상 클래스와 요소

1. 동작에 반응하는 클래스

• a : link { }
  : 하이퍼 링크 걸렸을 때
• a : visited { }
  : 클릭한 후
• a : hover { }
  : 마우스를 올렸을 때
• a : active { }
  : 마우스를 클릭했을 때

  focus: 초점이 맞추어졌을 때 스타일 적용(input...에 주로 적용)

2. input에서 사용

• : enabled
• : disabled
• : checked (radio, checkbox에서 선택했을 때의 스타일 지정)

---

nth-child

1. nth-child(n)
   : 앞에서부터 n번째의 자식에 스타일을 적용한다.
2. nth-last-child(n)
   : 뒤에서부터 n번째의 자식에 스타일을 적용한다.
3. first-child
   : 첫번째 자식에 스타일을 적용한다.
4. last-child
   : 마지막 자식에 스타일을 적용한다.

div p : nth-child(3)
//div의 자손 중 p에서 3번째 자식에 스타일을 적용한다.

div p : nth-child(odd)
//div의 자손 중 p에서 홀수번째 자식에 스타일을 적용한다.

div p : nth-child(even)
or
div p : nth-child(2n)
//div의 자손 중 p에서 짝수번째 자식에 스타일을 적용한다.