[CSS] CSS와 CSS 선택자

1. CSS(Cascading Style Sheets)

• CSS란?
  - CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어
  - 스타일을 HTML 문서로부터 따로 분리하는 것이 가능
• CSS를 사용하는 이유
  - HTML만으로 웹 페이지를 제작할 경우 HTML 요소 세부 스타일을 하나하나 따로 지정해 주어야 하기 때문에 매우 많은 시간이 걸리며, 완성된 후에도 스타일의 변경 및 유지보수가 매우 힘들어짐
  - 이 문제를 해결하기 위해 지정된 스타일 시트 언어가 바로 CSS이고, 웹 페이지의 스타일을 별도 파일로 저장할 수 있게 해주므로 사이트의 스타일을 손 쉽게 제어할 수 있음

2. CSS 문법

선택자 {

       속성명: 속성값;

       속성명: 속성값;

       ...

}

• CSS는 선택자와 선언부( { } )로 구성된다.
• 선택자는 CSS를 적용하고자 하는 HTML 요소를 가리키고 선언부는 중괄호를 사용하여 전체를 둘러싼다.
• 각 선언은 CSS 속성명: 속성값 형태로 이루어져 있다.
  속성명 : 적용하고자 하는 스타일의 종류 / 속성값 : 적용하고자 하는 스타일의 정도(값)
• CSS 선언은 각 선언마다 마지막에 ; 으로 마무리를 해준다.

3. CSS 주석

/* 주석 처리할 내용 */

4. CSS 선택자

• 전체 선택자
  - 스타일을 모든 요소에 적용할 때 사용
  - 주로 모든 하위 요소에게 한꺼번에 스타일을 적용하고자 할 때 사용하고 전체 선택자는 * 기호 사용
  - 보통 폰트 적용을 하거나 여백, 간격등을 초기화하는데 목적이 있음
  
  * {
         스타일 주기
  }

전체 선택자

• 태그 선택자
  - 특정 태그가 쓰인 모든 요소에 스타일을 적용
  - 밑에 예시처럼 ul에게 스타일을 주면 안에 있는 li에게 상속이 되 스타일이 적용됨, 하지만 모든 요소들이 상속되는 것이 아니라 상속되는 것도 있고 아닌 것도 존재함
  
  태그명 {
         스타일 주기
  }

태그 선택자

• 클래스 선택자
  - 클래스 선택자는 특정 집단의 여러 요소를 한번에 선택할 때 사용
  - HTML에 존재하는 class 속성의 값으로 요소들을 선택해옴
  - 선택자1선택자2 : 선택자1이면서 선택자2인 것(둘의 교집합)
  - 선택자1 선택자2 : 선택자1 안에 있는 모든 선택자2인 것
  - <태그 class = "클래스1 클래스2"> : 클래스는 띄어쓰기로 구분하여 여러개 부여 할 수 있음
  
  .클래스명 {
         스타일 주기
  }

클래스 선택자

클래스 선택자

• 아이디 선택자
  - id 선택자도 클래스 선택자와 마찬가지로 웹 문서 안에 특정 부분에 스타일을 줄 때 사용
  - 아이디 선택자는 문서 안에 하나에만 적용할 때 사용
  - 선택자에 작성시 #아이디명을 작성한다.
  
  #아이디명 {
         스타일 주기
  }
  
  - 여러 요소를 띄어쓰기로 쓰게 되면 자식 자손 다 포함해서 스타일을 주지만 선택자1>선택자2 처럼 사용하면 자손이 아니라 바로 밑에 있는 자식만 선택해서 스타일을 주게 된다.

아이디 선택자

• 그룹 선택자
  - 여러 선택자를 , 로 구분하여 한번에 스타일을 적용할 수 있음
  - 같은 스타일을 적용할 것은 그룹 선택자를 이용해 스타일을 주고 아닌 것들은 각자 스타일을 주면 됨
  
  선택자1, 선택자2, 선택자3, ... {
         스타일 주기
  }

그룹 선택자

그룹 선택자