개요

Menu 컴포넌트를 구성하는 MenuItemControl 오브젝트입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

- Menu 컴포넌트에 Item 으로 한개 이상 추가되는 Control 오브젝트입니다.

Status

Name	Type	Description
disabled	status	컴포넌트가 비활성화된 상태
selected	userstatus	컴포넌트의 특정 아이템이 선택된 상태
mouseover	status	마우스 커서가 컴포넌트 또는 컴포넌트의 특정 아이템 위에 있는 상태
focused	status	컴포넌트가 포커스를 받은 상태
enabled	status	컴포넌트가 활성화된 상태

속성

background

MenuItemControl 의 배경 영역을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.background

문법 설정

strBackground ::= [<bg-image> \| <linear-gradient>] [<background-origin> [<background-clip>]] [<background-color>] <bg-image> ::= 'none' \| <imageurl> [<repeat-style>] [<position>] <imageurl> ::= 'URL(' <Theme-Image> \| <Web-Image> ')' <repeat-style> ::= 'repeat-x' \| 'repeat-y' \| 'repeat' \| 'no-repeat' <position> ::= <horizontal-position> <vertical-position> ['/' <background-size>] <horizontal-position> ::= 'left' \| 'center' \| 'right' \| <pos-percentage> '%' <vertical-position> ::= 'top' \| 'center' \| 'bottom' \| <pos-percentage> '%' <background-size> ::= 'auto' \| 'cover' \| 'contain' \| (<length> 'px' \| <percentage> '%') {1,2} <linear-gradient> ::= 'linear-gradient(' [<angle> , ] <color-stop> ')' <angle> ::= 'to left' \| 'to right' \| 'to top' \| 'to bottom' \| 'to left top' \| 'to left bottom' \| 'to right top' \| 'to right bottom' <color-stop> ::= <startcolor-stop> [<listcolor-stop>] <endcolor-stop> <startcolor-stop> ::= <color> [<percentage>'%'] <endcolor-stop> ::= <color> [<percentage>'%'] <listcolor-stop> ::= <color> [<percentage>'%"] [,<listcolor-stop>]* <color> ::= <NamedColor> \| <NumericColor> <background-origin> ::= 'border-box' \| 'padding-box' <background-clip> ::= 'border-box' \| 'padding-box' <background-color> ::= <NamedColor> \| <NumericColor>
* XCSS background : #ffffaa; background : url('./images/smiley.gif') no-repeat center center #ffffaa; background : url('./images/smiley.gif') no-repeat center center /auto #ffffaa; background : url('./images/smiley.gif') no-repeat center center /15px 15% #ffffaa; background : linear-gradient( red , blue , yellow ); background : linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0)); background : url('./images/smiley.gif') border-box border-box #ffffaa;
<bg-image>	배경에 표시될 이미지를 "'none' \| <imageurl> [<repeat-style>] [<position>]" 형식으로 설정합니다. <background-color> 값이 설정되어 있으면 배경색 위로 이미지가 표시됩니다. "none" 으로 설정하면 이미지를 설정하지 않습니다. <imageurl> 값으로 이미지를 설정할 수 있습니다. <repeat-style> 값으로 이미지의 반복표시 방향을 설정할 수 있습니다. <position> 값으로 이미지의 표시위치를 설정할 수 있습니다. 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
<imageurl>	배경에 표시될 이미지를 "'URL(' <Theme-Image> \| <Web-Image> ')'" 형식으로 설정합니다. "URL ( [이미지경로] )" 형식으로 테마 또는 웹의 이미지를 설정합니다.
<Theme-Image>	테마에 선언된 이미지를 "theme://images\이미지명" 형식으로 설정합니다. 테마에 해당 이미지가 등록되어 있어야 합니다.
<Web-Image>	웹의 이미지를 "http://경로/이미지명", "https://경로/파일명" 형식으로 설정합니다. 웹에 접근 가능한 환경이어야 합니다.
<repeat-style>	배경에 표시될 이미지의 반복표시 방향을 설정합니다. "repeat-x" 설정 시 이미지가 가로 방향으로 반복표시 됩니다. "repeat-y" 설정 시 이미지가 세로 방향으로 반복표시 됩니다. "repeat" 설정 시 이미지가 가로,세로 방향으로 모두 반복표시 됩니다. "no-repeat" 설정 시 이미지가 반복표시 되지 않습니다. 값을 설정하지 않으면 "repeat" 로 적용됩니다.
<horizontal-position>	배경에 표시될 이미지의 가로 위치를 설정합니다. "left" 설정 시 MenuItemControl 의 왼쪽면과 이미지의 왼쪽면이 정렬되어 표시됩니다. "center" 설정 시 MenuItemControl 의 중앙과 이미지의 중앙이 정렬되어 표시됩니다. "right" 설정 시 MenuItemControl 의 오른쪽면과 이미지의 오른쪽면이 정렬되어 표시됩니다. <pos-percentage> '%' 형식으로 설정 시 이미지의 위치가 비율로 설정됩니다. <vertical-position> 값을 설정하고, <horizontal-position> 값을 설정하지 않으면 <horizontal-position> 은 "center" 로 적용됩니다. <vertical-position> 값과 <horizontal-position> 값을 모두 설정하지 않으면 <horizontal-position> 은 "left" 로 적용됩니다.
<vertical-position>	배경에 표시될 이미지의 세로 위치를 설정합니다. "top" 설정 시 MenuItemControl 의 윗쪽면과 이미지의 윗쪽면이 정렬되어 표시됩니다. "center" 설정 시 MenuItemControl 의 중앙과 이미지의 중앙이 정렬되어 표시됩니다. "bottom" 설정 시 MenuItemControl 의 아랫쪽면과 이미지의 아랫쪽면이 정렬되어 표시됩니다. <pos-percentage> '%' 형식으로 설정 시 이미지의 위치가 비율로 설정됩니다. <horizontal-position> 값을 설정하고, <vertical-position> 값을 설정하지 않으면 <vertical-position> 은 "center" 로 적용됩니다. <vertical-position> 값과 <horizontal-position> 값을 모두 설정하지 않으면 <vertical-position> 은 "top" 으로 적용됩니다.
<pos-percentage>	배경에 표시될 이미지의 가로/세로 위치를 비율로 설정합니다. <horizontal-position> 에 "0%" 설정 시 "left" 와 같은 위치로 적용됩니다. <horizontal-position> 에 "50%" 설정 시 "center" 와 같은 위치로 적용됩니다. <horizontal-position> 에 "100%" 설정 시 "right" 과 같은 위치로 적용됩니다. <vertical-position> 에 "0%" 설정 시 "top" 와 같은 위치로 적용됩니다. <vertical-position> 에 "50%" 설정 시 "center" 와 같은 위치로 적용됩니다. <vertical-position> 에 "100%" 설정 시 "bottom" 과 같은 위치로 적용됩니다. 0 보다 작거나 100 보다 큰 값을 설정 시 MenuItemControl 의 영역을 벗어난 가상의 위치로 적용됩니다. 값 설정 시 "%" 단위를 생략할 수 없습니다.
<background-size>	배경에 표시될 이미지의 크기를 설정합니다. - auto: 원본 이미지 크기를 유지합니다. - cover: 이미지 비율을 유지하는 한도 내에서 배경에 빈 공간이 없도록 가장 크게 설정합니다. width 또는 height 길이가 긴 쪽은 잘려서 표시될 수 있습니다. - contain: 이미지가 잘리지 않고 비율을 유지하는 한도 내에서 가장 크게 설정합니다. - <length> \| <percentage>: 이미지의 width, height 크기 또는 컴포넌트 대비 비율을 설정합니다. width 값만 설정하면 원본 이미지 비율에 따라 height 크기를 자동으로 처리합니다. height 값만 설정할 수는 없습니다. 음수값은 설정할 수 없습니다.
<linear-gradient>	배경에 표시될 그라데이션을 "'linear-gradient(' [<angle> , ] <color-stop> ')'" 형식으로 설정합니다. <background-color> 값이 설정되어 있으면 배경색 위로 그라데이션이 표시됩니다. "linear-gradient ( [방향, 색상값, 색상값, ...] )" 형식으로 그라데이션 방향과 색상을 설정할 수 있습니다. 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
<angle>	그라데이션의 표시 방향을 설정합니다. "to left" 설정 시 오른쪽에서 왼쪽 방향으로 그라데이션이 표시됩니다. "to right" 설정 시 왼쪽에서 오른쪽 방향으로 그라데이션이 표시됩니다. "to top" 설정 시 아래쪽에서 윗쪽 방향으로 그라데이션이 표시됩니다. "to bottom" 설정 시 윗쪽에서 아래쪽 방향으로 그라데이션이 표시됩니다. "to left top" 설정 시 오른쪽 아래 방향에서 왼쪽 윗 방향으로 그라데이션이 표시됩니다. "to left bottom" 설정 시 오른쪽 윗 뱡향에서 왼쪽 아래 방향으로 그라데이션이 표시됩니다. "to right top" 설정 시 왼쪽 아래 방향에서 오른쪽 윗 방향으로 그라데이션이 표시됩니다. "to right bottom" 설정 시 왼쪽 윗 방향에서 오른쪽 아래 방향으로 그라데이션이 표시됩니다. 값을 설정하지 않으면 "to bottom"으로 적용됩니다.
<color-stop>	그라데이션의 시작점, 끝점, 중간점의 색을 "<startcolor-stop> [<listcolor-stop>] <endcolor-stop>" 형식으로 설정합니다. <angle> 값에 설정된 방향에 따라 시작점과 끝점의 위치가 결정됩니다. 예를 들어 <angle> 값이 "to left" 이면 MenuItemControl 의 right 위치가 시작점이 되고, left 위치가 끝점이 됩니다. <angle> 값이 "to right" 이면 MenuItemControl 의 left 위치가 시작점이 되고, right 위치가 끝점이 됩니다. <listcolor-stop> 에 그라데이션 중간점의 색을 한개 이상 설정할 수 있으며 <percentage> 값 생략 시 균등하게 표시됩니다.
<startcolor-stop>	그라데이션의 시작점 색을 "<color> [<percentage>'%']" 형식으로 설정합니다. <angle> 값에 설정된 방향에 따라 시작점 위치가 결정됩니다. 시작점의 <percentage> 값을 "0" 이상으로 설정 시 "시작점~설정값"까지 동일한 색상으로 표시됩니다.
<endcolor-stop>	그라데이션의 끝점 색을 "<color> [<percentage>'%']" 형식으로 설정합니다. <angle> 값에 설정된 방향에 따라 끝점 위치가 결정됩니다. 끝점의 <percentage> 값을 "100" 이하로 설정 시 "설정값~끝점"까지 동일한 색상으로 표시됩니다.
<listcolor-stop>	그라데이션의 중간점 색을 "<color> [<percentage>'%"] [,<listcolor-stop>]*" 형식으로 설정합니다. 시작점과 끝점 사이에 적용될 중간색을 ","로 구분하여 여러개 설정할 수 있습니다. 뒤에 선언된 색의 <percentage> 값은 먼저 선언된 색의 <percentage> 값보다 커야 합니다.
<color>	그라데이션 색상을 색상이름 또는 색상코드로 설정합니다.
<percentage>	<color> 에 해당하는 색이 적용될 위치를 비율값으로 설정합니다. <angle> 값에 의해 결정된 시작점이 "0%" 로 적용됩니다. <angle> 값에 의해 결정된 끝점이 "100%" 로 적용됩니다. 0 보다 작거나 100 보다 큰 값을 설정 시 MenuItemControl 의 영역을 벗어난 가상의 위치로 적용됩니다. 예를 들어 "150%" 설정 시 시작점에서 끝점까지 거리의 반만큼 끝점에서 벗어난 위치에 <color> 값이 적용됩니다. <percentage> 값을 생략하면 균등한 위치에 <color> 값이 적용됩니다. 값 설정 시 "%" 단위를 생략할 수 없습니다.
<background-origin>	배경으로 처리될 기준영역을 설정합니다. "border-box" 설정 시 Border 를 포함한 영역이 배경영역으로 처리됩니다. "padding-box" 설정 시 Border 의 안쪽 영역이 배경영역으로 처리됩니다. "padding-box" 설정 시 그라데이션의 시작점, 끝점과 배경이미지의 반복 기준위치가 Border 안쪽 영역으로 처리됩니다. 값을 설정하지 않으면 "padding-box" 로 적용됩니다.
<background-clip>	배경이 실제로 표시될 영역을 설정합니다. "border-box" 설정 시 Border 를 포함한 영역에 배경이 표시됩니다. "padding-box" 설정 시 Border 의 안쪽 영역에 배경이 표시됩니다. 값을 설정하지 않으면 <background-origin> 에 설정한 값이 동일하게 적용됩니다. <background-origin> 값도 설정하지 않았을 경우 "border-box" 로 적용됩니다.
<background-color>	배경에 표시될 색을 색상이름 또는 색상코드로 설정합니다. <bg-image> 또는 <linear-gradient> 값이 설정되어 있다면 배경색은 배경이미지 또는 그라데이션 아래에 표시됩니다. <bg-image> 에 적용된 이미지에 투명으로 적용된 부분이 있거나 이미지가 MenuItemControl 영역보다 작다면 해당 영역에 배경색이 표시됩니다. 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
<NamedColor>	"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.
<NumericColor>	표시할 색의 색상코드입니다. "#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF") red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)") red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)") hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)") hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- background 속성값을 설정하지 않으면 undefined 가 설정되고, "transparent" 로 동작합니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.
   사용자 Prefix 는 스크립트 또는 넥사크로 스튜디오에서 속성값으로 설정 시 사용할 수 있습니다.

