HTML 기초 트레이닝

HTML 기초 트레이닝

이 실습을 통해 PatternFly의 컴포넌트·레이아웃·데모 개념을 직접 다뤄보면서 HTML/CSS 기반 UI 구성 방법을 익혀요. 컴포넌트를 만들고 배치하는 과정을 단계별로 함께 살펴볼게요.

출처: HTML Fundamentals Training

본문

기초

PatternFly는 Atomic Design과 BEM(Block, Element, Modifier)의 원리를 기반으로 해요.

Atomic Design은 디자인 시스템을 만드는 방법론이에요. Atomic Design을 사용하면 사용자 인터페이스를 재사용 가능한 컴포넌트로 쪼갠 다음, 다시 조립해 재사용 가능한 상호작용 패턴을 만들 수 있어요.

PatternFly는 고립되고 모듈화된 구조로 이루어져 있으며, 이 구조는 다음 세 가지 범주로 나뉘어요:

  • 컴포넌트(Components) — 표현과 관련된 모듈형이며 독립적인 구조.
  • 레이아웃(Layouts) — 페이지에서 바로 아래 자식 요소들을 정리하고 그룹화할 수 있게 해줌.
  • 데모(Demos) — 컴포넌트와 레이아웃을 복잡한 구조로 조립하는 방법을 보여줌.

컴포넌트

PatternFly에서 컴포넌트는 사용자 인터페이스의 기본 구성 요소예요. 더 작은 부분으로 쪼갤 수 없답니다. 예로는 button, label, badge 컴포넌트가 있어요. 아래 단계를 실험하고 따라 하려면 CodeSandbox 링크가 제공됐어요.

CodeSandbox - HTML fundamentals

1단계. 버튼 컴포넌트 추가하기

index.html 파일의 <body>에 button 요소를 추가하세요. 버튼에 PatternFly 스타일을 적용하려면 pf-v6-c-button 클래스를 추가하세요. 버튼에 'primary' 스타일을 적용해 밝은 파란색으로 만들려면 pf-m-primary 클래스를 추가하세요.

<button class="pf-v6-c-button pf-m-primary">Primary</button>

참고: 단순한 컴포넌트는 여러 번 재사용할 수 있어요.

<button class="pf-v6-c-button pf-m-primary">Primary</button>
<button class="pf-v6-c-button pf-m-primary">Primary</button>

2단계. 더 복잡한 컴포넌트 만들기

단순 컴포넌트를 결합하면 여전히 재사용 가능한 더 복잡한 컴포넌트를 만들 수 있어요.

더 복잡한 컴포넌트 안에서 단순 컴포넌트를 사용할 때, 요소의 레이아웃은 복잡한 컴포넌트의 스타일시트에 정의돼요.

이 단계에서는 닫기 버튼이 있는 label 컴포넌트를 만들어 봐요.

2.1단계

label 컴포넌트를 만들려면 index.html의 <body> 내용을 다음 코드 스니펫으로 바꾸세요.

<span class="pf-v6-c-label">
  <span class="pf-v6-c-label__content">Label</span>
</span>

이것은 기본 채워진(filled) label이에요. 콘텐츠 래퍼와 텍스트 요소라는 중첩된 요소로 구성됩니다.

2.2단계

닫기 버튼을 추가해 label을 제거 가능하게 만드세요. 이를 위해 pf-v6-c-label__content의 닫는 </span> 뒤, pf-v6-c-label의 닫는 </span> 앞에 다음 코드 블록을 추가하세요.

<span class="pf-v6-c-label__actions">
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove label">
    <span class="pf-v6-c-button__icon"><i class="fas fa-times" aria-hidden="true"></i></span>
  </button>
</span>

참고: 이는 컴포넌트이지 데모가 아니라는 점을 기억하세요. label 컴포넌트는 버튼이 label 안에서 어떻게 보일지 처리하는 스타일을 포함하기 때문이에요. 예를 들어 label은 채워진 label 안에서 버튼 아이콘의 색상을 제어하는 자체 CSS 변수 --pf-v6-c-label--m-filled__actions--c-button__icon--Color를 갖고 있어요. 이는 label 문서의 CSS variables 섹션에서 볼 수 있어요. 또 버튼의 aria-label 속성에 주목하세요. 아이콘 전용 버튼에 접근 가능한 이름을 제공해줍니다.

레이아웃

PatternFly에서 레이아웃은 요소를 정리하고 그룹화할 수 있게 해줘요. 이 튜토리얼은 7가지 레이아웃 중 1가지만 다룬답니다.

1단계

index.html의 <body>에 코드를 복사하세요.

