CSS 클래스(class)에 대한 이해

CSS 클래스(Class)는 뭘까?

CSS를 배우다 보면 나오는 클래스에 대해 알아봅시다~

클래스란 뭘까?

CSS에서 클래스는 어떨때 사용될까? 다수의 엘리먼트에 스타일을 적용하고자 할때 쓰면 되겠습니다. 가령 특정 문단들을 오렌지톤으로 표시하고자 하는경우랄까? 실제 써보면 이해가 빠를듯 하네요.

HTML 엘리먼트에 클래스 지정하는 방법은 다음과 같습니다. (class 속성을 이용한다.)

<div class="클래스 이름"></div>

CSS에는 요렇게 쓰거나 (엘리먼트 뒤에 점(.)을 붙이고 그다음에 클래스 이름을 씀으로 인해서 클래스에 있는 좀더 특별한 엘리먼트를 선택할 수 있게됩니다.)

div.클래스이름{

color: red;

}

엘리먼트 이름을 빼고 요렇게 써도 됩니다.엘리먼트 이름을 빼고 점(.)만 붙여서 클래스 이름을 쓰면 해당 클래스 내의 모든 멤버에게 스타일을 적용한다는 뜻입니다.

.클래스 이름{

color: red;

}

또는 다음 처럼 콤마(,)로 구분해서 두개이상의 클래스에 쓸 수도 있습니다.

div.profile. blockquote.profile{

color: red;

}

클래스 적용에 순서는?

1. 임의의 선택자가 있으면 그놈이 최고 우선됩니다.

2. 없으면 상속 속성에 따라서 부모의 속성을 따라갑니다. 부모도 없으면 계속 상위 속성을 따라가게 되고요.

3. 아무런 속성 값을 찾을 수 없으면 브라우저 기본값으로 보여줍니다.