0Pricing
HTML Academy · 강의

id, class, style 및 title

모든 HTML 요소에 핵심 전역 속성을 적용합니다.

id, class, style 및 title은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

전역 속성

전역 속성은 모든 HTML 요소에 적용할 수 있습니다:

  • id — 고유 식별자
  • class — 하나 이상의 CSS 클래스
  • style — 인라인 CSS
  • title — 툴팁 텍스트
  • 그 밖에도 많습니다: lang, hidden, tabindex, data-*...

id 속성

id 속성은 요소에 고유 식별자를 할당합니다:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

id의 활용

id 속성은 여러 용도로 사용됩니다:

  • CSS 대상 지정: #hero-banner { ... }
  • JavaScript 선택: document.getElementById('signup-form')
  • 프래그먼트 탐색: <a href="#installation">
  • ARIA 레이블 지정: aria-labelledby="modal-title"

class 속성

class 속성은 하나 이상의 CSS 클래스를 할당합니다:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

ID와 클래스 비교

각각을 사용하는 경우:

  • id — 페이지에서 하나의 특정 요소
  • class — 여러 요소에 적용하는 스타일 패턴
<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

style 속성

style 속성은 인라인 CSS를 추가합니다:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

인라인 style을 사용하는 경우

다음과 같은 경우에는 인라인 스타일을 사용해도 됩니다:

  • JavaScript로 설정되는 동적 값
  • CSS를 작성할 때 알 수 없는 값(사용자가 설정하는 색상, 너비)
  • 이메일 HTML(이메일 클라이언트가 외부 CSS를 제거함)

정적인 표현 관련 선택에는 style을 사용하지 않습니다. 이런 선택은 CSS에 작성해야 합니다.

title 속성

title 속성은 마우스를 올렸을 때 툴팁 텍스트를 제공합니다:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

title의 접근성 한계

title 속성에는 다음과 같은 중요한 접근성 문제가 있습니다:

  • 키보드 탐색으로 접근할 수 없습니다
  • 터치 화면에는 표시되지 않습니다
  • 화면 낭독기의 동작이 일관되지 않습니다
  • 중요한 정보를 title에만 넣지 않습니다

중요한 정보에는 ARIA 레이블이나 눈에 보이는 텍스트를 사용합니다.

ID, 클래스, 인라인 스타일의 명시도

CSS 명시도를 낮은 순서부터 높은 순서로 나열하면 다음과 같습니다:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

class 이름 지정 규칙

널리 사용되는 클래스 이름 지정 규칙:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

빠른 확인

id 속성에 관한 핵심 규칙은 무엇인가요?

복습: id, class, style, title

전역 속성의 핵심:

  • id — 페이지마다 고유하며 CSS, JavaScript, 프래그먼트, ARIA에 사용됨
  • class — 재사용할 수 있으며 여러 클래스는 공백으로 구분함
  • style — 인라인 CSS(절제해서 사용하고 외부 CSS를 우선함)
  • title — 툴팁이며 키보드나 터치 사용자가 접근할 수 없음
  • CSS에서 ID 명시도 > 클래스 명시도

자주 묻는 질문

“id, class, style 및 title” 강의는 무료인가요?

네 — “id, class, style 및 title” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“id, class, style 및 title”에서 뭘 배우나요?

모든 HTML 요소에 핵심 전역 속성을 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“id, class, style 및 title” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. id, class, style 및 title
  2. hidden 속성
  3. tabindex와 accesskey
  4. 사용자 정의 데이터 속성 data-*
← HTML Academy(으)로 돌아가기