2일차_HTML_Class , Id

1.Class

HTML의 class는 쉽게 말하면 "이름표" 또는 "그룹 이름"입니다.

예를 들어 학교에서 학생들에게 이름표를 붙이는 것처럼, HTML 요소에도 class라는 이름표를 붙일 수 있습니다.

가장 간단한 예제

<p class="red">안녕하세요.</p>
<p class="red">반갑습니다.</p>
<p>저는 일반 문장입니다.</p>

 

• 첫 번째 <p> → class="red"
• 두 번째 <p> → class="red"
• 세 번째 <p> → class 없음

---

class를 왜 사용할까요?

보통 CSS에서 같은 모양을 여러 곳에 적용하기 위해 사용합니다.

<p class="red">사과</p>
<p class="red">딸기</p>
<p>바나나</p>

CSS

.red {
    color: red;
}

결과

• 사과 → 빨간색
• 딸기 → 빨간색
• 바나나 → 기본색

class="red"가 붙은 요소만 빨간색이 됩니다.

 

---

class 이름은 마음대로 지을 수 있습니다.

예를 들어

class="menu"
class="title"
class="button"
class="student"
class="box"

모두 가능합니다.

다만 알아보기 쉬운 이름을 사용하는 것이 좋습니다.

---

하나의 요소에 여러 개의 class도 가능합니다

HTML

<p class="red big">안녕하세요.</p>

 

CSS

.red {
    color: red;
}

.big {
    font-size: 30px;
}

결과

• 글자색 → 빨강
• 글자크기 → 30px

두 가지 스타일이 모두 적용됩니다.

---

class와 id의 차이

class

같은 이름을 여러 번 사용할 수 있습니다.

<p class="fruit">사과</p>
<p class="fruit">바나나</p>
<p class="fruit">포도</p>

모두 fruit라는 그룹입니다.

---

id

하나만 사용하는 것이 원칙입니다.

<h1 id="main-title">쇼핑몰</h1>

main-title이라는 이름은 페이지 안에서 하나만 사용하는 것이 좋습니다.

---

기억하기 쉬운 핵심

• class = 그룹 이름
• 같은 스타일을 여러 요소에 적용할 때 사용
• CSS에서 .(점)으로 선택

예를 들어

<button class="btn">확인</button>

.btn {
    background: blue;
    color: white;
}

여기서 .btn은 class="btn"인 모든 요소를 선택하여 스타일을 적용합니다.

한 줄 요약

class는 HTML 요소를 같은 그룹으로 묶기 위한 이름표이며, CSS나 JavaScript에서 그 그룹을 쉽게 선택하고 동일한 스타일이나 기능을 적용하기 위해 사용합니다.

2.Id

HTML의 id는 쉽게 말하면 "주민등록번호" 또는 "고유한 이름표"입니다.

class가 그룹 이름이라면, id는 딱 하나의 요소만 구별하는 이름입니다.

---

가장 간단한 예제

<h1 id="title">HTML 공부</h1>

<p>안녕하세요.</p>
<p>반갑습니다.</p>

여기서

• <h1>의 id는 title
• 다른 요소에는 title이라는 id를 사용하지 않는 것이 원칙입니다.

---

왜 사용할까요?

특정 요소 하나만 선택하고 싶을 때 사용합니다.

예를 들어 제목만 파란색으로 만들고 싶다면

 

HTML

<h1 id="title">HTML 공부</h1>

<p>첫 번째 문장</p>
<p>두 번째 문장</p>

CSS

#title {
    color: blue;
}

결과

• HTML 공부 → 파란색
• 첫 번째 문장 → 기본색
• 두 번째 문장 → 기본색

여기서 #title은 id="title"인 요소 하나만 선택합니다.

---

비유로 이해하기

학교를 예로 들어보겠습니다.

학생들이 있습니다.

학생 A
학생 B
학생 C

학생증 번호는 모두 다릅니다.

학생 A → 1001
학생 B → 1002
학생 C → 1003

HTML의 id도 이와 같습니다.

<div id="student1001">학생 A</div>
<div id="student1002">학생 B</div>
<div id="student1003">학생 C</div>

같은 번호를 두 명에게 줄 수 없는 것처럼, 같은 id도 여러 요소에 사용하는 것은 피해야 합니다.

---

id 이름은 마음대로 지을 수 있습니다.

예를 들어

id="header"
id="footer"
id="logo"
id="menu"
id="main"

모두 가능합니다.

의미를 알기 쉬운 이름을 사용하는 것이 좋습니다.

---

JavaScript에서도 많이 사용합니다.

예를 들어 버튼 하나를 클릭했을 때 동작을 만들 수 있습니다.

<button id="btn">클릭</button>

JavaScript

document.getElementById("btn");

이 코드는 id="btn"인 버튼 하나를 찾아옵니다.

---

class와 id의 차이

class

같은 이름을 여러 개 사용할 수 있습니다.

<p class="fruit">사과</p>
<p class="fruit">바나나</p>
<p class="fruit">포도</p>

