이 페이지에서는 스타일 시트를 사용하여 디자인 아이디어를 만드는 방법에 대해 설명합니다.

스타일 시트를 편집

UI 편집기 화면 왼쪽 아래에있는 StyleSheet 탭을 클릭하여 활성화된 StyleSheet 탭에 css를 작성합니다.

스타일 시트의 실행 순서

작성한 스타일 시트는 개선을 요구하는 클라이언트의 페이지에 로드된 스타일 시트 이후에 로드됩니다.

따라서 이미 설정되어있는 스타일을 덮어 쓰려면 기존의 기술보다 선택자의 우선 순위가 높도록 작성하거나(권장) !important 키워드를 사용합니다.

선택자의 우선순위는 다음과 같은 기준으로 계산됩니다.

출처: Calculating a selector’s specificity

예를 들어, 기존의 스타일에 다음과 같이 설정되어 있다면,

.container { width: 950px }

UI 편집기에서 다음과 같이 요소 이름을 추가하여 작성하면 우선순위 가산점 +1되어 width 속성을 재정의 할 수 있습니다. 

body .container { width: 850px }