고급 기능
좌측 바의 [디자인] 버튼을 눌러 [고급 기능] 화면에 접속할 수 있습니다. 고급 기능에서 코드를 활용할 수 있는 CSS 와 JavaScript, HTML을 수정하여 사용자에게 보여지는 디자인을 변경하고 설정할 수 있습니다.
CSS Code 란?
CSS (Cascading Style Sheets)는 웹페이지의 디자인을 사용자 설정에 맞춰 변경할 수 있는 코드입니다.
Style Sheet 언어 이고, HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있습니다.
이를 통해 배경색, 폰트 스타일, 간격 등을 원하는 대로 조정할 수 있습니다.
CSS Code 입력하기
[CSS 편집]
[메뉴 및 디자인 설정] 화면에서 [CSS 편집]화면으로 이동합니다.
CSS Code 입력란에 편집할 코드를 입력해주세요.
[저장하기]를 클릭해 편집한 CSS Code를 저장할 수 있습니다.
[CSS 편집]은 고급 사용자를 위한 기능입니다.
코드 입력 시, 페이지에 영향을 줄 수 있으므로 유의하여 편집해주세요.
코드 예시) 텍스트에 배경색을 빨간색으로 설정하고 싶을 때
[x-pds-name='TextLabel'] {background-color: red !important;}
CSS Code 작성 원칙
기본적으로 코드는 개발자 도구(DevTools)을 통해 확인할 수 있습니다.
key 종류
x-pds-name
해당 요소의 고유한 명칭을 의미합니다.
ex) LayoutWT, WFA, MainButton
x-pds-element-type
해당 요소의 카테고리를 의미합니다.
ex) layer, layout, component, panel
x-pds-device-type
해당 요소의 최적화 대상 디바이스를 의미합니다.
ex) layer, layout, component, panel
x-pds-layout-type
해당 요소의 x-pds-element-type이 layout이고, 소분류 레이아웃 타입을 가졌을 경우 부여되며, 소분류된 레이아웃 타입이 무엇인지를 의미합니다.
ex) WTA, WSA, WFA, MMA, MFA, MPA, MSA
각 단위별 가질 수 있는 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
읽어보면 좋을 문서
추가 도움이 필요하신 가요?
문서를 통해 문제가 해결되지 않았다면, 문의 메일(support@publ.biz)로 메일을 보내주시면 publ 고객팀에서 도와드리겠습니다.