HTML CSS 변수와 오버라이드 트레이닝

HTML CSS 변수와 오버라이드 트레이닝

PatternFly가 BEM 방법론을 어떻게 활용하는지, 그리고 컴포넌트 레벨과 글로벌 CSS 변수를 오버라이드하거나 직접 만들어 스타일을 확장하는 방법을 실습으로 배워요. CSS 변수 이름 규칙을 이해하면 커스터마이즈가 훨씬 수월해져요.

출처: HTML CSS Variables and Overrides Training

본문

CSS 변수와 오버라이드

PatternFly는 Atomic Design과 BEM(Block, Element, Modifier)의 원리를 기반으로 해요. BEM은 모듈형이며 확장 가능한 애플리케이션을 만드는 인기 있는 CSS 방법론으로, 스코프를 제공하고 상속을 피하며 CSS 특이성과 충돌을 줄여줍니다.

BEM은 모듈형 디자인 시스템과 완벽하게 어울려요. 각 독특한 컴포넌트를 독립적인 블록으로 나타낼 수 있기 때문이에요. 블록이 컴포넌트에 묶여 있으므로, 개발자는 애플리케이션의 CSS에서 충돌 없이 컴포넌트를 개발·이동·중첩할 수 있어요.

PatternFly는 CSS 아키텍처에 수정된 버전의 BEM을 사용해요. PatternFly는 modifier와 관련해서 BEM에서 벗어난답니다.

이 튜토리얼은 PatternFly가 컴포넌트 라이브러리의 프레임워크로 BEM을 어떻게 사용하는지, 그리고 글로벌·컴포넌트 레벨 커스텀 프로퍼티와 컴포넌트 요소를 오버라이드하고 만드는 방법을 다룹니다.

파트 1: PatternFly 컴포넌트 레벨 프로퍼티 오버라이드하기

PatternFly에서 컴포넌트 레벨 커스텀 프로퍼티는 다음 일반 공식을 따릅니다:

--pf-v6-c-block[__element][--modifier][--state][--breakpoint][--pseudo-element]--PropertyCamelCase

  • --pf-v6-c-block은 블록, 보통 컴포넌트 또는 레이아웃 이름을 가리켜요 (예: --pf-v6-c-alert).
  • __element은 블록 안의 요소를 가리켜요 (예: __title).
  • --modifier는 .pf-m-danger 같은 modifier 클래스를 가리키며, 컴포넌트 변수에서는 m-로 접두사가 붙어요 (예: --m-danger).
  • --state는 hover나 active 같은 상태예요.
  • --breakpoint는 $pf-v6-global--breakpoint--sm 같은 미디어 쿼리 브레이크포인트(예: sm)예요.
  • --pseudo-element은 before 또는 after 중 하나예요.
  • PropertyCamelCase는 변경되는 프로퍼티를 가리켜요.

이 개념을 탐구하려면 제공된 CodeSandbox를 사용해 alert 컴포넌트의 success 변형에서 title 색상 커스텀 프로퍼티 오버라이드를 연습할 수 있어요.

Codesandbox - Part 1

1단계. index.html 살펴보기

index.html의 <body>에 있는 alert 컴포넌트에 주목하세요.

2단계. 커스텀 프로퍼티 이름과 스타일 만들기

style.css 파일에 커스텀 프로퍼티 이름에 대한 CSS를 작성하세요. success 변형의 title 색상을 오버라이드한다는 것은 해당 커스텀 프로퍼티를 오버라이드한다는 뜻이에요.

2.1단계

style.css 파일의 .pf-v6-c-alert{} 블록 안에 커스텀 프로퍼티 이름을 작성하세요.

파트 1에서 설명한 공식에 비추어 보면 이렇게 되어야 해요: --pf-v6-c-alert

2.2단계

커스텀 프로퍼티 이름에 modifier를 추가하세요. PatternFly의 alert 컴포넌트 문서의 CSS variables에 표시된 것처럼, success 변형 modifier 클래스 pf-m-success가 pf-v6-c-alert에 적용돼요. 커스텀 프로퍼티에 해당 modifier를 추가하세요.