- 배경의 기준영역과 표시영역은 <background-origin>, <background-clip> 값으로 각각 설정합니다.

- 배경 이미지를 중앙에 위치시키려면 <position> 값을 "center" 또는 "center center" 로 설정하여야 합니다.

- 배경이미지와 배경색을 모두 설정하면 배경색 위에 이미지가 표시됩니다.
   그라데이션과 배경색을 모두 설정하면 배경색 위에 그라데이션이 표시됩니다.

- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
   두 값을 동시에 설정 시 오동작이 발생할 수 있습니다.

border-radius

MenuItemControl 의 모서리 모양을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.border-radius

문법 설정

border-radius ::= <horizontal-radius>{4} ['/' <vertical-radius>{4}]
* XCSS border-radius : 10px; border-radius : 5px 6px 10px / 5px 10px;
<horizontal-radius>	모서리를 둥글게 표시하기 위한 가로크기를 설정합니다. pixel 단위로 입력하며 스페이스를 구분자로 4개값까지 설정할 수 있습니다. 값을 1회 입력 시 top-left/top-right/bottom-right/bottom-left 모서리의 가로크기로 모두 동일한 값이 적용됩니다. 값을 2회 입력 시 top-left/bottom-right, top-right/bottom-left 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다. 값을 3회 입력 시 top-left, top-right/bottom-left, bottom-right 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다. 값을 4회 입력 시 top-left, top-right, bottom-right, bottom-left 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다.
<vertical-radius>	모서리를 둥글게 표시하기 위한 세로크기를 설정합니다. pixel 단위로 입력하며 스페이스를 구분자로 4개값까지 설정할 수 있습니다. 값을 1회 입력 시 top-left/top-right/bottom-right/bottom-left 모서리의 세로크기로 모두 동일한 값이 적용됩니다. 값을 2회 입력 시 top-left/bottom-right, top-right/bottom-left 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다. 값을 3회 입력 시 top-left, top-right/bottom-left, bottom-right 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다. 값을 4회 입력 시 top-left, top-right, bottom-right, bottom-left 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다.

