여러 조건에 따라 적용

개요

태그이름#아이디 { 속성1:속성값; 속성2:속성값; }
태그이름.클래스명 { 속성1:속성값; 속성2:속성값 }

위와 같은 CSS 설정은 해당 아이디 또는 클래스명을 가진 특정 태그에만 적용 할 수 있다. (태그이름이 다르면 사용 불가)

사용법

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

예제

<html>
<head>
<style>
	div#m_box{ width:500px; height:150px; border: 1px solid yellow }
	div.box{ background-color:blue; }
</style>
</head>
<body>
	<div id="m_box">m_box 아이디의 div 입니다.</div>
	<div class="box">box 클래스의 div 입니다.</div>

	<span id="m_box">m_box 아이디의 span 입니다.</span>
	<span class="box">box 클래스의 span 입니다.</span>
</body>
</html>
출력 결과:
m_box 아이디의 div 입니다.
box 클래스의 div 입니다.
m_box 아이디의 span 입니다. box 클래스의 span 입니다.