커스텀 프로퍼티 이름은 이제 이렇게 되어야 해요: --pf-v6-c-alert--m-success

2.3단계

커스텀 프로퍼티 이름에 요소(element)를 추가하세요. 변경되는 요소는 alert의 title이에요.

커스텀 프로퍼티 이름은 이제 이렇게 되어야 해요: --pf-v6-c-alert--m-success__title

2.4단계

수정되는 프로퍼티를 추가하세요. 이 경우 alert 컴포넌트에서 title의 color 프로퍼티를 수정해요.

커스텀 프로퍼티 이름은 이제 이렇게 되어야 해요: --pf-v6-c-alert--m-success__title--Color

2.5단계

컴포넌트 레벨 CSS 변수의 값을 정의하세요. PatternFly의 글로벌 danger 색상은 다음과 같아요: --pf-v6-global--danger-color--100. 자세한 내용은 PatternFly의 global colors 문서를 참고할 수 있어요.

이미 .pf-v6-c-alert{} 블록 안에 있는 커스텀 프로퍼티 이름(--pf-v6-c-alert--m-success__title--Color)에 글로벌 danger 색상을 할당하세요.

결과는 이렇게 보여야 해요: --pf-v6-c-alert--m-success__title--Color: var(--pf-v6-global--danger-color--100);

결과 alert는 Figure 1과 일치해야 해요.

Figure 1

파트 2: PatternFly 글로벌 프로퍼티 오버라이드하기

PatternFly에서 글로벌 프로퍼티는 다음 일반 공식을 따릅니다:

--pf-v6-global--concept--PropertyCamelCase--modifier--state

글로벌 프로퍼티는 global이라는 단어로 접두사가 붙어요.

  • concept은 spacer나 main-title 같은 것이에요.
  • PropertyCamelCase는 BackgroundColor나 FontSize 같은 것이에요.
  • modifier는 sm나 lg 같은 것이에요.
  • state는 hover나 expanded 같은 것이에요. 이들은 개념이며, 요소나 컴포넌트에 결코 묶이지 않아요. 이는 잘못된 예시예요: --pf-v6-global--h1--FontSize. 올바른 예시는 이거예요: --pf-v6-global--FontSize--3xl.

이 개념을 탐구하려면 파트 2용으로 제공된 CodeSandbox를 사용해 글로벌 링크 색상을 danger용 커스텀 프로퍼티로 설정해 오버라이드하세요. index.html 파일에는 버튼과 확장 가능한 컴포넌트가 들어 있어서, 글로벌 변수를 변경하는 것이 컴포넌트 전반에 어떤 영향을 미치는지 보여줘요.

Codesandbox - Part 2

1단계. index.html 살펴보기

index.html 파일의 <body>에 있는 button 컴포넌트와 expandable section 컴포넌트에 주목하세요.

2단계. 글로벌 커스텀 프로퍼티 오버라이드하기

2.1단계

styles.css 파일의 :root 블록에 글로벌 커스텀 프로퍼티의 접두사를 작성하세요. 글로벌 커스텀 프로퍼티는 global이라는 단어로 접두사가 붙으므로, 커스텀 프로퍼티의 시작에 그것을 사용하세요.

결과는 이렇게 보여야 해요: --pf-v6-global

2.2단계

글로벌 커스텀 프로퍼티에 concept을 추가하세요. 링크 색상의 concept은 link예요.

글로벌 커스텀 프로퍼티는 이제 이렇게 보여야 해요: --pf-v6-global--link

2.3단계

글로벌 커스텀 프로퍼티에 프로퍼티를 추가하세요. 색상이 수정되므로 다음 단계로 color 프로퍼티를 추가하세요.

글로벌 커스텀 프로퍼티는 이제 이렇게 보여야 해요: --pf-v6-global--link--Color

2.4단계

글로벌 변수의 값을 정의하세요. PatternFly의 글로벌 danger 색상은 다음과 같아요: --pf-v6-global--danger-color--100.

