id,class 속성에 따라 적용

개요

태그에서 설정한 id나 class에도 스타일을 줄 수 있다.

id에 줄 경우 #아이디{ 속성1:속성값; 속성2:속성값; }
class에 줄 경우 .클래스명{ 속성1:속성값; 속성2:속성값 }

처럼 작성한다.

id의 경우는 원칙적으로 하나의 객체에만 적용 되며, class의 경우에는 여러 객체에 적용된다.

사용법

#m_box{ width:500px; height:300px; }
.box{ background-color:blue; }

예제

<html>
<head>
<style>
	#m_box{ width:200px; height:100px; border: 1px solid green }
	.box{ background-color:#09C; width:80px; height:40px;}
</style>
</head>
<body>
	<div class="box">box 클래스</div>
	<div class="box">box 클래스</div>
	<div id="m_box">m_box 아이디</div>
</body>
</html>
출력 결과:
box 클래스
box 클래스
m_box 아이디