개요

개요 시작하기

개요

화면 구성 요소(Component)는 기능을 수행하는 모듈의 단위입니다.
예를 들면, 사용자가 사용할 수 있는 조작이 가능한 인터페이스나 사용자에게 정보를 제공하는 테이블 등을 의미합니다.
리튬 디자인 시스템에서 제공하는 모든 구성 요소는 전체적으로 조화롭게 작동하도록 설계되었습니다.

시작하기

CSS

리튬 디자인 시스템의 HTML Mark Up을 브라우저가 시각적으로 렌더링 하기 위한 파일입니다.
모든 CSS 파일들은 CSS3 표준에 맞춰 제작되었으며, 브라우저 호환성 프로퍼티 또한 포함합니다.

<link rel=“stylesheet” href=“assets/css/lithium.css” />

Javascript

구성 요소가 작동하려면 Javascript를 사용해야 합니다. 특히 jQuery 및 자체 JavaScript 플러그인이 필요합니다.

1. <script src=“assets/js/jquery.js”></script> // jQuery v3.5.1
2. <script src=“assets/js/prefix.js”></script> // CSS3 Compatibility StyleFix 1.0.3 & PrefixFree 1.0.7
3. <script src=“assets/js/lithium.js”></script> // Lithium System Methods

구성 요소의 적용 시 권장사항

리튬 디자인 시스템에서 제공하는 구성 요소는 각 구성 요소에 따라 크기 규칙을 가지고 있습니다.
리튬 디자인 시스템은 제공되는 크기 규칙에 맞게 코드와 UI Kit을 제공하며 이를 활용하여 적용하는 것을 권장합니다.
만약 다른 크기의 구성 요소가 필요한 경우에는 제공되는 XD로 제공하는 UI Kit의 구성 요소를 조절하여 사용하실 수 있습니다.
이 경우에는 기본적으로 제공하는 코드값을 수정하여 사용해야 합니다.

리튬 디자인 시스템은 구성 요소의 좌, 우 패딩값을 제공하며, 텍스트는 상, 하 정렬을 Middle로 제공하고 있습니다.
상, 하는 특별한 경우를 제외하고 패딩값을 제공하지 않습니다. 따라서 구성 요소의 높이값은 자유롭게 조절하여 사용할 수 있습니다.