Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법

 

이전에는 태그에 스타일을 셋팅 했기 때문에 모든 태그는 동일한 설정 값이 적용됩니다. 그럼 동일한 태그에 다른 설정 값을 적용하려면 어떻게 해야 할까요? 그 때는 CLASS ID 속성을 사용하시면 됩니다. 클래스와 아이디의 차이점은 클래스는 HTML 문서에 여러 번 사용이 가능하지만 아이디(ID) 는 한 번만 사용이 가능합니다.

 

¤ CLASS 속성 사용하기

 

CLASS “.” 다음에 클래스명을 넣고 중괄호 안에 속성과 값을 셋팅 하면 됩니다. 클래스 앞에 태그가 있다면 해당 태그에만 스타일 적용을 받게 됩니다. 아래 소스는 클래스명 box 을 만들어서 div 에 적용한 결과 입니다. box 앞에 콤마가 있으므로 클래스입니다.

 

<style type="text/css">

           .클래스명{

                     속성:;

           }

</style>

 

<태그 class="클래스명"></태그>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
	}
	.box{ 
		width:300px; 
		height:100px; 
		background-color:yellow;
	}
</style>
</head>
<body>
	<div class="box">
		CLASS 속성 사용하는 방법 
	</div>
</body>
</html>

 

 

스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법

 

¤ ID 속성 사용하기

 

ID 속성은 클래스와 달리 “#” 을 사용합니다. ID CLASS 와 달리 전체 문서에 한번만 사용이 가능합니다. 그래서 특정 태그를 꾸밀게 아니라면 주로 CLASS 를 사용합니다. 아래 샘플처럼 box 앞에 콤마가 아닌 “#” 을 넣게 되면 ID 가 됩니다. 

 

<style type="text/css">

           #아이디명{

                     속성:;

           }

</style>

 

<태그 id="아이디명"></태그>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
	}
	#box{ 
		width:300px; 
		height:100px; 
		background-color:yellow;
	}
</style>
</head>
<body>
	<div id="box">
		ID 속성 사용하는 방법 
	</div>
</body>
</html>

 

스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법

 

반응형
Posted by 녹두장군

댓글을 달아 주세요