실행 가능한 HTML 문서: HTML 속성

Q: HTML 속성이란 무엇인가요?

속성은 여는 태그 안에 name="value" 형태로 쓰는 추가 정보예요. 요소를 설정하는 역할을 해요. href는 링크가 갈 곳을, src와 alt는 이미지를 설명하고, class와 id는 CSS와 JavaScript가 요소를 찾을 수 있게 해 줘요.

Q: HTML에서 class와 id는 무엇이 다른가요?

id는 페이지에서 유일해야 하고 요소 하나를 가리켜요. #fragment 링크, , getElementById에 써요. class는 여러 요소가 함께 쓸 수 있고, 한 요소에 공백으로 구분해 여러 클래스를 줄 수 있어요. 스타일링에는 클래스를 쓰세요.

Q: HTML 요소에 클래스를 여러 개 주려면 어떻게 하나요?

class 속성 하나에 공백으로 구분해서 넣으세요. 처럼요. class를 두 번 쓰면 안 돼요. 브라우저는 첫 번째 것만 남겨요.

Q: HTML 속성값에 따옴표가 꼭 필요한가요?

값에 공백이나 특수 문자가 없으면 따옴표를 생략할 수 있지만, 항상 따옴표를 쓰는 습관이 안전해요. class=big box는 요소에 big 클래스와 box라는 별도의 속성을 줘요.

Q: disabled="false"로 했는데 왜 버튼이 여전히 비활성화되어 있나요?

disabled는 불리언 속성이라서 값이 뭐든 속성이 있기만 하면 true예요. 요소를 활성화하려면 속성을 지우거나, JavaScript에서 button.disabled = false로 설정하세요. 그러면 속성이 제거돼요.

Q: HTML 속성을 직접 만들어도 되나요?

data- 접두사를 쓰세요. data-price="12"나 data-user-id="7"은 어떤 요소에서든 올바르고, JavaScript에서 element.dataset으로 읽을 수 있어요. 접두사 없이 지어낸 이름은 올바르지 않은 HTML이에요.

HTML 속성이란

속성은 요소에 정보를 더해요. 여는 태그 안에 이름, 등호, 따옴표로 감싼 값 순서로 써요. name="value"처럼요. 요소 하나에 속성을 몇 개든 줄 수 있고, 공백으로 구분해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href는 링크가 갈 곳을 알려 주고, src와 alt는 이미지를 설명하고, type, placeholder, required는 입력 필드를 설정해요. 요소마다 고유한 속성이 있고, 몇몇 속성(아래의 전역 속성)은 모든 요소에서 동작해요.

문법 규칙

<input type="text" name="city" value="Paris" disabled>

이름, 등호, 따옴표로 감싼 값. 큰따옴표가 관례이고 작은따옴표도 돼요(값 안에 큰따옴표를 넣고 싶을 때 title='Say "hi"'처럼 써요).
이름은 대소문자를 구분하지 않아요. CLASS와 class는 같은 속성이에요. 값은 구분해요. class="Box"와 class="box"는 서로 다른 클래스예요.
공백이 없으면 따옴표를 생략할 수 있지만, 그래도 쓰세요. class=big box는 요소에 big 클래스와 의미 없는 두 번째 속성 box를 줘요.
순서는 상관없어요. <img alt="" src="a.png">와 <img src="a.png" alt="">는 같아요.
한 요소에 같은 이름은 한 번만. 같은 속성이 두 번 나오면 브라우저는 첫 번째를 남기고 두 번째는 조용히 버려요.

불리언 속성

켜짐과 꺼짐만 있는 속성이 있어요. 이런 속성은 있으면 true이고 값은 무시돼요. disabled, checked, required, readonly, hidden, multiple, autofocus, open이 모두 이렇게 동작해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

세 번째 버튼은 값이 false인데도 비활성화되어 있어요. 브라우저는 속성이 있는지만 확인하기 때문이에요. 불리언 속성을 끄려면 속성을 지우세요. JavaScript의 button.disabled = false가 정확히 그 일을 해요.

class 속성

class는 요소에 CSS와 JavaScript가 찾을 수 있는 이름을 하나 이상 붙여요. 여러 요소가 같은 클래스를 쓸 수 있고, 한 요소가 공백으로 구분한 여러 클래스를 가질 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

클래스를 하나 더할 때마다 그 규칙이 위에 덧붙어요. CSS에서는 점(.card)으로 클래스를 선택하고, JavaScript에서는 element.classList.add('featured')와 classList.remove로 바꿔요. 클래스는 스타일을 입히는 기본 방법이라서, CSS 대부분은 클래스를 대상으로 하게 돼요.

id 속성

id는 요소에 페이지에서 유일한 이름을 붙여요. 딱 하나의 요소가 필요할 때 쓰세요. 링크 대상, <label for>, document.getElementById 같은 경우예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

