개념 창고/HTML & CSS
[CSS] id 속성과 class 속성의 차이?
달마루
2024. 2. 1. 02:59
한줄로 정리하면
ID는 한 요소에만 사용이 가능하고,
CLASS는 여러 요소에 중복 사용이 가능합니다.
고유하게 전체 페이지에서 단 한가지에만 적용이 목적이라면
구분이 가능하지만, 반복이 불가능한 ID를 사용할 수 있고,
중복으로 전체 페이지에서 반복적으로 적용이 목적이라면
구분이 가능하지만, 반복이 가능한 CLASS를 사용하면 됩니다.
CLASS는 반복적으로 쓰이는 유형들을 동일한 CLASS로 분류하여
편하게 관리할 수 있습니다.
CSS에서의 사용법
CSS에서 사용하기 위해서는
#id
.class
형식으로 사용하면 됩니다.
id 속성은 유일하기 때문에 클래스보다 우선적으로 적용됩니다.
표로 정리합니다.
| id | class |
| # 으로 선택 | . 으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소가 많음 |
| 특정 요소에 이름을 붙일 때 사용 | 스타일의 분류(classification)에 사용 |
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id, class 적용 예제</title>
<style>
/* id 사용시 id 앞에 #을 붙여 사용 */
#footer {
clear: both;
background-color: #333333;
color: white; /* 흰색 텍스트 예제 추가 */
padding: 10px; /* 패딩 추가 */
}
/* class 사용시 class 앞에 .을 붙여 사용 */
.box {
text-align: center;
background-color: #333333;
color: white; /* 흰색 텍스트 예제 추가 */
padding: 10px; /* 패딩 추가 */
}
</style>
</head>
<body>
<div class="box">
<!-- box의 1번째 class -->
<p>This content is in a box 1.</p>
</div>
<div class="box">
<!-- box의 2번째 class -->
<p>This content is in a box 2.</p>
</div>
<div class="box">
<!-- box의 3번째 class -->
<p>This content is in a box 3.</p>
</div>
<div id="footer">
<!-- footer의 유일한 사용처-->
<p>This is the footer.</p>
</div>
</body>
</html>