[HTML] 개념노트 14편 class, id, name 속성 차이 이해하기

 

HTML 개념노트 14편

class, id, name 속성 차이 이해하기

HTML 태그에는 여러 속성을 넣을 수 있습니다. 그중에서도 class, id, name은 CSS, JavaScript, 서버 데이터 전송에서 자주 사용되는 중요한 속성입니다.

1. class, id, name은 왜 중요할까?

HTML 태그만 작성하면 화면에 요소를 만들 수 있습니다. 하지만 실제 웹페이지에서는 특정 요소에 스타일을 주거나, JavaScript로 선택하거나, 서버로 데이터를 보내야 하는 경우가 많습니다.

이때 요소를 구분하기 위해 사용하는 대표적인 속성이 class, id, name입니다.

<div class="card">카드 영역</div>

<input id="userId" name="userId" type="text">

쉽게 말하면?

class는 여러 요소를 같은 그룹으로 묶는 이름, id는 한 요소만 구분하는 고유 이름, name은 폼 데이터를 서버로 보낼 때 사용하는 데이터 이름입니다.

2. class 속성

class는 여러 HTML 요소에 같은 이름을 붙일 때 사용합니다. 같은 스타일을 여러 요소에 적용하거나, 같은 역할을 가진 요소들을 그룹으로 묶을 때 자주 사용합니다.

<div class="card">첫 번째 카드</div>
<div class="card">두 번째 카드</div>
<div class="card">세 번째 카드</div>

위 예시처럼 여러 개의 <div>에 같은 class="card"를 줄 수 있습니다. CSS에서 .card를 선택하면 세 카드에 같은 스타일을 적용할 수 있습니다.

class 사용 예시

• 여러 카드에 같은 디자인 적용하기
• 버튼들을 같은 스타일로 꾸미기
• 목록 아이템을 같은 그룹으로 관리하기
• JavaScript에서 여러 요소를 한 번에 선택하기

3. class는 여러 개 작성할 수 있다

하나의 요소에는 class를 여러 개 작성할 수 있습니다. class 이름은 공백으로 구분합니다.

<button class="btn primary large">저장하기</button>

위 코드에서 버튼은 btn, primary, large라는 세 개의 class를 가지고 있습니다.

핵심 포인트

class는 재사용을 위한 이름입니다. 여러 요소에 같은 class를 줄 수 있고, 한 요소에 여러 class를 줄 수도 있습니다.

4. id 속성

id는 HTML 문서 안에서 특정 요소 하나를 구분하기 위한 고유 이름입니다. 한 페이지 안에서 같은 id를 여러 번 사용하는 것은 피해야 합니다.

<h2 id="profile">프로필 영역</h2>

<input id="email" type="email">

id는 특정 위치로 이동하는 링크, label 연결, JavaScript 요소 선택 등에 자주 사용됩니다.

id 사용 예시

• 페이지 안의 특정 위치로 이동하기
• label과 input 연결하기
• JavaScript에서 특정 요소 하나 선택하기
• 문서 안에서 고유한 영역 표시하기

5. id로 페이지 안에서 이동하기

id는 페이지 안의 특정 위치로 이동할 때 사용할 수 있습니다. 링크의 href에 #id값을 작성하면 해당 id가 있는 위치로 이동합니다.

<a href="#contact">문의 영역으로 이동</a>

<section id="contact">
  <h2>문의하기</h2>
  <p>궁금한 점을 남겨 주세요.</p>
</section>

기억하세요

href="#contact"는 id="contact"가 있는 위치로 이동하라는 뜻입니다.

6. label과 id 연결

폼에서 label의 for 값과 input의 id 값을 같게 작성하면 라벨과 입력창이 연결됩니다.

<label for="userEmail">이메일</label>
<input type="email" id="userEmail" name="email">

이렇게 작성하면 사용자가 “이메일”이라는 글자를 클릭해도 이메일 입력창이 선택됩니다. 사용성과 접근성을 높이는 좋은 습관입니다.

7. name 속성

name은 주로 폼 데이터에서 사용됩니다. 사용자가 입력한 값이 서버로 전송될 때, 어떤 이름의 데이터인지 구분하는 역할을 합니다.

<input type="text" name="userId" value="gwdevel">

위 코드는 폼이 제출될 때 대략 아래처럼 전송된다고 생각하면 됩니다.

userId=gwdevel

주의하세요

입력창이 화면에 보여도 name이 없으면 서버로 값을 보낼 때 문제가 생길 수 있습니다. 백엔드와 연결되는 폼에서는 name을 꼭 확인해야 합니다.

8. checkbox와 radio에서 name의 역할

checkbox와 radio에서도 name은 중요합니다. 특히 라디오 버튼은 같은 name을 가진 항목끼리 하나의 그룹이 됩니다.

