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

[CSS 기초] 클래스 선택자

 

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

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

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


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

클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다. 예를 들어
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)을 변화시킨다.

,