<div class="pf-v6-l-bullseye">
  <div class="pf-v6-c-card">
    <div class="pf-v6-c-card__title">Title</div>
    <div class="pf-v6-c-card__body">Body</div>
    <div class="pf-v6-c-card__footer">Footer</div>
  </div>
</div>

2단계

카드에 pf-v6-l-bullseye 클래스를 추가하세요. 이렇게 하면 카드가 페이지에서 가로·세로로 중앙에 배치돼요.

카드의 가장 바깥쪽 <div> 래퍼를 찾아 pf-v6-l-bullseye 클래스를 추가하세요. 결과는 이렇게 보여야 해요: <div class="pf-v6-l-bullseye">

참고: 레이아웃 클래스를 어디에 추가할지 보여주는 문서를 따르는 게 중요해요. bullseye 문서는 자식의 부모 컨테이너에 pf-v6-l-bullseye 클래스를 추가하도록 지정합니다.

데모

데모는 PatternFly의 컴포넌트와 레이아웃을 어떻게 조합해 더 복잡한 구조를 만드는지 보여줘요. 데모에는 추가 스타일이 없으며, 순전히 컴포넌트와 레이아웃으로만 만들어집니다. 특정 데모에 스타일이 필요하다면 새 컴포넌트나 레이아웃, 또는 그 변형을 만드는 대신 스타일을 추가하세요.

컴포넌트와 레이아웃을 사용해 폼 데모를 만들어 봐요.

1단계. 폼 컴포넌트 5개 추가하기

index.html 파일에 이 코드 블록을 5번 복사해 붙여넣으세요.

<div class="pf-v6-c-form__group">
  <div class="pf-v6-c-form__group-label">
    <label class="pf-v6-c-form__label" for="form-basic">Form label</label>
  </div>
  <div class="pf-v6-c-form__group-control">
    <input class="pf-v6-c-form-control" type="text" id="form-basic" name="form-basic">
  </div>
</div>

2단계. 그리드 레이아웃 적용하기

2.1단계

5개의 폼 컴포넌트 모두를 pf-v6-l-grid 레이아웃 클래스가 있는 하나의 <div> 래퍼로 감싸세요. 결과는 이렇게 보여야 해요:

<div class="pf-v6-l-grid">
  /* 5개 폼 컴포넌트가 여기에 있습니다 */
</div>

3단계

각 폼 컴포넌트를 자체 pf-v6-l-grid__item 레이아웃 클래스로 감싸세요. 이를 위해 index.html에서 각 pf-v6-c-form을 찾아 pf-v6-l-grid__item 클래스로 감쌉니다. 래퍼는 이렇게 보여야 해요:

<div class="pf-v6-l-grid__item">
  /* 개별 폼 컴포넌트 코드 */
</div>

4단계. 그리드 레이아웃에 pf-m-gutter 수정자 클래스 추가하기

그리드 레이아웃에 pf-m-gutter 수정자 클래스를 추가하면 모든 자식 주위에 균등한 간격이 보장돼요.

가장 바깥쪽 래퍼의 따옴표 안, pf-v6-l-grid 뒤에 pf-m-gutter 클래스를 추가하세요. 결과는 이렇게 보여야 해요: <div class="pf-v6-l-grid pf-m-gutter">

참고: 수정자 클래스가 레이아웃 클래스와 어떻게 작동하는지 알아보려면 PatternFly의 grid 문서를 살펴보세요.

5단계. 그리드 아이템 클래스에 수정자 클래스 추가하기

이 단계는 그리드 아이템이 차지하는 열의 수를 수정해요. 그리드 아이템이 차지할 수 있는 최대 열 수는 12개(100%에 해당)예요.

5.1단계

3단계에서 추가한 각 pf-v6-l-grid__item을 찾으세요. 그리드에서 요소의 너비를 조정하려면 pf-m-[1 ~ 12 사이 숫자]-col 형식의 수정자 클래스를 추가하세요. 한 행의 숫자는 합이 12가 되어야 해요.

처음 2개의 그리드 아이템에 pf-m-6-col을 추가하고, 마지막 3개의 그리드 아이템에 pf-m-4-col을 추가하세요.

처음 2개의 그리드 아이템은 이렇게 보여야 해요: <div class="pf-v6-l-grid__item pf-m-6-col"> 마지막 3개의 그리드 아이템은 이렇게 보여야 해요: <div class="pf-v6-l-grid__item pf-m-4-col">

결과 비교하기

완전히 구성된 데모는 제공된 CodeSandbox 솔루션에서 보고 수정할 수 있어요. 여러분의 작업을 솔루션과 비교해 보세요.

CodeSandbox solution - HTML fundamentals

더 알아보기 (Learn more)