2.(3) CSS문법 : 선택자 사용해보기(맛보기)

CSS문법 : 선택자 사용해보기 (맛보기)

---

CLASS 와 ID 

CLASS

CSS를 사용하면서 전체적인 스타일을 일관성있게 표현해주기 위해서는 클래스를 사용하는 것이 필수적이라고 할 수 있다. 

아래 코드에 CLASS를 사용했는데 CLASS는 얼핏보면 구조체 정의하는 것처럼 생겼다.

HTML에 CSS를 적용하는 것처럼 똑같이 사용하면 된다. 

CLASS를 선언해줄때는 '.'를 사용한다. 

아래코드에서 .size-40px 처럼 앞에 .을 사용한 것을 확인 할 수 있다.

클래스를 사용할 때에는 

class="클래스명" 으로 사용하면 된다.

(※편의상 내부스타일 방식으로 구현했다.)

ID

ID도 CLASS와 적용하는 방법이 비슷하다. 

CLASS는 .으로 선언해준 반면에

ID는 #으로 선언해준다. 

그렇다면 CLASS와 ID의 차이점은 무엇일까?

아래 코드를 보면 위의 CLASS를 다 ID로 바꾸기만 한 코드인데 

3번째 줄은 적용이 되지 않은 것을 확인 할 수 있다.  

즉, ID안에는 하나의 속성만 사용될 수 있다. 

따라서 한페이지 내에서 여러번 반복될 필요가 있는 스타일은 CLASS 선택자를 사용하고 

단 한번 유일하게 적용될 스타일은 ID 선택자를 사용하는 것이 바람직하다. 

CLASS 속성은 어떤 분류안에 포함된 요소의 특성을 정의하는 데 사용이되고, 

ID 속성은 어떤 요소에 대해 유일한 특성을 정의하는데 사용이되는게 바람직 하기 때문이다.  

EX)

글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 CLASS로 지정하고

웹 문서 안에서 요소의 배치 방법을 지정할 때는 ID 속성을 사용하는 것이 좋다. 

CLASS 와 ID혼용 사용

ID속성으로 유일한 특성(기울기)를 정의해 적용했다. (#second)

---