참고

- border-radius 속성값을 설정하지 않으면 undefined 가 설정되고, "0px" 로 동작합니다. 

- <horizontal-radius> 와 <vertical-radius> 는 "/" 문자로 구분하여 입력합니다.

◆ NRE 제약

- border-radius 속성을 설정하면 모든 테두리가 같은 색으로 적용됩니다.
   -nexa-border 속성에서 top 에 적용된 색이 모든 테두리에 적용됩니다.

color

MenuItemControl 에 표시되는 텍스트의 색상을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.color

문법 설정

color ::= <NamedColor> \| <NumericColor>
* XCSS color : #999999; color : rgb ( 255, 0, 0 ); color : red;
<NamedColor>	"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.
<NumericColor>	표시할 색의 색상코드입니다. "#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF") red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)") red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)") hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)") hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- color 속성값을 설정하지 않으면 undefined 가 설정되고, "#000000" 으로 동작합니다.

cursor

MenuItemControl 영역에서 표시될 마우스 포인터의 종류를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.cursor

문법 설정

cursor ::= 'none' \| 'auto' \| 'default' \| 'copy' \| 'crosshair' \| 'help' \| 'move' \| 'not-allowed' \| 'pointer' \| 'progress' \| 'text' \| 'wait' \| 'ew-resize' \| 'e-resize' \| 'w-resize' \| 'ns-resize' \| 'n-resize' \| 's-resize' \| 'nesw-resize' \| 'ne-resize' \| 'sw-resize' \| 'nwse-resize' \| 'nw-resize' \| 'se-resize'
* XCSS cursor : default ;
"none"	마우스 포인터를 표시하지 않습니다. macOS NRE는 지원하지 않습니다.
"auto"	컴포넌트의 특성에 맞는 포인터가 표시됩니다. Edit계열 컴포넌트는 "text" 포인터가 표시됩니다. 그외 계열 컴포넌트는 "arrow" 포인터가 표시됩니다.
"default"	시스템의 기본 포인터가 표시됩니다. 일반적으로 "arrow" 포인터가 표시됩니다.
"copy"	화살표와 작은 십자("+") 모양의 포인터가 표시됩니다. macOS NRE는 지원하지 않습니다.
"crosshair"	십자("+") 모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"help"	화살표와 작은 물음표 모양의 포인터가 표시됩니다. Safari 브라우저는 물음표 모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"move"	십자 화살표 모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"not-allowed"	금지 표지판 모양의 포인터가 표시됩니다. Safari 브라우저는 화살표와 금지 표지판 모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"pointer"	손모양의 포인터가 표시됩니다. macOS NRE 는 지원하지 않습니다.
"progress"	OS 또는 환경에 따라 다른 형태의 포인터가 표시됩니다. 원, 화살표와 모래시계, 화살표와 원 등 다양한 형태로 표시됩니다. macOS NRE 에서는 지원하지 않습니다.
"text"	아이("I") 모양의 포인터가 표시됩니다.
"wait"	OS 또는 환경에 따라 다른 형태의 포인터가 표시됩니다. 원, 모래시계, 시계 등 다양한 형태로 표시됩니다.
"ew-resize"	수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"e-resize"	수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"w-resize"	수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"ns-resize"	수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다. macOS NRE는 지원하지 않습니다.
"n-resize"	수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"s-resize"	수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"nesw-resize"	사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"ne-resize"	사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"sw-resize"	사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.
"nwse-resize"	역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다. macOS NRE는 지원하지 않습니다.
"nw-resize"	역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다. macOS 는 지원하지 않습니다.
"se-resize"	역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

