'CSS클래스 선택자'에 해당되는 글 1건

[CSS 기초] 클래스 선택자(Class Selector)

 

클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다.

속성값 앞에 .을 붙여 클래스임을 나타냅니다. 예를 들어
.abc

는 class 속성값으로 abc를 갖는 요소를 선택합니다.

클래스 선택자 앞에 아무 것도 없으면

클래스 선택자 앞에 아무 것도 없으면 그 값을 갖는 모든 요소를 선택합니다. 즉 .abc는 *.abc와 같은 의미로
<h1 class="abc">Lorem</h1>
<p class="abc">Lorem</p>

모두 선택합니다.

클래스 선택자 앞에 무언가 있으면

클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다. 예를 들어
p.abc

는 class 값으로 abc를 갖는 p 요소를 선택합니다. 이렇게 하면
<h1 class="abc">Lorem</h1>

은 선택되지 않고,
<p class="abc">Lorem</p>
는 선택됩니다.

예제 1

class 값으로 abc를 갖는 요소는 파란색으로, class 값으로 xyz를 갖는 ul 요소는 빨간색으로 만드는 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .abc {
        color: blue;
      }
      ul.xyz {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 class="abc">예수사랑</h1>
    <p class="abc def">사랑과 은혜가 풍성하신 하나님</p>
    <ul class="xyz">
      <li>예수님은</li>
      <li>하나님이시다</li>
    </ul>
    <p class="xyz">주님의 사랑과 은혜에 감사드립니다.</p>
  </body>
</html>

 

위 코드를 실행보면 아래와 같습니다.

 

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,