이미 :root 블록 안에 있는 커스텀 프로퍼티 이름(--pf-v6-global--link--Color)에 글로벌 danger 색상을 할당하세요.

결과는 이렇게 보여야 해요: --pf-v6-global--link--Color: var(--pf-v6-global--danger-color--100);

CodeSandbox에서 결과 UI는 Figure 2와 일치해야 해요.

참고: button 컴포넌트와 expandable 컴포넌트의 링크가 모두 새 빨간 링크 색상을 상속받았어요.

Figure 2

파트 3: 컴포넌트 레벨 CSS 변수를 만들고 사용해 PatternFly 스타일 오버라이드하기

변수를 만들고 오버라이드하는 데 BEM이 어떻게 사용되는지 이해하는 것이 중요해요.

이 개념을 탐구하려면 파트 3용으로 제공된 CodeSandbox를 사용해 label 컴포넌트에 badge 요소를 지원하도록 BEM 요소와 CSS 커스텀 프로퍼티를 사용한 커스텀 스타일을 추가하세요. label 컴포넌트에서 텍스트 왼쪽에 badge를 추가하는 일반적인 사용 사례가 있다고 가정해 보세요. label 컴포넌트에 커스텀 badge 요소를 추가할 때 margin-right도 8px 적용하세요.

Codesandbox - Part 3

1단계. index.html 살펴보기

index.html의 <body>에 있는 label 컴포넌트에 주목하세요. 이 label에는 badge 컴포넌트와 일부 텍스트가 들어 있어요. 기본 PatternFly label 컴포넌트는 label 자체와 안의 텍스트만 스타일링해요. label에 badge 컴포넌트가 전달됐으므로, badge와 옆의 텍스트 사이에 공간을 추가해야 해요.

이를 BEM 방식으로 하기 위해, badge에 BEM 요소 클래스(pf-v6-c-label__badge)가 적용됐어요.

2단계. badge 스타일링하기

참고: 컴포넌트의 CSS에서 프로퍼티의 값으로 글로벌 커스텀 프로퍼티를 직접 적용하지 마세요.

2.1단계

badge의 margin을 나타내는 새 변수를 만드세요. style.css의 .pf-v6-c-label{} 블록 안에서 커스텀 프로퍼티의 시작부인 컴포넌트 이름을 정의하세요.

결과는 이렇게 보여야 해요: --pf-v6-c-label

2.2단계

새 커스텀 프로퍼티의 값을 정의하세요. 컴포넌트 이름 뒤에 요소를 추가하세요.

커스텀 프로퍼티는 이제 이렇게 되어야 해요: --pf-v6-c-label__badge

2.3단계

요소 뒤에 badge에 적용되는 프로퍼티를 추가하세요.

결과는 이렇게 보여야 해요: --pf-v6-c-label__badge--MarginRight

2.4단계

새 커스텀 CSS 변수의 값을 정의하세요. 8px 공간에 대한 PatternFly의 글로벌 변수는 --pf-v6-global--spacer--sm이에요. 자세한 내용은 PatternFly의 spacer 문서를 참고할 수 있어요.

이미 .pf-v6-c-label{} 블록 안에 있는 커스텀 프로퍼티 이름 --pf-v6-c-label__badge--MarginRight에 8px 공간용 글로벌 변수를 할당하세요.

결과는 이렇게 보여야 해요: --pf-v6-c-label__badge--MarginRight: var(--pf-v6-global--spacer--sm);

2.5단계

새 커스텀 프로퍼티 이름을 오버라이드되는 프로퍼티에 할당하세요. .pf-v6-c-label__badge{} 안에 margin-right 선언을 추가하고 새 margin 변수에 할당하세요.

결과는 이렇게 보여야 해요: margin-right: var(--pf-v6-c-label__badge--MarginRight);

참고: 프리뷰가 다시 로드되면 badge 오른쪽에 공간이 생겨야 해요.

파트 4: 글로벌 CSS 변수를 만들고 사용해 PatternFly 스타일 오버라이드하기

