티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p{color:green; font-size:12pt; font-weight:bold}
p.type1{color : red; }
p.type2{color : blue;}
.type3{color : yellow}
</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>span태그 영역</span>
</div>
</body>
</html>
p.클래스이름
-><p>태그들의 스타일 조정 가능
But
.클래스이름
->이경우 <p>태그가아닌 class이름 모두 포함된다는 의미를 가진다.
id는 1개여야 하지만
class는 여러개(동일한 이름 )가 와도 상관없다
'Web(국비) > HTML & CSS' 카테고리의 다른 글
| HTML - 국비 자식,자손 선택자 css (0) | 2019.10.16 |
|---|---|
| HTML - 국비 id선택자 css활용 (0) | 2019.10.16 |
| HTML-국비 form의 중요성 및 button을 통한value와 submit 차이 (0) | 2019.10.16 |
| HTML - 국비 radio,label활용 (0) | 2019.10.16 |
| HTML - input태그안 name에 대해.. (0) | 2019.10.16 |