CSS CSS 선택자 - id와 class의 차이
페이지 정보
조회 1회 작성일 26-02-25 23:01
본문
CSS 선택자 - id와 class의 차이
HTML 요소에 스타일을 입히기 위해 이름을 붙이는 두 가지 대표적인 방법입니다.
1. 아이디 (id)
특징: 페이지 내에서 단 하나의 요소에만 고유하게 부여하는 이름입니다. 중복해서 사용할 수 없습니다.
용도: 상단 바(header), 푸터(footer), 로고와 같이 페이지에 딱 하나만 존재하는 중요한 요소를 지정할 때 씁니다.
CSS 기호: 이름 앞에 # (해시)를 붙입니다.
우선순위: 클래스보다 스타일 적용 우선순위가 높습니다.
2. 클래스 (class)
특징: 여러 요소에 중복해서 사용할 수 있는 이름입니다. 하나의 태그에 여러 개의 클래스를 동시에 붙일 수도 있습니다.
용도: 게시글 목록, 버튼 스타일 등 반복적으로 나타나는 여러 요소에 공통된 스타일을 한꺼번에 입힐 때 씁니다.
CSS 기호: 이름 앞에 . (마침표)를 붙입니다.
3. 한눈에 비교하기
구분 | 아이디 (id) | 클래스 (class) |
중복 사용 | 불가능 (고유함) | 가능 (재사용) |
CSS 기호 |
|
|
우선순위 | 높음 (100점) | 낮음 (10점) |
비유 | 사람의 주민등록번호 | 사람의 직업(학생, 의사 등) |
4. 간단 예제 코드
<style>
/* CSS 부분 */
#main-title {
color: red;
text-align: center;
}
.content {
font-size: 16px;
line-height: 1.5;
}
.blue-text {
color: blue;
}
</style>
HTML
<h1 id="main-title">오늘의 뉴스</h1>
<p class="content">첫 번째 뉴스 내용입니다.</p>
<p class="content blue-text">두 번째 뉴스 내용입니다.</p>
|
외부 스타일시트 가져오기
<link rel="stylesheet" href="style.css">
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>외부 스타일시트 연결</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="main-title">오늘의 뉴스</h1>
<p class="content">첫 번째 뉴스 내용입니다.</p>
<p class="content blue-text">두 번째 뉴스 내용입니다.</p>
</body>
</html>
5. 요약: 언제 무엇을 쓸까?
특정한 하나의 구역을 명확히 구분하고 싶다면
id를 사용하세요.디자인 요소를 여러 곳에서 돌려쓰고 싶다면
class를 사용하세요.실무 팁: 대부분의 스타일 작업은 재사용성이 높은
class를 위주로 사용하고,id는 자바스크립트 연결이나 페이지 내 이동(앵커) 목적으로 주로 활용하는 추세입니다.
ID와 Class의 심화 이해
1. 이름 짓기 규칙 (Naming Convention)
ID와 Class 이름을 지을 때는 전 세계 개발자들 사이의 약속이 있습니다.
영문자, 숫자, 하이픈(
-), 언더바(_)만 사용 가능합니다.숫자로 시작할 수 없습니다. (예:
1st-content(X) →content-1st(O))대소문자를 구분하지만, 보통 소문자로 시작하는 것이 관례입니다.
2. 스타일 우선순위 (점수 시스템)
동일한 태그에 ID와 Class 스타일이 충돌하면 누가 이길까요? CSS는 점수가 높은 스타일을 먼저 적용합니다.
선택자 종류 | 점수 | 비유 |
태그 선택자 ( | 1점 | 보병 |
클래스 선택자 ( | 10점 | 기사 |
아이디 선택자 ( | 100점 | 장군 |
인라인 스타일 ( | 1000점 | 국왕 |
핵심: 아무리 많은 클래스를 겹쳐 써도, 단 하나의 ID 스타일을 이길 수 없습니다.
3. 다중 클래스 (Multiple Classes)
ID는 오직 하나만 가질 수 있지만, 클래스는 공백을 구분자로 여러 개를 가질 수 있습니다. 이를 통해 스타일을 조립하듯 사용합니다.
HTML
<button class="btn primary-red">확인</button>
<button class="btn primary-blue">취소</button>
4. 실무에서의 활용 (Best Practice)
ID를 지양하는 이유: ID는 점수가 너무 높아서 나중에 스타일을 덮어쓰기가 매우 어렵습니다. 그래서 최근 웹 디자인 트렌드는 거의 모든 스타일을 클래스(
.)로 작업하는 것을 권장합니다.ID의 진짜 용도:
자바스크립트 연동: 특정 요소를 정확히 집어내어 동작(클릭 이벤트 등)을 줄 때.
앵커(Anchor) 기능:
href="#section1"처럼 클릭 시 해당 위치로 화면을 이동시킬 때.
5. 요약 코드 실습
CSS
/* 10점 */
.error-text {
color: red;
}
/* 100점 (클래스보다 우선 적용) */
#special-notice {
- 이전글CSS의 우선순위 & !important 설명 26.02.25
- 다음글스타일 시트 (CSS) 이해하기 26.02.25