안녕하세요! 노코딩입니다 😊
이번 글에서는 HTML의 클래스(Class)와 ID 구분자에 대해 알아볼 거예요. 각각의 역할과 사용법을 쉽게 이해할 수 있도록 비유와 함께 설명해드릴게요.
1. Class와 ID의 차이점 – HTML과 CSS에서의 역할
클래스와 ID는 HTML과 CSS에서 각 요소를 식별하고, 특정 스타일을 적용하는 데 사용됩니다. 클래스와 ID를 구분해서 사용하는 것이 중요한 이유는, 각각의 목적과 역할이 다르기 때문이에요.
Class의 개념
- 클래스(Class)는 여러 HTML 요소에 공통으로 적용할 스타일을 지정할 때 사용해요.
- 클래스는 쉽게 말해, 동아리 같은 개념이에요. 같은 동아리 이름을 가진 사람들은 모두 같은 스타일을 공유할 수 있죠.
- CSS에서 클래스를 선택할 때는 .(점)을 붙여서 선택해요. 예를 들어, 클래스 이름이 test 라면, .test 로 선택합니다.
ID의 개념
- ID는 특정한 하나의 HTML 요소에 적용할 때 사용해요. 고유한 번호처럼, 한 문서 내에서 같은 ID를 반복해서 사용하면 안 돼요.
- ID는 주민등록번호처럼 한 번만 사용할 수 있는 식별자라고 생각하면 돼요.
- CSS에서 ID를 선택할 때는 #(샵)을 붙여서 선택해요. 예를 들어, ID 이름이 test라면, #test로 선택합니다.
2. 클래스와 ID를 사용하는 예시
HTML 코드:
<!-- 클래스와 ID 사용 예시 -->
<div class="container">
<h1 id="main-title">나만의 게시판</h1>
<p class="description">여기는 나만의 게시판입니다. HTML과 CSS를 사용해 만들었어요.</p>
<button class="btn">글 작성</button>
<button id="special-btn">특별한 글 작성</button>
</div>
- 클래스를 사용한 요소: <div class="container">, <p class="description">, <button class="btn">
- ID를 사용한 요소: <h1 id="main-title">, <button id="special-btn">
3. CSS에서 클래스와 ID를 선택하기
CSS 코드:
/* 클래스 선택자 */
.container {
width: 80%;
margin: 0 auto;
background-color: #f9f9f9;
}
.description {
font-size: 16px;
color: #666;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
}
/* ID 선택자 */
#main-title {
font-size: 24px;
color: #333;
}
#special-btn {
background-color: #FF5733;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
}
- 클래스 선택자는 .(점)을 붙여서 .container, .description, .btn처럼 사용해요. 이 클래스들은 같은 이름의 요소들을 모두 선택해요.
- ID 선택자는 #(샵)을 붙여서 #main-title, #special-btn처럼 사용해요. ID는 오직 하나의 요소에만 적용됩니다.
4. 클래스와 ID의 차이점 비유
- 클래스는 여러 사람이 같은 동아리 유니폼을 입는 것과 같아요. 같은 이름을 가진 클래스는 여러 요소에 동시에 스타일을 적용할 수 있죠.
- ID는 특정 사람에게만 부여된 주민등록번호와 같아요. 한 명의 사람에게만 고유하게 부여되는 번호라, 한 번만 사용해야 해요.
5. HTML과 CSS의 연결 방식 정리
HTML에서 클래스와 ID를 통해 요소들을 정의하고, CSS에서는 이를 선택해서 스타일을 지정합니다.
- 클래스는 **.**을 사용해 여러 요소에 적용할 수 있고,
- ID는 **#**을 사용해 고유한 요소 하나에만 적용됩니다.
이제 클래스와 ID의 역할을 확실하게 이해하게 되었을 거예요. 앞으로 HTML과 CSS를 더 자유롭게 다룰 수 있겠죠?
6. 전체코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CLASS와 ID의 설명!</title>
<style>
/* 클래스 선택자 */
.container {
width: 80%;
margin: 0 auto;
background-color: #f9f9f9;
}
.description {
font-size: 16px;
color: #666;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
}
/* ID 선택자 */
#main-title {
font-size: 24px;
color: #333;
}
#special-btn {
background-color: #FF5733;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<!-- 클래스와 ID 사용 예시 -->
<div class="container">
<h1 id="main-title">나만의 게시판</h1>
<p class="description">여기는 나만의 게시판입니다. HTML과 CSS를 사용해 만들었어요.</p>
<button class="btn">글 작성</button>
<button id="special-btn">특별한 글 작성</button>
</div>
</body>
</html>
마무리
이번 글에서는 HTML의 클래스와 ID의 차이를 이해하고, CSS에서 어떻게 선택해서 스타일을 적용하는지 알아봤어요.
클래스와 ID를 제대로 이해하면, 더 효율적이고 깔끔한 코드를 작성할 수 있답니다!
지금은 보시는 분도 적고 댓글도 적지만, 제가 만약 유명해진다면 여러분은 "나 이때부터 이 사람 알았다"라고 자랑하실 수 있을 거예요!
지금부터라도 이웃 추가와 댓글 많이 남겨주시면, 한 분 한 분 전부 기억하겠습니다! 여러분과 함께 성장하고 싶어요
어떠한 경로로 들어왔든 이 글을 본 모두는 하루의 시작, 중간, 마무리일 텐데 행복하셨으면 좋겠습니다! 😊
'IT > 프로그래밍' 카테고리의 다른 글
| HTML 태그 정리 – 이해하고 활용하기 (2) | 2024.10.23 |
|---|---|
| 게시판 기본 틀 만들기 – HTML과 CSS의 기초부터 시작해요! (1) | 2024.10.23 |
| WEB 코딩을 위한 환경 세팅: Notepad++ 다운로드부터 시작! (7) | 2024.10.22 |
| 개발자 취업? 프로그래밍 몰라도 이 블로그만 보면 OK!🔥 (13) | 2024.10.21 |