참고

- cursor 속성값을 설정하지 않으면 undefined 가 설정되고 "auto" 로 동작합니다.

- disable 상태인 서브컨트롤이 있는 컴포넌트의 경우 마우스 포인터는 서브컨트롤 영역에서
   서브컨트롤의 disable status값이 적용되지 않고, 컴포넌트의 enable status 설정값이 적용됩니다.
   서브컨트롤과 컴포넌트가 모두 disable 상태일 때는 parent 의 enable status 설정값이 적용됩니다.

font

MenuItemControl 에서 사용하는 폰트를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.font

문법 설정

strfont ::= [<font-style>] [<font-weight>] <font-size> ['/'<line-height>] <font-family> <font-style> ::= 'normal' \| 'italic' <font-weight> ::= 'normal' \| 'bold' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900' <font-size> ::= <nSize> 'px'\|'pt'\|'em'\|'rem' <line-height> ::= 'normal' \| <nValue> \| <nPixel>'px' \| <nPercent>'%' <font-family> ::= <font-name> [',' <font-name>]*
* XCSS font : bold 12pt/30px arial, sans-serif;
<font-style>	폰트의 스타일을 설정합니다. "normal" 설정 시 스타일이 적용되지 않습니다. "italic" 설정 시 기울임 스타일이 적용됩니다.
<font-weight>	폰트의 굵기를 설정합니다. "normal" 설정 시 굵기가 적용되지 않습니다. "bold" 설정 시 굵은 폰트가 적용됩니다. "100"~"900" 로 설정 시 설정한 굵기로 폰트가 적용됩니다. "100"~"900" 로 설정 시 굵기에 해당하는 폰트가 정의되어 있어야 합니다.
<font-size>	폰트 크기의 단위는 아래와 같이 절대 길이 단위와 상대 길이 단위로 설정할 수 있습니다. 단위를 지정하지 않으면 속성값이 적용되지 않습니다. - 절대 길이 단위: pixel("px"), point("pt") - 상대 길이 단위: "em", "rem" 폰트 크기 단위를 "em", "rem"으로 설정한 경우에는 아래와 같이 폰트 크기가 계산됩니다. - "em": 상위 컴포넌트 font-size 기준으로 상대적인 크기를 설정 - "rem": MainFrame font-size 기준으로 상대적인 크기를 설정
<nSize>	폰트 크기 단위에 따라 정수 또는 소수로 설정합니다. 음수값은 설정할 수 없습니다. - "px", "pt": 정수 - "em", "rem": 정수 또는 소수
<line-height>	텍스트가 여러줄로 표시되는 경우 줄 사이의 간격을 설정합니다. 음수값을 설정할 수 없습니다. "normal" 설정 시 줄 사이의 간격을 설정하지 않습니다. "normal" 설정 시 웹브라우저마다 줄 사이의 간격이 다르게 적용됩니다. "normal" 설정 시 Nexacro Runtime Environment는 폰트 크기에 곱할 값(<nValue>값)이 "1.15" 일 때와 동일하게 동작합니다.
<nValue>	폰트 크기에 곱할 값을 설정합니다. 계산 결과값이 줄 사이 간격으로 적용됩니다.
<nPixel>	줄 사이의 간격을 pixel 단위의 숫자로 설정합니다. "px" 단위를 생략할 수 없습니다.
<nPercent>	폰트 크기에 곱할 비율값을 설정합니다. 계산 결과값이 줄 사이 간격으로 적용됩니다. "%" 단위를 생략할 수 없습니다.
<font-family>	폰트 이름을 리스트로 설정합니다. 콤마(",")로 구분하여 폰트 이름을 여러개 설정할 수 있습니다. 먼저 선언된 폰트가 우선적으로 적용됩니다. 선언된 폰트가 시스템에 없을 경우 선언된 순서대로 사용 가능한 폰트를 적용합니다. 선언된 폰트가 모두 없을 경우 시스템 기본 폰트가 적용됩니다.
<font-name>	폰트의 이름을 설정합니다.