checkbox 예시

<input type="checkbox" id="html" name="skill" value="html">
<label for="html">HTML</label>

<input type="checkbox" id="css" name="skill" value="css">
<label for="css">CSS</label>

radio 예시

<input type="radio" id="normal" name="role" value="normal">
<label for="normal">일반 회원</label>

<input type="radio" id="admin" name="role" value="admin">
<label for="admin">관리자</label>

위 라디오 버튼은 두 항목 모두 name="role"이기 때문에 둘 중 하나만 선택됩니다.

9. class, id, name 한눈에 비교

구분	class	id	name
주요 역할	여러 요소 그룹화	특정 요소 하나 식별	폼 데이터 이름
중복 가능 여부	가능	한 문서 안에서 고유해야 함	폼 목적에 따라 가능
주 사용 위치	대부분의 HTML 요소	특정 요소	form 내부 입력 요소
CSS 선택자	.card	#userId	주로 CSS보다 데이터 전송에 사용

10. CSS 선택자와 연결해서 보기

CSS에서는 class를 선택할 때 점(.)을 사용하고, id를 선택할 때 샵(#)을 사용합니다.

<div class="card">카드입니다.</div>
<p id="notice">공지 문구입니다.</p>

<style>
  .card {
    border: 1px solid #ddd;
    padding: 20px;
  }

  #notice {
    color: red;
    font-weight: bold;
  }
</style>

.card는 class="card"를 가진 요소를 선택하고, #notice는 id="notice"를 가진 요소를 선택합니다.

11. 실제 폼 예시로 이해하기

아래 예시에는 class, id, name이 함께 사용됩니다.

<form class="login-form" action="/login" method="post">
  <div class="form-row">
    <label for="userId">아이디</label>
    <input type="text" id="userId" name="userId">
  </div>

  <div class="form-row">
    <label for="userPw">비밀번호</label>
    <input type="password" id="userPw" name="userPw">
  </div>

  <button class="btn primary" type="submit">로그인</button>
</form>

• class="login-form"은 로그인 폼 전체 스타일을 주기 위한 이름입니다.
• class="form-row"는 입력 줄마다 같은 스타일을 주기 위한 이름입니다.
• id="userId"는 label과 input을 연결하기 위한 고유 이름입니다.
• name="userId"는 서버로 전송될 데이터 이름입니다.

12. 초보자가 자주 하는 실수

실수 1. id를 여러 요소에 반복해서 사용함

id는 고유 식별자입니다. 같은 페이지 안에서는 같은 id를 여러 번 사용하지 않는 것이 좋습니다.

실수 2. class와 id를 반대로 사용함

여러 요소에 공통 스타일을 줄 때는 class, 특정 요소 하나를 구분할 때는 id를 사용하는 것이 좋습니다.

실수 3. input에 name을 빼먹음

폼 데이터를 서버로 보내야 한다면 name이 필요합니다. 화면에 보이는 것과 서버로 전송되는 것은 다르기 때문에 꼭 확인해야 합니다.

실수 4. label for와 input id가 맞지 않음

label의 for 값과 input의 id 값이 다르면 두 요소가 연결되지 않습니다.

13. 오늘의 핵심 정리

• class는 여러 요소를 같은 그룹으로 묶을 때 사용합니다.
• class는 한 요소에 여러 개 작성할 수 있습니다.
• id는 특정 요소 하나를 구분하는 고유 이름입니다.
• id는 페이지 안 이동, label 연결, JavaScript 선택에 자주 사용됩니다.
• name은 폼 데이터를 서버로 보낼 때 데이터 이름 역할을 합니다.
• CSS에서 class는 .class명, id는 #id명으로 선택합니다.
• 폼에서는 id와 name의 역할이 다르므로 둘을 구분해야 합니다.

14. 간단한 연습 문제

아래 조건에 맞게 로그인 폼을 작성해 보세요.

문제

• form에 class="login-form" 작성하기
• 아이디 입력창에 id="userId", name="userId" 작성하기
• 비밀번호 입력창에 id="userPw", name="userPw" 작성하기
• 각 입력창에 맞는 label 연결하기
• 로그인 버튼에 class="btn primary" 작성하기

정답 보기

<form class="login-form" action="/login" method="post">
  <div class="form-row">
    <label for="userId">아이디</label>
    <input type="text" id="userId" name="userId">
  </div>

  <div class="form-row">
    <label for="userPw">비밀번호</label>
    <input type="password" id="userPw" name="userPw">
  </div>

  <button class="btn primary" type="submit">로그인</button>
</form>

다음 편 예고

다음 글에서는 HTML에서 특수문자를 안전하게 표현할 때 사용하는 HTML 엔티티 문자를 정리합니다.

GWDEVELBlog HTML 개념노트