for="email"이 id="email"을 가리키기 때문에 라벨을 클릭하면 입력 필드에 포커스가 가요. href의 프래그먼트가 id와 일치하니까 링크를 누르면 #pricing으로 스크롤돼요.

	`class`	`id`
함께 쓸 수 있는 요소 수	제한 없음	하나(유일)
요소당 값 개수	여러 개, 공백으로 구분	하나
CSS 선택자	`.name`	`#name`
주요 용도	요소 묶음에 스타일 적용	링크 대상, 라벨, JavaScript에서 특정 요소 하나

id에는 공백을 넣을 수 없어요. CSS에서 쓰기 쉽도록 문자로 시작하세요. #2col은 이스케이프하지 않으면 올바른 CSS 선택자가 아니에요.

전역 속성

아래 속성은 어떤 요소에서든 동작해요.

속성	하는 일
`id`	요소의 유일한 이름
`class`	공백으로 구분한 클래스 이름 목록
`style`	`style="color: red"` 같은 인라인 CSS
`title`	마우스를 올리면 나오는 툴팁 텍스트
`lang`	`lang="fr"` 같은 콘텐츠 언어
`dir`	텍스트 방향: `ltr`, `rtl`, `auto`
`hidden`	요소를 숨김(불리언)
`tabindex`	Tab 키로 포커스할 수 있게 하거나 순서를 정함
`contenteditable`	사용자가 요소의 텍스트를 편집할 수 있게 함
`data-*`	JavaScript로 읽는 나만의 데이터

lang 속성은 스크린 리더, 번역, 검색에 영향을 주기 때문에 따로 페이지가 있어요.

data-* 속성

요소에 나만의 값을 저장해야 할 때는 이름 앞에 data-를 붙이세요. 접두사 뒤에는 어떤 이름이든 쓸 수 있고, JavaScript는 element.dataset으로 값을 읽어요. 이때 하이픈은 camelCase로 바뀌어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id는 dataset.productId가 돼요. 값은 항상 문자열로 돌아오니까, 계산하기 전에 Number()로 변환하세요. CSS에서도 [data-price="4.50"]처럼 선택할 수 있어요.

자주 하는 실수

class를 두 번 씀. <div class="a" class="b">는 a만 남아요. 한 속성에 둘 다 넣으세요. class="a b"처럼요.
id를 다시 씀. 같은 id를 가진 요소가 두 개면 #links, 라벨, 첫 번째 요소만 돌려주는 getElementById가 모두 망가져요. 반복되는 것에는 클래스를 쓰세요.
disabled="false"나 checked="false". 속성이 여전히 있으니 여전히 켜져 있어요. 대신 속성을 지우세요.
공백이 있는 값에 따옴표를 안 씀. alt=My photo는 alt를 My로 설정해요. 모든 값에 따옴표를 쓰세요.
data- 없이 속성을 지어냄. <div price="4">는 올바르지 않은 HTML이고 나중에 나올 표준 속성과 겹칠 수 있어요. data-price를 쓰세요.

자주 묻는 질문

HTML 속성이란 무엇인가요?

속성은 여는 태그 안에 name="value" 형태로 쓰는 추가 정보예요. 요소를 설정하는 역할을 해요. href는 링크가 갈 곳을, src와 alt는 이미지를 설명하고, class와 id는 CSS와 JavaScript가 요소를 찾을 수 있게 해 줘요.

HTML에서 class와 id는 무엇이 다른가요?

id는 페이지에서 유일해야 하고 요소 하나를 가리켜요. #fragment 링크, <label for>, getElementById에 써요. class는 여러 요소가 함께 쓸 수 있고, 한 요소에 공백으로 구분해 여러 클래스를 줄 수 있어요. 스타일링에는 클래스를 쓰세요.

HTML 요소에 클래스를 여러 개 주려면 어떻게 하나요?

class 속성 하나에 공백으로 구분해서 넣으세요. <div class="card featured dark">처럼요. class를 두 번 쓰면 안 돼요. 브라우저는 첫 번째 것만 남겨요.

HTML 속성값에 따옴표가 꼭 필요한가요?

값에 공백이나 특수 문자가 없으면 따옴표를 생략할 수 있지만, 항상 따옴표를 쓰는 습관이 안전해요. class=big box는 요소에 big 클래스와 box라는 별도의 속성을 줘요.

disabled="false"로 했는데 왜 버튼이 여전히 비활성화되어 있나요?

disabled는 불리언 속성이라서 값이 뭐든 속성이 있기만 하면 true예요. 요소를 활성화하려면 속성을 지우거나, JavaScript에서 button.disabled = false로 설정하세요. 그러면 속성이 제거돼요.

HTML 속성을 직접 만들어도 되나요?

data- 접두사를 쓰세요. data-price="12"나 data-user-id="7"은 어떤 요소에서든 올바르고, JavaScript에서 element.dataset으로 읽을 수 있어요. 접두사 없이 지어낸 이름은 올바르지 않은 HTML이에요.