참고

- font 속성값을 설정하지 않으면 undefined 가 설정되고, "12pt/normal Verdana" 로 동작합니다.

- font 속성의 폰트 크기가 변경되면 <line-height> 에 적용된 값에 따라 줄간격이 변경될 수 있습니다.

- <font-weight> 를 수치로 설정 시 "400" 값이 일반적인 굵기로 적용되고, "700" 값이 "bold" 로 적용됩니다.
  폰트에 수치값에 해당하는 폰트굵기가 없다면 "400" 과 "700" 중 가까운 값으로 표시됩니다.

- UserFont 사용 시 환경별로 지원하는 포맷정보는 "Appendix > Supported UserFont" 항목을 참고하세요.


◆ WRE 제약

- -nexa-text-align 속성값이 "right" 일 때 font 속성에 "italic" 을 설정하면 마지막 텍스트의 기울어진 부분이 잘려서 표시될 수 있습니다.
   웹브라우저에서 텍스트영역을 일반글자 기준으로 처리한 후 기울임을 적용하면서 발생하는 문제입니다.

letter-spacing

MenuItemControl 에 표시되는 문자의 간격(자간)을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.letter-spacing

문법 설정

letter-spacing ::= 'normal' \| <nVal> 'px'
* XCSS letter-spacing : 2px ;
"normal"	문자 사이의 간격(자간)을 설정하지 않습니다.
<nVal>	문자 사이의 간격(자간)을 pixel 단위로 설정합니다.

참고

- letter-spacing 속성값을 설정하지 않으면 undefined 가 설정되고, "normal" 로 동작합니다.

-nexa-border

MenuItemControl 의 테두리를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.-nexa-border

문법 설정

-nexa-border ::= <line-width> <line-style> <color> [,<line-width> <line-style> <color>]{3} <line-width> ::= 'thin' \| 'medium' \| 'thick' \| <nWidth> 'px' <line-style> ::= 'none' \| 'hidden' \| 'dotted' \| 'dashed' \| 'solid' \| 'double' \| 'groove' \| 'ridge' \| 'inset' \| 'outset' <color> ::= <NamedColor> \| <NumericColor> 1회 입력 : top/right/bottom/left 에 모두 적용됩니다. 2회 입력 : top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다. 3회 입력 : top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다. 4회 입력 : top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다. * 2회~4회 입력은 border-radius 속성값이 설정되지 않은 경우만 적용됩니다.
* XCSS -nexa-border : 1px solid #999999; -nexa-border : 1px solid #999999, 1px solid #999999, 1px solid #999999, 1px solid #999999;
<line-width>	테두리 선의 두께를 설정합니다. "thin" 설정 시 1 pixel 두께로 테두리가 표시됩니다. "medium" 설정 시 3 pixel 두께로 테두리가 표시됩니다. "thick" 설정 시 5 pixel 두께로 테두리가 표시됩니다. <nWidth> 설정 시 <nWidth> pixel 두께로 테두리가 표시됩니다.
<nWidth>	테두리 선의 두께를 pixel 단위로 설정합니다. "px" 단위는 생략할 수 없습니다.
<line-style>	테두리 선의 스타일을 설정합니다. "none" 설정 시 테두리가 표시되지 않습니다. "hidden" 설정 시 테두리가 표시되지 않습니다. "dotted" 설정 시 테두리가 점선으로 표시됩니다. "dashed" 설정 시 테두리가 긴 점선으로 표시됩니다. "solid" 설정 시 테두리가 실선으로 표시됩니다. "double" 설정 시 테두리가 두줄로 표시됩니다. "groove" 설정 시 테두리가 들어간 것처럼 보이게 입체적으로 표시됩니다. "ridge" 설정 시 테두리가 올라온 것처럼 보이게 입체적으로 표시됩니다. "inset" 설정 시 컴포넌트가 들어간 것처럼 보이게 테두리가 입체적으로 표시됩니다. "outset" 설정 시 컴포넌트가 올라온 것처럼 보이게 테두리가 입체적으로 표시됩니다.
<color>	테두리 색상을 색상이름 또는 색상코드로 설정합니다.
<NamedColor>	"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.
<NumericColor>	표시할 색의 색상코드입니다. "#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF") red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)") red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)") hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)") hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- -nexa-border 속성값을 설정하지 않으면 undefined 가 설정되고, "medium none #999999" 로 동작합니다.