모두 fruit 그룹입니다.

---

id

같은 이름은 하나만 사용하는 것이 원칙입니다.

<h1 id="title">쇼핑몰</h1>

이 페이지에서는 title이라는 id를 이 요소 하나만 사용합니다.

---

CSS에서 선택하는 방법

class

앞에 .(점)을 붙입니다.

.menu {
    color: red;
}

---

id

앞에 #(샵)을 붙입니다.

#menu {
    color: blue;
}

---

class와 id를 함께 사용할 수도 있습니다.

<button id="loginBtn" class="btn">로그인</button>

여기서

• class="btn" → 버튼들의 공통 스타일을 적용
• id="loginBtn" → 이 버튼 하나만 선택하거나 특별한 기능을 부여

처럼 각각 다른 목적에 사용할 수 있습니다.

---

기억하기 쉬운 핵심

• class = 그룹 이름 (여러 요소가 함께 사용)
• id = 고유한 이름 (한 요소만 사용)
• CSS에서 .은 class, #는 id를 선택
• JavaScript에서는 특정 요소 하나를 찾을 때 id를 자주 사용

한 줄 요약

id는 HTML 요소 하나를 다른 요소와 구별하기 위한 고유한 이름표이며, CSS나 JavaScript에서 특정 요소 하나를 정확하게 선택할 때 사용합니다.


-----------------------------------------------------------------------------------------------------------------------------------------------------------------

3. class와 id를 구별해서 쓰는 이유

"그냥 class만 써도 되지 않나?"라는 생각은 HTML을 처음 배우는 사람들이 거의 한 번씩 합니다.

결론부터 말하면,

CSS만 생각하면 class만으로도 대부분의 작업이 가능합니다.
하지만 HTML은 CSS뿐만 아니라 JavaScript와 문서의 구조(의미)도 함께 고려해서 만들어졌기 때문에 id가 따로 존재합니다.

1. CSS만 보면 class로도 충분하다.

예를 들어 버튼 하나만 빨간색으로 만들고 싶다면

<button class="red">삭제</button>

.red {
    color: red;
}

이렇게 해도 아무 문제 없습니다.

굳이

<button id="deleteBtn">삭제</button>

라고 할 필요는 없습니다.

---

2. 그런데 JavaScript에서는 이야기가 달라집니다.

예를 들어 로그인 버튼 하나를 클릭했을 때만 동작해야 한다고 해봅시다.

<button id="loginBtn">로그인</button>

JavaScript에서는

document.getElementById("loginBtn");

이렇게 하면 딱 하나의 버튼을 바로 찾습니다.

반대로

<button class="btn">로그인</button>
<button class="btn">회원가입</button>
<button class="btn">취소</button>

라면

document.querySelectorAll(".btn");

을 사용하면 버튼이 3개가 선택됩니다.

즉,

• class → 여러 개가 될 수도 있음
• id → 하나만 있다고 약속

이 차이가 매우 큽니다.

---

3. HTML 문서에도 "유일한 요소"가 있습니다.

예를 들어

• 사이트 로고
• 메인 메뉴
• 페이지 제목
• 로그인 폼

이런 것들은 보통 하나뿐입니다.

그래서

<header id="header">

처럼 "이건 페이지에서 유일한 요소야."라는 의미를 담을 수 있습니다.

---

4. 브라우저도 id를 활용합니다.

예를 들어

<h2 id="chapter3">3장</h2>

주소창에서

example.com#chapter3

라고 입력하면 브라우저가 3장으로 바로 이동합니다.

이 기능은 id를 이용합니다.

---

5. 유지보수가 쉬워집니다.

예를 들어

<button class="btn">로그인</button>
<button class="btn">회원가입</button>
<button class="btn">취소</button>

여기서 로그인 버튼만 특별한 기능을 넣고 싶다면

<button id="loginBtn" class="btn">로그인</button>

처럼 하면

• class="btn" → 버튼들의 공통 스타일
• id="loginBtn" → 로그인 버튼만 특별한 기능

으로 역할이 명확해집니다.

---

실제 개발에서는?

요즘은 스타일(CSS)은 거의 대부분 class로 작성합니다.

예를 들어

<button class="btn primary">확인</button>

처럼 작성하는 경우가 많습니다.

반면 id는

• JavaScript에서 특정 요소를 찾을 때
• 페이지 내 특정 위치로 이동(앵커 링크)할 때
• 페이지에서 유일한 요소를 나타낼 때

주로 사용합니다.

---

기억하기 쉬운 비유

• class = 직책
  • "개발팀", "디자인팀", "영업팀"
  • 여러 사람이 같은 직책을 가질 수 있습니다.
• id = 주민등록번호
  • 사람마다 하나씩만 있습니다.
  • 특정 한 사람을 정확히 찾을 때 사용합니다.

그래서 스타일만 생각하면 class만으로도 대부분 해결되지만, HTML은 요소를 구별하고, JavaScript로 제어하고, 문서 구조를 명확하게 표현하기 위해 id도 함께 제공하는 것입니다.