스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법

 

환경: Eclipse Mars

 

태그나 ID, CLASS 에 스타일을 동시에 적용할 수 있습니다. 동일한 스타일 속성일 경우 여러 군데 반복적으로 작성할 필요는 없겠죠. 쉼표로 태그나 클래스, 아이디를 나열해서 붙여 주시면 됩니다. 아래 샘플을 통해서 사용법을 알아 보겠습니다.

 

1. 여러 태그에 스타일 동시 적용하는 방법

 

중복되는 스타일 내용을 태그, ID, CLASS 적용하기 위해서는 쉼표를 이용합니다. 쉼표로 적용하고 싶은 만큼 나열 하시면 됩니다. 그리고 태그 뿐만 아니라 ID 와 클래스를 혼합해서 동시에 적용이 가능합니다.

 

<style type="text/css">

#클래스1, #클래스2 { 속성: ; }

.아이디1, .아이디2 { 속성: ; }

태그1, 태그2 { 속성: ; }

#클래스, .아이디, 태그 { 속성: ; }

</style>

 

아래 샘플은 2개의 클래스와 <p> 태그에 동일한 스타일을 적용한 것입니다. 이렇게 동일한 스타일 값을 쉼표로 연결해서 사용하지 않고 중복해서 적는 다면 복잡하기만 하고 비효율적입니다.   

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
	}
	.box1, .box2, p{ 
		width: 300px; 
		height: 100px; 
		border: 2px solid;
		margin: 10px;
		background-color:yellow;
	}
</style>
</head>
<body>
	<div class="box1">
		첫 번째 스타일
	</div>
	<div class="box2">
		두 번째 스타일
	</div>
	<p>
		세 번째 태그에 적용한 스타일
	</p>
</body>
</html>

 

스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법

 

2. 특정 태그에 적용하는 방법

 

태그와 클래스, 아이디를 동시에 사용하면 특정 태그에만 스타일을 적용할 수가 있습니다. 이것은 아주 유용하며 자주 사용하게 되는 방법입니다. 문법은 다음과 같습니다.

 

<style type="text/css">

태그이름, #클래스 { 속성: ; 속성: }

태그이름.아이디 { 속성: ; 속성: }

</style>

 

예제처럼 태그와 바로 뒤에 클래스명을 넣게 되면 div 에서 class 명이 box1 인 것만 적용이 됩니다. 다른 p 태그에 동일한 클래스 명을 넣었지만 반영이 되지 않습니다.  이렇게 특정 태그에만 클래스나 아이디를 반영하고 싶다면 아래 샘플처럼 사용하시면 됩니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
	}
	div.box1{ 
		width: 300px; 
		height: 100px; 
		border: 2px solid;
		margin: 10px;
		background-color:yellow;
	}
</style>
</head>
<body>
	<div class="box1">
		특정 태그에 적용된 스타일 
	</div>
	<p class="box1">
		같은 아이디를 적용하더라도 	반영이 안됨
	</p>
</body>
</html>

스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법

 

 

Posted by 녹두장군