Custom 원칙

Custom 원칙

개요

• 요소마다 특정한 key를 부여합니다.

목적

• 보여지는 외형의 경우, 한정되어 제공되는 prop외에도 자유롭게 custom하여 사용 할 수 있도록 합니다.

  • PDS가 제공하는 key를 활용하여 css코드를 작성할 수 있습니다.

• 개발자 모드에서 손쉽게 PDS의 요소인지 여부와 해당 요소가 어떤 요소인지 확인할 수 있습니다.

key 종류

• x-pds-name

  • 해당 요소의 고유한 명칭을 의미합니다.

  • ex) LayoutWT, ContentsContainer, SectionSheet, MainButton

• x-pds-element-type

  • 해당 요소의 카테고리를 의미합니다.

  • ex) layer, layout, panel, component

• x-pds-device-type

  • 해당 요소의 최적화 대상 디바이스를 의미합니다.

  • ex) desktop, mobile

• x-pds-layout-type

  • 해당 요소의 x-pds-element-type이 layout이고, 소분류 레이아웃 타입을 가졌을 경우 부여되며, 소분류된 레이아웃 타입이 무엇인지를 의미합니다.

  • ex) WTA, WSA, WFA, MMA, MFA, MPA, MSA

• x-dlayout-section-type (sub영역 DynamicLayout에만 부여됩니다.)

  • 해당 요소의 섹션 유형을 의미합니다.

  • ex) Intro, Contents, ContentsCarousel, InfoBox, Footer

• x-dlayout-section-element-name (sub영역 DynamicLayout에만 부여됩니다.)

  • 섹션 내부 해당 요소의 고유한 명칭을 의미합니다.

  • Title, Description, Image, Button, Item

• x-dlayout-item-element-name (sub영역 DynamicLayout에만 부여됩니다.)

  • x-dlayout-section-element-name이 Item인 요소 내부 요소의 고유한 명칭을 의미합니다.

  • Title, Description, Image, Button

각 단위별 가질 수 있는 key

• layout 단위 키 명칭 및 생성 방법

  • x-pds-name

  • x-pds-element-type

  • x-pds-device-type

  • x-pds-layout-type

• panel 단위 키 명칭 및 생성 방법

  • x-pds-name

  • x-pds-element-type

  • x-pds-device-type

• component 단위 키 명칭 및 생성 방법

  • x-pds-name

  • x-pds-element-type

  • x-pds-device-type

• DynamicLayout 키 명칭 및 생성 방법

  • x-dlayout-section-type

  • x-dlayout-section-element-name

  • x-dlayout-item-element-name

key를 활용한 CSS 작성 방법

CSS 특성 선택자를 활용하여 작성할 수 있습니다.

• 관련 문서

  • https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

• 예시

  • CSS

     [x-pds-name='TextLabel'] {
        background-color: red;
      } 

문서 작성 정보