이 개념을 탐구하려면 5xl 글꼴 크기용 새 글로벌 커스텀 프로퍼티를 만드세요. 이 새 글로벌 프로퍼티를 사용해 파트 4용으로 제공된 CodeSandbox에서 title 컴포넌트의 새 변형을 만들어 보세요.

PatternFly의 typography 디자인 가이드라인을 참조하면, PatternFly가 제공하는 가장 큰 글꼴 크기는 "super hero heading" 크기예요. 36px이며 글로벌 변수 pf-v6-global--FontSize--4xl로 표현됩니다. 애플리케이션 전체에서 쓰는 title 컴포넌트에 더 큰 글꼴 크기가 필요하다고 가정해 보세요.

Codesandbox - Part 4

1단계. index.html 살펴보기

index.html 파일의 <body>에 있는 title 컴포넌트에 주목하세요. 지금까지 정의된 PatternFly 스타일이 없는 modifier 클래스가 적용되어 있어요.

2단계. 새 글로벌 커스텀 프로퍼티 이름 정의하기

기존 글로벌 글꼴 크기 커스텀 프로퍼티 규칙을 따르세요.

2.1단계

:root{} 블록 안에 글꼴 크기용 새 커스텀 프로퍼티를 추가하세요. 이렇게 하면 애플리케이션의 글로벌 스코프에 적용돼요. 결과는 이렇게 보여야 해요: --pf-v6-global--FontSize--5xl

2.2단계

새 글로벌 변수의 값을 정의하세요. 새 글꼴 크기의 픽셀 값을 프로퍼티 이름에 할당하세요.

2.1단계에서 추가한 줄을 42px로 업데이트하세요.

결과는 이렇게 보여야 해요: --pf-v6-global--FontSize--5xl: 42px;

3단계. 로컬 컴포넌트 레벨 커스텀 프로퍼티 만들기

styles.css 파일의 .pf-v6-c-title{} 블록에 로컬 컴포넌트 레벨 커스텀 프로퍼티를 만드세요. 그 값을 새로 정의한 글로벌 프로퍼티로 설정하세요.

로컬 커스텀 프로퍼티는 5xl 변형의 글꼴 크기를 나타내야 해요.

3.1단계

컴포넌트 이름으로 시작해 커스텀 프로퍼티를 작성하고 style.css 파일의 .pf-v6-c-title{} 블록에 추가하세요.

결과는 이렇게 보여야 해요: --pf-v6-c-title

3.2단계

커스텀 프로퍼티 이름에 새 modifier를 추가하세요.

결과는 이렇게 보여야 해요: --pf-v6-c-title--m-5xl

3.3단계

커스텀 프로퍼티가 나타내는 프로퍼티를 추가하세요.

결과는 이렇게 보여야 해요: --pf-v6-c-title--m-5xl--FontSize

3.4단계

컴포넌트 레벨 커스텀 프로퍼티의 값을 새로 정의된 글로벌 변수와 같게 정의하세요.

결과는 이렇게 보여야 해요: --pf-v6-c-title--m-5xl--FontSize: var(--pf-v6-global--FontSize--5xl);

4단계. 새 5xl 변형의 스타일 정의하기

4.1단계. 선택자 연결하기

modifier .pf-m-5xl이 title 컴포넌트에 적용될 것임을 알고, CSS에서 선택자를 연결해 .pf-v6-c-title.pf-m-5xl을 만드세요.

.pf-v6-c-title 안, 3단계의 선언 아래에 이 블록을 추가하세요.

.pf-v6-c-title.pf-m-5xl {
  /* styles go here */
}

4.2단계

새 컴포넌트 레벨 커스텀 프로퍼티를 사용해 font-size CSS 규칙에 대한 선언을 modifier 블록 안에 만드세요.

.pf-m-5xl{} 안에 이렇게 보여야 해요: font-size: var(--pf-v6-c-title--m-5xl--FontSize);

결과 비교하기

완전히 구성된 카드는 파트 4용 CodeSandbox 솔루션에서 보고 수정할 수 있어요. 여러분의 작업을 솔루션과 비교해 보세요.

Codesandbox - Part 4 Solution

더 알아보기 (Learn more)