CSS 강좌 /선택자 / 전체 선택자(Universal Selector)


전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다.

예를 들어
* {
  color: blue;
}

는 모든 요소의 색을 파란색으로 만듭니다.

다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉,
*.abc { color: blue; }
.abc { color: blue; }

는 같은 결과를 만듭니다.

예제

모든 요소의 글자 모양을 기울임꼴로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>대한민국</h1>
    <p>서울특별시</p>
    <ul>
      <li>강남구</li>
      <li>용산구</li>
    </ul>
  </body>
</html>

 

위코드 값의 결과는 다음과 같습ㄴ다.

 


               

블로그 이미지

itworldkorea

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

,

오늘은 CSS강좌의 전체 선택자(Universal Selector)에 관하여 학습합니다.
 


전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다.

별표(*)로 나타냅니다.

예를 들어
* {
  color: blue;
}

는 모든 요소의 색을 파란색으로 만듭니다.

다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉,
*.abc { color: blue; }
.abc { color: blue; }

는 같은 결과를 만듭니다.

예제를 통해서 알아보겠습니다.

모든 요소의 글자 모양을 기울임꼴로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>Lorem</h1>
    <p>Ipsum</p>
    <ul>
      <li>Dolor</li>
      <li>Amet</li>
    </ul>
  </body>
</html>

 

위코드의 결과는 다음과 같습니다.

 

 


블로그 이미지

itworldkorea

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

,