- <line-style> 이 "double" 일 때 두 줄을 다른 색으로 설정할 수 없습니다.
   <color> 에 설정된 색이 두 줄에 모두 적용됩니다.

- -nexa-border 속성값에 의해 테두리가 설정되면 fittocontents 속성값을 기준으로 크기가 변경되는 영역이 달라집니다.
   > fittocontents 속성값에 의해 크기가 고정되는 방향은 텍스트 영역의 크기가 확대/축소 됩니다.
   > fittocontents 속성값에 의해 크기가 자동설정 되는 방향은 MenuItemControl 의 크기가 확대/축소 됩니다.
      예를 들어 fittocontents 속성값이 "width" 인 경우 너비는 MenuItemControl 이 변경되고, 높이는 텍스트 영역이 변경됩니다.
   > fittocontents 속성은 메인메뉴에만 적용되고, 팝업되는 서브메뉴에는 적용되지 않습니다.


◆ NRE 제약

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 top > right > bottom > left 순으로 겹쳐서 표시됩니다.

- <line-style> 파라미터에 "double","groove","ridge","inset","outset" 값을 설정해도 적용되지 않습니다.

- <line-width> 파라미터에 "thin","medium","thick" 값을 설정해도 적용되지 않습니다.


◆ WRE 제약

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 웹브라우저에 따라 테두리가 겹쳐지는 순서가 다르게 처리될 수 있습니다.

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 border-radius 속성값이 설정되어 있으면 
   두께는 각 테두리 별로 따로 적용되고, 색상은 top 에 설정된 색이 적용됩니다.

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 border-radius 속성값이 설정되어 있어도
   일부 브라우저는 각 테두리의 색상이나 두께가 각각 적용됩니다.

-nexa-edge

MenuItemControl 의 테두리(Border) 안쪽에 표시될 Edge 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.-nexa-edge

문법 설정

-nexa-edge ::= 'none' \| <image> [<fixedwidth>'px' <fixedheight>'px'] <image> ::= 'URL("' <Theme-Image> \| <Web-Image> '")'
* XCSS -nexa-edge : URL("./images/border.png") 5px 5px;
"none"	edge 이미지를 설정하지 않습니다.
<image>	'URL ("[이미지위치]")' 형식으로 테마 또는 웹의 이미지를 설정합니다. 테두리(border) 안쪽에 edge 형태로 이미지가 표시됩니다.
<Theme-Image>	테마에 선언된 이미지를 "theme://images\이미지명" 형식으로 설정합니다. 테마에 해당 이미지가 등록되어 있어야 합니다.
<Web-Image>	웹의 이미지를 "http://경로/이미지명", "https://경로/파일명" 형식으로 설정합니다. 웹에 접근 가능한 환경이어야 합니다.
<fixedwidth>	이미지가 고정되어 표시될 왼쪽/오른쪽 영역의 크기를 pixel 단위로 설정합니다. "0px" 설정 시 왼쪽/오른쪽 영역을 고정하지 않습니다. 값을 설정하지 않으면 "0px" 로 적용됩니다.
<fixedheight>	이미지가 고정되어 표시될 위쪽/아래쪽 영역의 크기를 pixel 단위로 설정합니다. "0px" 설정 시 위쪽/아래쪽 영역을 고정하지 않습니다. 값을 설정하지 않으면 "0px" 로 적용됩니다.

참고

- -nexa-edge 속성값을 설정하지 않으면 undefined 가 설정되고, "none" 으로 동작합니다.

- MenuItemControl 내부에 테두리 형태로 이미지를 표시하고자 할 때 사용하는 속성입니다.

- -nexa-edge 속성값을 설정하면 이미지의 상/하/좌/우 일정 영역(<fixedwidth>,<fixedheight> 값)을 고정하고 안쪽 사각형 영역을 Stretch 하여 처리합니다.

- background 속성에 의해 배경색 또는 이미지가 설정되어 있어도 -nexa-edge 속성에 설정된 이미지가 제일 위에 표시됩니다.


◆ web runtime environment 제약

- <fixedwidth>,<fixedheight> 값이 이미지사이즈의 1/2을 초과할 경우 브라우저별로 보이는 형태가 다를 수 있습니다.

- CSS3 스펙을 지원하지 않는 브라우저 버전에서는 정상적으로 표시되지 않을 수 있습니다.

-nexa-padding

MenuItemControl 에서 텍스트와 테두리 사이의 여백을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.-nexa-padding

문법 설정

-nexa-padding ::= <npadding>'px'{4}
* XCSS -nexa-padding : 5px 5px 5px 5px;
<npadding>	MenuItemControl 에서 텍스트와 테두리 사이의 여백을 pixel 단위로 설정합니다. 값을 1회 입력 시 top/right/bottom/left 에 모두 동일한 값이 적용됩니다. 값을 2회 입력 시 top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다. 값을 3회 입력 시 top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다. 값을 4회 입력 시 top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다. "px" 단위를 생략할 수 없습니다.

-nexa-padding ::= <npadding>'px'{4}

* XCSS
-nexa-padding : 5px 5px 5px 5px;

MenuItemControl 에서 텍스트와 테두리 사이의 여백을 pixel 단위로 설정합니다.

값을 1회 입력 시 top/right/bottom/left 에 모두 동일한 값이 적용됩니다.

값을 2회 입력 시 top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다.

값을 3회 입력 시 top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다.

값을 4회 입력 시 top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다.

"px" 단위를 생략할 수 없습니다.

참고

- -nexa-padding 속성값을 설정하지 않으면 undefined 가 설정되고, "0px" 로 동작합니다.

