스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법

스타일시트 CSS

스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법

 

환경: Eclipse Mars

 

태그에 스타일 시트를 지정하면 페이지에 있는 모든 태그에 동일한 디자인이 적용됩니다. 만약 특정 태그에만 디자인을 적용하고 싶다면 태그와 클래스, 아이디를 조합해서 선택자를 만들어야 합니다. 이런 선택자는 태그끼리 조합해서 만들 수도 있습니다. 오늘은 태그와 아이디, 클래스를 조합해서 CSS 를 적용하는 방법에 대해 알아 보겠습니다. 

 

하위 태그에 디자인을 적용하는 방법은 여러가지 입니다. 태그끼리의 조합, 태그와 클래스, 아이디 조합 등 아주 다양한 형태가 가능합니다. 주의할 것은 태그와 태그를 조합할 때 사이에 공백을 둬야 합니다. 태그와 클래스 혹은 아이디 사이에는 “#” “.” 같은 특수문자가 있기 때문에 띄우지 않습니다. 조합 방식은 다음과 같습니다. 

 

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

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

태그.클래스 { 속성1: 1; 속성2: 2; }

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

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

 

위의 형태를 참고해서 5가지 CSS 조합을 만들어 보았습니다. 아래에는 5가지 조합의 스타일이 적용될 수 있도록 HTML 을 작성하였습니다. 각 조합이 정확하게 일치하는 태그에만 스타일이 적용되겠죠. 일치하는 선택자가 없다면 자신을 포함하고 있는 컨테이너에 적용된 스타일을 따릅니다.  

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e78e52;
	}
	div p{ background-color:yellow; }
	div.box1{ background-color:limegreen; }
	div#box2{ background-color:lightslategray; }
	div p#box3{ background-color:blue; }
	div#box4 p{ background-color:red; }
</style>
</head>
<body>
	<div>
		<p>div p 조합에 적용된 스타일</p>
	</div>
	<div class="box1">
		div.box1 조합에 적용된 스타일
	</div>
	<div id="box2">
		div#box2 조합에 적용된 스타일
	</div>
	<div>
		<p id="box3">div p#box3 조합에 적용된 스타일</p>
	</div>
	<div id="box4">
		<p>div#box p 조합에 적용된 스타일</p>
	</div>
</body>
</html>

 스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법

 

샘플에 있는 2개의 div 태그에는 어떤 선택자가 적용될까요? 모두 div p 가 적용됩니다. 태그에 대한 선택자를 먼저 찾고 일치하는 것이 없다면 외부의 div class, id 조합을 찾습니다. 이것도 없다면 div 에만 적용된 css 를 찾겠죠.

스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법

 

스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법

 

div p 를 주석 처리 하게 되면 그림처럼 다른 결과를 얻게 됩니다. 첫 번째 div 는 전혀 일치하는 것이 없기 때문에 div { background-color:red; } 을 적용하고, 두 번째는 div class 조합이 일치하는 것이 있기 때문에 div.box1 을 적용합니다. 

스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법

 

스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법

 

Posted by 녹두장군