HTML 튜토리얼

만들 것

작은 문의 폼 — 레이블이 있는 입력, 제출 버튼, 실제 키보드 및 스크린 리더 동작 — 먼저 꾸미지 않은 상태로, 그다음 스타일을 입혀서 약 10분 안에 만듭니다.

시작하기 전에

브라우저와 텍스트 편집기만 있으면 됩니다. (컴포넌트 파일을 가져오는 데는 git이 편하지만, 브라우저에서 GitHub의 파일을 복사해도 됩니다.)

1단계 — 코드 가져오기

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

모든 컴포넌트는 다음 위치에 독립된 파일로 있습니다: components/ — button.html, text-input.html등 — 파일 맨 위 주석에 HTML 태그, 클래스 훅, 키보드 동작, 접근성 계약이 적혀 있습니다. 이 파일들이 곧 라이브러리입니다 — 필요한 것을 복사해서 시작하세요.

2단계 — 첫 번째 컴포넌트

열기: components/button.html, 또는 마크업을 그냥 작성하세요 — 클래스 훅이 계약입니다:

<button class="button" type="button">
  Save
</button>

진짜 <button>이므로 키보드 포커스, Enter와 Space 활성화, 암묵적 버튼 역할이 이미 올바르게 동작합니다.

3단계 — 작은 폼 구성하기

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

패턴을 보세요: 모든 컨트롤이 자기 <label for>에 연결되고, 가장 구체적인 input 타입을 쓰며, 케밥 케이스 클래스 훅을 정확히 하나만 가집니다.

4단계 — 스타일 입히기

훅에 맞춰 CSS를 작성합니다:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

아니면 CSS를 직접 쓰는 일을 아예 건너뛰고, 준비된 45개 테마 중 하나를 링크하면 같은 마크업이 그대로 꾸며집니다:

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

5단계 — 더 둘러보기

• 이 저장소의 테스트는 실제 브라우저에서 실행됩니다: pnpm install && pnpm test (WebDriverIO).
• 모든 컴포넌트의 Storybook: pnpm run storybook.
• HTML+CSS+JS 예제 앱 은 571개 컴포넌트 모두를 스타일이 적용되고 검색 가능하며 데모와 함께 보여 줍니다.

다음 단계

• 테마 적용 — theme-picker로 하는 런타임 테마 전환.
• 환경설정 헬퍼 — 언어와 텍스트 크기.
• 컴포넌트 카탈로그 — 전체 레퍼런스.

진행하다가 궁금한 점이 있다면 도움말 페이지 에 답이 많이 있습니다. 어떤 단계가 더 명확해질 수 있다면 알려 주세요 . 기꺼이 튜토리얼을 개선하겠습니다.