- -nexa-padding 속성은 Menu 아이템에 표시되는 텍스트의 바깥영역에 적용됩니다.

- -nexa-padding 속성값에 의해 여백이 설정되면 fittocontents 속성값을 기준으로 크기가 변경되는 영역이 달라집니다.
   fittocontents 속성값에 의해 크기가 고정되는 방향은 텍스트 영역의 크기가 확대/축소 됩니다.
   fittocontents 속성값에 의해 크기가 자동설정 되는 방향은 MenuItemControl 의 크기가 확대/축소 됩니다.
   예를 들어 fittocontents 속성값이 "width" 인 경우 너비는 MenuItemControl 이 변경되고, 높이는 텍스트 영역이 변경됩니다.

- fittocontents 속성은 메인메뉴에만 적용되고, 팝업되는 서브메뉴에는 적용되지 않습니다.

-nexa-rtl-background-image

MenuItemControl 의 rtl 속성이 true 로 적용될 때 배경에 표시될 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.-nexa-rtl-background-image

문법 설정

strRtlBgImage ::= "URL(' " <Theme-Image> \| <Web-Image> " ')"
* XCSS -nexa-rtl-background-image : URL("http://localhost/Test.jpg"); -nexa-rtl-background-image : URL("theme://images/Test.jpg");
strRtlBgImage	"URL ('<이미지위치>')" 형식으로 테마 또는 웹의 이미지 경로를 문자열로 설정합니다. background 속성에 설정된 값 중 이미지만 설정한 이미지로 대체됩니다. background 속성에 설정된 이미지 이외의 값은 동일하게 적용됩니다.
<Theme-Image>	테마에 정의된 이미지를 "theme://images/이미지명" 형식으로 설정합니다. 테마에 해당 이미지가 등록되어 있어야 합니다.
<Web-Image>	웹의 이미지를 "http://경로/이미지명", "https://경로/이미지명" 형식으로 설정합니다. 웹에 접근 가능한 환경이어야 합니다.

참고

- rtl 속성에 의해 표시기준이 변경되면 반전된 이미지를 적용하려 할 때 사용하는 속성입니다.

- XCSS 에서만 설정할 수 있는 속성으로 스크립트로 값을 변경할 수 없습니다.
   XCSS 에 -nexa-rtl-background-image 속성값을 설정하지 않으면 background 속성에 설정된 이미지가 적용됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.

- 배경이미지가 적용되는 영역은 컴포넌트의 클라이언트 영역입니다.

- background 속성에 배경색이 설정되어 있을 경우 배경색 위에 이미지가 표시됩니다.

- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
   background 속성에 그라데이션이 설정되어 있을 경우 오동작이 발생할 수 있습니다.

-nexa-rtl-edge-image

MenuItemControl 의 rtl 속성이 true 로 적용될 때 테두리(Border) 안쪽에 표시될 Edge 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.-nexa-rtl-edge-image

문법 설정

strRtlEgImage ::= "URL(' " <Theme-Image> \| <Web-Image> " ')"
* XCSS -nexa-rtl-edge-image : URL("http://localhost/Test.jpg"); -nexa-rtl-edge-image : URL("theme://images/Test.jpg")
strRtlEgImage	"URL ('<이미지위치>')" 형식으로 테마 또는 웹의 이미지 경로를 문자열로 설정합니다. -nexa-edge 속성에 설정된 값 중 이미지만 설정한 이미지로 대체됩니다. -nexa-edge 속성에 설정된 이미지 이외의 값은 동일하게 적용됩니다.
<Theme-Image>	테마에 정의된 이미지를 "theme://images/이미지명" 형식으로 설정합니다. 테마에 해당 이미지가 등록되어 있어야 합니다.
<Web-Image>	웹의 이미지를 "http://경로/이미지명", "https://경로/이미지명" 형식으로 설정합니다. 웹에 접근 가능한 환경이어야 합니다.

참고

- rtl 속성에 의해 표시기준이 변경되면 반전된 이미지를 적용하려 할 때 사용하는 속성입니다.

- XCSS 에서만 설정할 수 있는 속성으로 스크립트로 값을 변경할 수 없습니다.
   XCSS 에 -nexa-rtl-edge-image 속성값을 설정하지 않으면 -nexa-edge 속성에 설정된 이미지가 적용됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.

- 배경이미지가 적용되는 영역은 컴포넌트의 클라이언트 영역입니다.

- background 또는 -nexa-rtl-background-image 속성에 의해 배경색 또는 이미지가 설정되어 있어도 -nexa-rtl-edge-image 속성에 설정된 이미지가 제일 위에 표시됩니다.


◆ web runtime environment 제약

- CSS3 스펙을 지원하지 않는 브라우저 버전에서는 정상적으로 표시되지 않을 수 있습니다.

-nexa-text-align

MenuItemControl 에 표시되는 텍스트 또는 컨텐츠의 가로 정렬 방식을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.-nexa-text-align

문법 설정

-nexa-text-align ::= 'left' \| 'right' \| 'center'
* XCSS -nexa-text-align : center;
"left"	텍스트 또는 컨텐츠를 왼쪽으로 정렬합니다.
"center"	텍스트 또는 컨텐츠를 가운데로 정렬합니다.
"right"	텍스트 또는 컨텐츠를 오른쪽으로 정렬합니다.

참고

- -nexa-text-align 속성값을 설정하지 않으면 undefined 가 설정되고, 동작되는 기본값이 컴포넌트에 따라 다릅니다.
   > FileDownload, Button, IconControl, IconTextControl 은 "center" 로 동작됩니다.
   > MaskEdit 는 type 속성값이 "number" 이면 "right" 로 동작되고, "string" 이면 "left" 로 동작됩니다.
   > Grid 는 displaytype 속성값에 따라 동작되는 값이 다릅니다.
   > 나머지 컴포넌트는 "left" 로 동작됩니다.

