CSS 선택자 종류
1. 태그 선택자
2. id 선택자
3. class 선택자
태그 선택자
해당 태그에 스타일을 적용한다.
태그이름{
속성1: 값1;
속성2: 값2;
}
<html>
<head>
<style>
h3{
color: black;
font-size: 30px;
}
p{
color: gray;
}
</style>
</head>
<body>
<h3>오늘의 날씨</h3>
<p>구름이 많고 오후에 비가 내린다.</p>
</body>
</html>
id 선택자
해당 id 속성 값을 갖는 태그에 스타일을 적용한다.
원칙적으로 하나의 객체에만 스타일을 적용할 수 있다.
#id값{
속성1: 값1;
속성2: 값2;
}
<html>
<head>
<style>
#box_m{
background-color: blue;
width: 160px;
height: 40px;
}
</style>
</head>
<body>
<div class='box'>box 클래스</div>
<div id='box_m'>box_m 아이디</div>
</body>
</html>
class 선택자
해당 class 속성 값을 갖는 태그에 스타일을 적용한다.
여러 객체에 스타일을 적용할 수 있다.
.class값{
속성1: 값1;
속성2: 값2;
}
<html>
<head>
<style>
.box{
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class='box'>box 클래스</div>
<div class='box'>box 클래스</div>
</body>
</html>
'HTML&CSS' 카테고리의 다른 글
| [CSS] 목록 관련 속성 :: list-style-type, list-style-image, list-style-position, list-style (0) | 2020.05.03 |
|---|---|
| [CSS] HTML에 CSS를 적용하는 방법 (0) | 2020.04.19 |