[HTML+CSS] 클래스(class) 와 아이디(id) 선택자

[HTML+CSS] 클래스(class) 와 아이디(id) 선택자 - travelbeeee

2020. 4. 6. 15:10

안녕하세요, 여행벌입니다.

오늘은 클래스(class), 아이디(id) 선택자에 대해서 포스팅해보겠습니다.

클래스(class) 아이디(id) 선택자

클래스와 아이디 선택자 모두 특정 요소를 대상으로 스타일을 적용하기 위한 선택자입니다. 둘의 차이는 문서 안에 반복해서 쓰이냐 안쓰이냐 입니다. 아이디(id) 선택자는 문서 안에 단 한 번만 사용해야 되고, 클래스(class) 선택자는 문서 안에 여러 번 사용해도 됩니다. 아이디(id) 선택자도 문서 안에 여러 번 사용해도 스타일을 적용할 수 있습니다. 하지만, 아이디(id) 선택자는 문서 안에 단 한 번만 사용하기로 사회적 '약속' 을 했기 때문에 꼭꼭 문서에 단 한 번만 사용해야 합니다. 반대로 클래스(class) 선택자는 반복해서 사용해도 되기 때문에 문서 안에서 여러 번 반복해서 사용해도 문제가 없습니다.

아이디(id) 사용 방법

<태그 id="id명"> </태그>

아이디(id)는 태그 안에 id="아이디명" 으로 값을 부여할 수 있습니다.

스타일을 적용하기 위해서는 #아이디명 을 이용하면 됩니다.

<style>
#아이디명 { 속성 : 속성값; }
</style>

클래스(class) 사용 방법

<태그 class="class명"> </태그>

클래스(class)는 태그 안에 class="클래스명" 으로 값을 부여할 수 있습니다.

스타일을 적용하기 위해서는 .클래스명 을 이용하면 됩니다.

<style>
.클래스명{ 속성 : 속성값; }
</style>

클래스(class) 와 아이디(id) 우선순위

클래스와 아이디의 우선순위는 아이디가 더 높습니다. 따라서, 동일한 태그에 클래스와 아이디를 이용해서 서로 다른 스타일을 적용하면 아이디로 적용한 스타일이 적용됩니다.

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		body{
			background-color : black;
		}
		p{
			font-size : 3em;
		}
		#testId{
			color : blue;
		}
		.testClass{
			color : red;
		}
	</style>
</head>
<body>
	<p class="testClass" id="testId">클래스는 빨간색, 아이디는 파란색 적용</p>
</body>
</html>

동일한 p태그에 "testClass"라는 class와 "testId"라는 id 를 부여했습니다. 그 후, class 선택자를 이용해 글씨 색깔을 빨간색으로, id 선택자를 이용해 글씨 색깔을 파란색으로 부여했습니다.

결과는 위와 같이 id 선택자를 이용한 스타일이 적용된 것을 볼 수 있습니다.

예시

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		div{
			font-size : 3em;
			border : 1px solid black;
		}
	</style>
</head>
<body>
	<div>블록1</div>
	<div>블록2</div>
	<div>블록3</div>
	<div>블록4</div>
</body>
</html>

다음과 같은 html 태그가 있을 때, 우리는 블록1, 블록3 은 너비를 키우고 글씨 색깔을 파란색으로 부여하고 싶고, 블록2, 블록4 는 높이를 키우고 글씨 색깔을 빨간색으로 부여하고 싶다면 블록1, 블록3 / 블록2, 블록4에 각각 동일한 클래스 명을 부여해 한 번에 스타일을 적용하면 됩니다.

<!DOCTYPE html>
<html lang="kr">
<head>
	<meta charset="UTF-8">
	<title>travelbeeee</title>
	<style>
		div{
			font-size : 3em;
			border : 1px solid black;
		}
		.widthBlue{
			width : 500px;
			color : blue;
		}
		.heightRed{
			height : 200px;
			color : red;
		}
	</style>
</head>
<body>
	<div class="widthBlue">블록1</div>
	<div class="heightRed">블록2</div>
	<div class="widthBlue">블록3</div>
	<div class="heightRed">블록4</div>
</body>
</html>

위와 같이 특정 요소에게 스타일을 적용하고 싶을 때 클래스(class)와 아이디(id)를 사용하면 됩니다. 정말 정말 많이 쓰이는 선택자이므로 꼭 둘의 차이점에 대해서 알아두세요!

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 글꼴 관련 스타일 - travelbeeee (0)	2020.04.06
[HTML+CSS] 전체 선택자(*) 와 태그 선택자 - travelbeeee (0)	2020.04.06
[HTML+CSS] 레이아웃을 잡아주는 <div> 태그 (0)	2020.04.05
[HTML+CSS] 드롭다운 목록 만들기 <select> 태그 (0)	2020.04.04
[HTML+CSS] 사용자의 입력을 받는 <input> 태그 (0)	2020.04.03

굳건하게