<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test003.html</title>
<style type="text/css">
/* 캐스캐이딩 : 종속된 것을을 다른 타입으로 정의해주지 않으면 기본값으로 설정됨 */
p {color: green; font-size: 16pt; font-weight: bold;}
p.type1{color: yellow;}
p.type2{color: blue;}
/* 참고 : 선택자 없이 .클래스타입 으로 정의하면 포함되지 않은 속성은 기본값으로 설정됨 */
.type3{color: black; font-size: 27pt;}
</style>
</head>
<body>
<div>
<h1>class 를 선택자로 활용</h1>
<hr>
</div>
<div>
<p>그냥 p태그만 페이지에 적용할 경우 이렇게 확인된다.</p>
<p class="type1">하지만, 클래스를 사용할 경우 이렇게 확인된다.</p>
<p class="type2">또한, 다른 클래스를 사용할 경우 이렇게 확인된다.</p>
<p class="type1">여기서는 이렇게</p>
<p class="type2">저기서는 저렇게</p>
<p class="type3">거기서는 그렇게</p>
<span class="type3">span 태그영역에서는 이렇게</span>
</div>
</body>
</html>클래스선택자로 style 먹여보기..!
설정해주지 않은 다른 값들은 기본값으로 적용됨~!
728x90
'WEB Archive' 카테고리의 다른 글
| [HTML] CSS 구성 살펴보기 (0) | 2024.08.20 |
|---|---|
| [HTML] CSS - html태그를 선택자로 활용해보기 (0) | 2024.08.20 |
| [HTML] CSS - id를 선택자로 활용해보기 (0) | 2024.08.20 |
| [HTML] CSS - 문장 구조 선택자 활용 (0) | 2024.08.20 |
| [HTML] CSS - 엘리먼트에 직접 스타일 적용 (0) | 2024.08.20 |
댓글