HTML 및 CSS에서의 ID와 Class의 차이(면접용)
HTML 및 CSS에서의 ID와 Class의 차이
HTML과 CSS에서 ID와 Class는 요소에 스타일을 적용하는 데 사용되는 두 가지 주요 속성입니다. 이 두 가지 속성은 유사하면서도 목적과 사용법에 있어서 다소 차이가 있습니다.
오늘은 HTML및 CSS에서 ID와 Class의 차이를 알아보도록 하겠습니다.
ID (식별자)
특징:
문서 내에서 단 하나의 요소에 대해서만 사용 가능합니다. 즉, 고유해야 합니다. HTML 문서 내에서 동일한 ID를 가진 요소는 없어야 합니다. CSS에서 ID는 #으로 시작하며, 선택자로 사용됩니다.
활용 예시
한 페이지 내에서 유일한 요소에 스타일을 적용하고자 할 때 사용됩니다. 주로 페이지의 특정 섹션이나 구성 요소에 대해 유일한 식별자를 부여할 때 활용됩니다.
예시 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID 예시</title>
<style>
#unique-element {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<p id="unique-element">이 요소에만 스타일이 적용됩니다.</p>
<p>다른 요소들은 여기에 영향을 받지 않습니다.</p>
</body>
</html>
Class (클래스)
특징
여러 요소에 동일한 클래스를 적용할 수 있습니다. 즉, 하나의 요소에 여러 클래스를 지정할 수 있습니다. HTML 문서 내에서 동일한 클래스를 가진 요소가 여러 개 존재할 수 있습니다. CSS에서 Class는 .으로 시작하며, 선택자로 사용됩니다.
활용 예시
스타일을 공유하거나 특정한 그룹을 만들고자 할 때 사용됩니다. 반복되는 스타일을 일괄적으로 적용하고자 할 때 유용합니다.
예시 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class 예시</title>
<style>
.shared-style {
background-color: lightgray;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="shared-style">이 요소에 스타일이 적용됩니다.</div>
<p class="shared-style">다른 요소들도 동일한 스타일을 가집니다.</p>
</body>
</html>
어떤 것을 사용해야 할까?
ID (식별자): 한 페이지 내에서 유일한 요소에 스타일을 적용하고자 할 때 사용됩니다. Class (클래스): 여러 요소에 동일한 스타일을 적용하고자 할 때 사용됩니다. 또한, 여러 요소를 그룹으로 묶어 스타일을 적용하거나 JavaScript와 같은 스크립트에서 요소를 선택하는 데에도 사용됩니다.
이러한 ID와 Class의 차이를 이해하고 적절히 활용함으로써 HTML 및 CSS를 보다 효과적으로 관리하고 유지보수할 수 있습니다.