- MenuItemControl 의 너비보다 표시되는 텍스트의 길이가 크면 "right" 를 설정해도 "left" 로 동작됩니다.


◆ web runtime environment 제약

- -nexa-text-align 속성값이 "right" 일 때 font 속성에 "italic" 을 설정하면 마지막 텍스트의 기울어진 부분이 잘려서 표시될 수 있습니다.
   웹브라우저에서 텍스트영역을 일반글자 기준으로 처리한 후 기울임을 적용하면서 발생하는 문제입니다.

-nexa-text-decoration

MenuItemControl 에 표시되는 텍스트에 적용할 효과를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.-nexa-text-decoration

문법 설정

-nexa-text-decoration ::= 'none' \| <txt-deco> [' ' <txt-deco>]{2} <txt-deco> ::= 'underline' \| 'overline' \| 'line-through'
* XCSS -nexa-text-decoration : underline overline;
"none"	텍스트에 효과를 적용하지 않습니다.
<txt-deco>	텍스트에 적용할 효과를 설정합니다. "underline" 설정 시 텍스트에 밑줄 효과가 적용됩니다. "overline" 설정 시 텍스트에 윗줄 효과가 적용됩니다. "line-through" 설정 시 텍스트에 취소선 효과가 적용됩니다.

참고

- -nexa-text-decoration 속성값을 설정하지 않으면 undefined 가 설정되고, "none" 으로 동작합니다.

- 각 효과는 공백(" ")을 구분자로 사용하여 여러번 설정할 수 있습니다.


◆ web runtime environment 제약

- 일부 웹브라우저는 속성값에 "none" 이 포함될 경우 텍스트에 효과가 적용되지 않습니다.

-nexa-vertical-align

MenuItemControl 에 표시되는 텍스트 또는 컨텐츠의 세로 정렬 방식을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.-nexa-vertical-align

문법 설정

-nexa-vertical-align ::= 'top' \| 'middle' \| 'bottom'
* XCSS -nexa-vertical-align : middle;
"top"	텍스트 또는 컨텐츠를 위쪽으로 정렬합니다.
"middle"	텍스트 또는 컨텐츠를 가운데로 정렬합니다.
"bottom"	텍스트 또는 컨텐츠를 아래쪽으로 정렬합니다.

참고

- -nexa-vertical-align 속성값을 설정하지 않으면 undefined 가 설정되고, "middle" 로 동작합니다.

opacity

MenuItemControl 영역의 투명도를 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.opacity

문법 설정

* XCSS opacity : 0.8 ; opacity : 80%;
opacity	0.0 ~ 1.0 사이의 값 또는 0.0% ~ 100.0% 사이의 값을 지정합니다. 0(또는 0%)을 설정하면 완전 투명, 1(또는 100%)을 설정하면 완전 불투명으로 처리됩니다. 1 이상의 값은 1로, 0 이하의 값은 0으로 처리됩니다. 마찬가지로 100% 이상의 값은 100%로, 0% 이하의 값은 0%로 처리됩니다. XCSS는 숫자 또는 퍼센트 값으로만 설정할 수 있습니다.

* XCSS
opacity : 0.8 ;
opacity : 80%;

opacity

0.0 ~ 1.0 사이의 값 또는 0.0% ~ 100.0% 사이의 값을 지정합니다.

0(또는 0%)을 설정하면 완전 투명, 1(또는 100%)을 설정하면 완전 불투명으로 처리됩니다.

1 이상의 값은 1로, 0 이하의 값은 0으로 처리됩니다. 마찬가지로 100% 이상의 값은 100%로, 0% 이하의 값은 0%로 처리됩니다.

XCSS는 숫자 또는 퍼센트 값으로만 설정할 수 있습니다.

참고

- opacity 속성값을 설정하지 않으면 undefined 가 설정되고, 1 로 동작합니다.

- Div 와 같이 자식 컴포넌트를 가질 수 있는 컴포넌트에 opacity 속성을 적용하면 자식 컴포넌트도 함께 적용됩니다.

- 부모와 자식 컴포넌트에 각각 opacity 속성이 설정되어 있으면 자식 컴포넌트의 투명도는 부모의 투명도에 추가적으로 적용됩니다.
   예를 들어 부모의 opacity가 0.5 이고 자식의 opacity가 0.4 이면 결과적으로 자식 컴포넌트는 0.2 의 투명도가 적용됩니다.

word-spacing

MenuItemControl 에 표시되는 텍스트의 단어 사이 간격을 설정하는 속성입니다.

지원 환경

Desktop NRE		Desktop WRE
☑ Windows	☑ macOS	☑ Edge	☑ Chrome	☑ Safari	☑ Firefox	☑ Opera
Mobile NRE		Mobile WRE
☑ Android	☑ iOS/iPadOS	☑ Android	☑ iOS/iPadOS

속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

MenuItemControl.word-spacing

문법 설정

word-spacing ::= 'normal' \| <nVal>'px'
* XCSS word-spacing : 30px ;
"normal"	텍스트의 단어 사이 간격을 설정하지 않습니다. 현재 font 에 맞는 기본형태로 텍스트가 표시됩니다.
<nVal>	pixel 단위로 텍스트의 단어 사이 간격을 설정합니다.

참고

- word-spacing 속성값을 설정하지 않으면 undefined 가 설정되고, "normal" 로 동작합니다.