* CSS * 의 정의 / 구문 / selector / 주석

* CSS *

* CSS란? *

: Cascading Style Sheet

  CSS는 HTML 요소가 화면, 종이 또는 다른 매체에 표시되는 방법을 설명합니다.

  외부 스타일 시트는 CSS 파일에 저장됩니다.

- CSS 구문

- Selector은 스타일을 지정할 HTML 요소를 가리킵니다.

- 선언 블록은 세미콜론으로 구분된 하나 이상의 선언을 포함합니다.

- 각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다.

- CSS 선언은 항상 세미콜론으로 끝나며 선언 블록은 중괄호로 묶습니다.

* CSS Selector *

: CSS 선택기는 HTML 요소를 요소 이름, ID, 클래스, 특성 등에 따라 찾거나 선택하는 데 사용됩니다.

- 요소(Element) 선택기 

: 요소 선택기는 요소 이름을 기반으로 요소를 선택합니다. 

  다음과 같이 페이지의 모든 <p> 요소를 선택할 수 있습니다.

  (이 경우 모든 <p> 요소는 가운데 정렬되며 빨간색 텍스트 색상으로 표시됩니다.)

p {
  text-align: center;
  color: red;
}

* ID Selector *

: id selector는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다.

  요소의 id는 페이지 내에서 고유해야 하기 때문에 id selector은 하나의 고유한 요소를 선택하는 데 사용됩니다.

  특정 ID가 있는 요소를 선택하려면 요소의 ID 뒤에 해시 (#) 문자를 씁니다.

  아래 스타일 규칙은 id = "para1"인 HTML 요소에 적용됩니다.

  ID 이름은 숫자로 시작할 수 없습니다.

#para1 {
  text-align: center;
  color: red;
}

* Selector 클래스 *

: class 선택자는 특정 class 속성이 있는 요소를 선택합니다.

  특정 class가 있는 요소를 선택하려면 마침표 ( . ) 문자와 그 뒤에 class 이름을 씁니다.

  class = "center" 인 모든 HTML 요소는 빨간색으로 중앙 정렬 됩니다.

 

.center {
  text-align: center;
  color: red;
}

- 특정 HTML 요소만 class에 의해 영향을 받도록 지정할 수도 있습니다.

  아래 예제에서는 class = "center" 인 <p> 요소만 가운데 정렬 됩니다.

 

p.center {
  text-align: center;
  color: red;
}

* CSS 주석 *

: 주석은 코드를 설명하는 데 사용되며 나중에 소스 코드를 편집할 때 도움이 될 수 있습니다.

  주석은 /* 로 시작하고 */ 로 끝납니다. 

p {
  color: red;
  /* This is a single-line comment */
  text-align: center;
}

/* This is a multi-line comment */