컨테이너 스타일 지정
고급 반응형 매쉬업은 스타일 테마를 적용할 수 있는 컨테이너를 포함합니다. 매쉬업 스타일 테마를 통해 또는 스타일 속성 패널에서 직접 스타일을 적용할 수 있습니다. 기본적으로 컨테이너는 매쉬업 스타일 테마를 사용하여 스타일 지정되지만 스타일 정의를 사용할 수도 있습니다. 속성 패널의 UseTheme 속성은 컨테이너에 대한 테마 모드를 제어합니다.
컨테이너에 대한 스타일 테마 속성을 표시하려면 다음을 수행합니다.
1. 탐색기 패널에서 컨테이너를 선택합니다.
◦ 또는 컨테이너 내부의 빈 영역을 클릭합니다.
2. 스타일 속성 패널을 클릭합니다.
3. 기본 상태를 확장합니다. 스타일 속성은 flexcontainer 요소 아래에 나열됩니다.
스타일 테마 스타일에서 스타일 정의로 전환할 수 있습니다. 스타일 정의를 사용하려면 다음을 수행합니다.
1. 컨테이너를 선택합니다.
2. 속성 패널에서 UseTheme 확인란의 선택을 취소합니다.
3. 스타일 속성 패널을 클릭합니다.
이제 스타일 속성 대신 컨테이너에 대한 스타일 정의가 표시됩니다.
스타일 속성
다음과 같은 스타일 속성을 지정할 수 있습니다.
|
속성
|
설명
|
|---|---|
|
background
|
컨테이너의 배경색입니다.
|
|
border-color
|
테두리 선의 색입니다.
|
|
border-radius
|
테두리 코너의 반지름입니다. 이 속성은 컨테이너의 네 가지 코너 모두에 적용됩니다.
|
|
border-style
|
테두리 선의 스타일입니다. 이 스타일을 Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Inherit 또는 None으로 설정할 수 있습니다.
|
|
border-width
|
테두리 선의 너비입니다.
|
컨테이너 스타일 속성 사용자 정의
다음 표에는 flexcontainer 요소에 대한 스타일 속성 값이 스타일이 지정된 컨테이너에 대한 사용자 정의 값과 비교되어 나열되어 있습니다.
|
스타일/속성
|
기본값
|
스타일 지정
|
|---|---|---|
|
속성
|
• background - #ffffff
• border-color - inherit
• border-radius - None
• border-style - None
• border-width - None
|
• background - #cccccc
• border-color - #AAE09F
• border-radius - 4px
• border-style - Solid
• border-width - 4px
|
|
미리 보기
|
 |
 |
 |
기본 스타일 속성 값은 매쉬업 스타일 테마에서 파생됩니다.
|