[ id & class ]
- id :
id의 특징은, '고유한' 속성을 가진다는 것이다. id는 여러 번 사용 불가능하고, 특정 요소에 한 번만 사용한다.
css 에서 실제 사용은, #[id명] 으로 사용한다. - class :
class는, id와 다르게 여러 번 사용할 수 있다. 즉,여러 요소가 공통된 class를 갖도록 할 수 있다.
이로 인해, HTML 특정 요소에 공통된 CSS를 적용하고 싶을 때, class 를 활용한다.
css 에서 실제 사용은, .[class명] 으로 사용한다.
다음은 class 를 활용한 사례이다.
tomato 라는 class를 공통으로 갖고 있다.
<!DOCTYPE html>
<html lang ="ko">
<head>
<title>practice1</title>
<style>
body{
margin: 20px;
}
span{
background-color: green;
padding: 5px 10px;
margin: 10px;
}
.tomato{
background-color: tomato;
color: white;
padding: 5px 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<span>Hello</span>
<span class="tomato">Hello</span>
<span>Hello</span>
<span class="tomato hello honey">Hello</span>
<span>Hello</span>
<span class="tomato">Hello</span>
</body>
</html>
Strengthen the core.