클라스를 통한 CSS 속성 적용 방법 ✔️

지난 글에서는 HTML 문서의 기본 요소에 CSS를 적용하는 방법에 대해 살펴봤습니다. 선택자를 사용하여 간단하게 문서의 h1 태그나 p 태그에 CSS를 적용할 수 있었는데요.

 

각 요소마다 서로 다른 스타일을 적용하려면 어떻게 해야 할까요? 이 때는 HTML 요소에 클라스(class)를 부여하여 CSS를 적용할 수 있습니다.

CSS와 클라스

다음과 같은 목록이 있다고 해보겠습니다. 이 중에서 두 번째 목록에만 특정한 스타일(오렌지 색으로 변경)을 부여하고 싶다면 어떻게 해야 할까요?

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

다음과 같이 두 번째 요소에 클라스 속성을 부여하면 됩니다.

<ul>
    <li>Item One</li>
    <li class="decoration">Item Two</li>
    <li>Item Three</li>
</ul>

다음으로 CSS에서 해당 클라스를 선택하여 속성을 부여합니다. . 이후에 해당 클라스 이름을 입력하면 문서 내의 동일한 모든 클라스를 선택합니다.

.decoration {
    color: orange;
}

이제 브라우저를 새로고침하면 두 번째 목록만 주황색으로 변경된 것을 확인할 수 있습니다.

특정 요소의 클라스에 속성 부여하기

만약 다음과 같이 li 태그와 span 태그에 동일한 클라스 이름인 decoration이 존재한다고 해보겠습니다. 각각에 서로 다른 CSS를 적용하려면 어떻게 해야 할까요?

<ul>
    <li>Item One</li>
    <li class="decoration">Item Two</li>
    <li>Item Three</li>
</ul>

<span class="decoration">Blue Storage</span>

이때는 li.decoration과 span.decoration을 따로 선택하면 됩니다.

li.decoration {
    color: orange;
}

span.decoration {
    color: blue;
}

결과적으로 목록의 두 번째 아이템은 오렌지 색으로, 본문의 Blue Storage의 색은 파랑색으로 변경됩니다.

심화 학습1

그리고.. 공부하며 알게 된 것인데 이런 것도 되는 군요. h1 태그 이후에 나오는 문단 p에만 특정 속성을 적용하는 방법입니다.

<h1>Hello World!</h1>
<p>Welcome to my Blog!</p>
<p>Thank you.</p>

h1 + p {
    color: skyblue;
}

이렇게 하면 제목 이후 첫 번째 문단에만 skyblue 속성이 부여됩니다.

심화 확습2

<article> 안의 <p> 태그 내 <span>을 선택할 수도 있습니다.

article p span { ... }

앞의 방식을 활용하여 h1 이후 ul 바로 다음의 p를 선택할 수도 있습니다.

h1 + ul + p { ... }