로그인  회원가입  
인포앤북 홈

3-4. 전체/그룹 선택자

■ 전체 선택자 : *

전체 선택자(Universal Selector)는 웹 페이지 내에 있는 전체 HTML 요소 전체를 선택하는 데 사용됩니다. 다음 예제를 통하여 전체 선택자의 사용법을 익혀봅니다.

전체 선택자 사용 예
ex3-5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
{
color: green;
margin: 0;
padding: 0; 
border: solid 1px red;
}
</style>
</head>
<body>
<h3>전체 선택자란?</h3>
<p>CSS에서 전체 선택자는 웹 페이지의 모든 HTML 요소들을 선택한다.</p>
</body>
</html>
ex3-5.html의 실행 결과
■ 그룹 선택자

그룹 선택자(Group Selector)는 다양한 선택자를 그룹으로 묶는 데 사용됩니다. 그룹 선택자에서 각 선택자는 콤마(,)로 구분됩니다.

그룹 선택자 사용 예
ex3-6.html
<style>
h2, h3 { text-align: center; text-decoration: underline; }
{ line-height: 150%; }
.blue, ul { color: blue;}
</style>
</head>
<body>
<h2>로이터 사진전</h2>
<h3>세상의 드라마를 기록하다</h3>
<p>세계 3대 통신사 중 하나인 <span class="blue">로이터 통신사의 주요 사진 작품</span>을 소개하는 사진전을 
        예술의 전당 한가람 미술관에서 개최한다.</p>
    <p>이 사진전은 특별히 본사의 협조로 이루어진 것으로 <span class="blue">로이터 소속 기자가 엄선한 
        400점</span>을 국내에서 선보이는 전시이다.</p>
<ul>
<li>장소 : <span>예술의 전당 미술관</span></li>
<li>기간 : 2025.3 ~ 2025.5</li>
<li>입장료 : 12,000원</li>
</ul>
</body>
ex3-6.html의 실행 결과