-
Notifications
You must be signed in to change notification settings - Fork 0
/
PARA_01
10324 lines (10324 loc) · 567 KB
/
PARA_01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
{
"elements": [
{
"id": "u_01",
"type": "heading1",
"content": "개요"
},
{
"id": "u_02",
"type": "pre",
"content": "Button 컴포넌트는 사용자가 마우스를 클릭해서 지정한 스크립트를 수행하기 위한 Push Button 컨트롤을 사용하게 하는 컴포넌트입니다.\n\nButton은 기본적으로 사각형의 모양으로, Button을 클릭하면 Button은 눌러진 형태를 보여주며, 놓으면 Button 원래의 모습으로 되돌아옵니다.\nClick과 관련한 이벤트 핸들러를 제공하며 사용자는 제공된 이벤트 핸들러에 스크립트를 작성하여 클릭 동작에 따른 실행을 지정합니다."
},
{
"id": "u_03",
"type": "heading2",
"content": "지원 환경"
},
{
"id": "u_04",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>■ macOS</div></td><td><div>■ Edge</div></td><td><div>■ Chrome</div></td><td><div>■ Safari</div></td><td><div>■ Firefox</div></td><td><div>■ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "u_06",
"type": "heading2",
"content": "컴포넌트 구조"
},
{
"id": "u_07",
"type": "normal",
"content": "<img src='https://raw.githubusercontent.com/koko8829/chm_TEST/main/2663%5Cnexacro17_01_Button1.png?raw=true'/>"
},
{
"id": "u_08",
"type": "heading2",
"content": "컴포넌트, 내부 컨텐츠 크기"
},
{
"id": "u_09_0.3563002680294408",
"type": "pre",
"content": "Button 컴포넌트와 내부 컨텐츠 크기를 결정하는 기준입니다.\n\n- Button 컴포넌트의 fittocontents 속성값이 \"none\" 일 경우 기준입니다."
},
{
"id": "u_10_0.12395912263360076",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td colspan=\"2\"><div>Button Component</div></td></tr><tr><td>Width</td><td><div>Button 컴포넌트의 width 속성값이 적용됩니다.\n내부 컨텐츠의 Width 보다 작을 경우 내부 컨텐츠가 잘려서 표시됩니다.</div></td></tr><tr><td>Height</td><td><div>Button 컴포넌트의 height 속성값이 적용됩니다.\n내부 컨텐츠의 Height 보다 작을 경우 내부 컨텐츠가 잘려서 표시됩니다.</div></td></tr><tr><td colspan=\"2\"><div>icon</div></td></tr><tr><td>Left</td><td><div>-nexa-icon-position,-nexa-text-align,-nexa-vertical-align 속성값에 따라 계산된 값이 적용됩니다.</div></td></tr><tr><td>Top</td><td><div>-nexa-icon-position,-nexa-text-align,-nexa-vertical-align 속성값에 따라 계산된 값이 적용됩니다.</div></td></tr><tr><td>Width</td><td><div>아이콘 이미지의 너비가 적용됩니다.</div></td></tr><tr><td>Height</td><td><div>아이콘 이미지의 높이가 적용됩니다.</div></td></tr><tr><td colspan=\"2\"><div>text</div></td></tr><tr><td>Left</td><td><div>-nexa-icon-position,-nexa-text-align,-nexa-vertical-align 속성값에 따라 계산된 값이 적용됩니다.</div></td></tr><tr><td>Top</td><td><div>-nexa-icon-position,-nexa-text-align,-nexa-vertical-align 속성값에 따라 계산된 값이 적용됩니다.</div></td></tr><tr><td>Width</td><td><div>textwidth 속성값이 적용됩니다.\ntextwidth 속성값이 없으면 텍스트 길이에 맞게 계산된 값이 적용됩니다.</div></td></tr><tr><td>Height</td><td><div>텍스트 크기에 맞게 계산된 값이 적용됩니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "120,?"
}
},
{
"id": "u_09_0.6991981980338408",
"type": "pre",
"content": "- Button 컴포넌트의 fittocontents 속성값이 \"width\" 일 경우 기준입니다."
},
{
"id": "u_10_0.5094760571043636",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td colspan=\"2\"><div>Button Component</div></td></tr><tr><td>Width</td><td><div>-nexa-icon-position 속성값이 \"left\",\"right\" 이면 icon 의 Width 에 text 의 Width 를 더한 값이 적용됩니다.\n-nexa-icon-position 속성값이 \"top\",\"bottom\" 이면 icon 의 Width 와 text 의 Width 중 큰 값이 적용됩니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "120,?"
}
},
{
"id": "u_09_0.14426402150854067",
"type": "pre",
"content": "- Button 컴포넌트의 fittocontents 속성값이 \"height\" 일 경우 기준입니다."
},
{
"id": "u_10_0.3061352872738107",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td colspan=\"2\"><div>Button Component</div></td></tr><tr><td>Height</td><td><div>-nexa-icon-position 속성값이 \"left\",\"right\" 이면 icon 의 Height 와 text 의 Height 중 큰 값이 적용됩니다.\n-nexa-icon-position 속성값이 \"top\",\"bottom\" 이면 icon 의 Height 에 text 의 Height 를 더한 값이 적용됩니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "120,?"
}
},
{
"id": "u_09_0.46070347947862544",
"type": "pre",
"content": "- Button 컴포넌트의 fittocontents 속성값이 \"both\" 일 경우 기준입니다."
},
{
"id": "u_10_0.6340664184389883",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td colspan=\"2\"><div>Button Component</div></td></tr><tr><td>Width</td><td><div>-nexa-icon-position 속성값이 \"left\",\"right\" 이면 icon 의 Width 에 text 의 Width 를 더한 값이 적용됩니다.\n-nexa-icon-position 속성값이 \"top\",\"bottom\" 이면 icon 의 Width 와 text 의 Width 중 큰 값이 적용됩니다.</div></td></tr><tr><td>Height</td><td><div>-nexa-icon-position 속성값이 \"left\",\"right\" 이면 icon 의 Height 와 text 의 Height 중 큰 값이 적용됩니다.\n-nexa-icon-position 속성값이 \"top\",\"bottom\" 이면 icon 의 Height 에 text 의 Height 를 더한 값이 적용됩니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "120,?"
}
},
{
"id": "u_11",
"type": "heading2",
"content": "Basic Key Action"
},
{
"id": "u_10_0.3595635182569281",
"type": "table",
"content": "<table><caption></caption><thead><tr><th>Action</th><th>Key</th><th>Description</th></tr></thead><tbody><tr><td>포커스 이동</td><td>Tab</td><td><div>Tab 이동 순서에 따라 다음 컴포넌트로 포커스가 이동합니다.</div></td></tr><tr><td>Click</td><td>Enter</td><td><div>클릭 처리되어 onclick 이벤트가 발생합니다.</div></td></tr><tr><td>Click</td><td>Space</td><td><div>클릭 처리되어 onclick 이벤트가 발생합니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "120,120,?"
}
},
{
"id": "u_12",
"type": "heading2",
"content": "Accessibility Key Action"
},
{
"id": "u_09_0.23458507368686587",
"type": "pre",
"content": "접근성 기능이 활성화 되어 있을 때 적용되는 키 액션입니다."
},
{
"id": "u_10_0.006121439839923193",
"type": "table",
"content": "<table><caption></caption><thead><tr><th>Action</th><th>Key</th><th>Description</th></tr></thead><tbody><tr><td>포커스 이동</td><td>Tab</td><td><div>Tab 이동 순서에 따라 다음 컴포넌트로 포커스가 이동합니다.</div></td></tr><tr><td>선택상자 이동</td><td>상하방향키</td><td><div>Tab Order 가 이전/다음인 컴포넌트로 선택상자가 이동합니다.</div></td></tr><tr><td>Click</td><td>Enter</td><td><div>클릭 처리되어 onclick 이벤트가 발생합니다.</div></td></tr><tr><td>Click</td><td>Space</td><td><div>클릭 처리되어 onclick 이벤트가 발생합니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "120,120,?"
}
},
{
"id": "u_13",
"type": "heading2",
"content": "생성자"
},
{
"id": "u_09_0.39473249532615484",
"type": "command",
"content": "Button.init( strName, vLeft, vTop , vWidth, vHeight [, vRight, vBottom, [vMinWidth, [vMaxWidth, [vMinHeight, [vMaxHeight]]]]] )"
},
{
"id": "u_10_0.04637159513633138",
"type": "table",
"content": "<table><caption></caption><thead><tr><th>Parameters</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>strName</td><td>String</td><td><div>Button 의 ID를 문자열로 설정합니다.</div></td></tr><tr><td>vLeft</td><td>String, Number</td><td><div>Button 의 left 속성값을 pixel 또는 비율(\"%\") 단위의 숫자로 설정합니다.\n\n* 값에 기준 컴포넌트를 포함하여 설정했을 때 :\npixel 단위로 설정 시 기준 컴포넌트의 right 속성값을 기준으로 Button 의 left 가 결정됩니다.\n비율(\"%\") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Button 의 left 가 결정됩니다.</div></td></tr><tr><td>vTop</td><td>String, Number</td><td><div>Button 의 top 속성값을 pixel 또는 비율(\"%\") 단위의 숫자로 설정합니다.\n\n* 값에 기준 컴포넌트를 포함하여 설정했을 때 :\npixel 단위로 설정 시 기준 컴포넌트의 bottom 속성값을 기준으로 Button 의 top 이 결정됩니다.\n비율(\"%\") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Button 의 top 이 결정됩니다.</div></td></tr><tr><td>vWidth</td><td>String, Number</td><td><div>Button 의 width 속성값을 pixel 또는 비율(\"%\") 단위의 숫자로 설정합니다.\n\n* 값에 기준 컴포넌트를 포함하여 설정했을 때 :\npixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Button 의 width 가 결정됩니다.\n비율(\"%\") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Button 의 width 가 결정됩니다.</div></td></tr><tr><td>vHeight</td><td>String, Number</td><td><div>Button 의 height 속성값을 pixel 또는 비율(\"%\") 단위의 숫자로 설정합니다.\n\n* 값에 기준 컴포넌트를 포함하여 설정했을 때 :\npixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Button 의 height 가 결정됩니다.\n비율(\"%\") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Button 의 height 가 결정됩니다.</div></td></tr><tr><td>vRight</td><td>String, Number</td><td><div>Button 의 right 속성값을 pixel 또는 비율(\"%\") 단위의 숫자로 설정합니다.\n\nvLeft, vWidth 값을 모두 설정했을 경우 vRight 값은 무시됩니다.\n\n* 값에 기준 컴포넌트를 포함하여 설정했을 때 :\npixel 단위로 설정 시 기준 컴포넌트의 left 속성값을 기준으로 Button 의 right 가 결정됩니다.\n비율(\"%\") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Button 의 right 가 결정됩니다.</div></td></tr><tr><td>vBottom</td><td>String, Number</td><td><div>Button 의 bottom 속성값을 pixel 또는 비율(\"%\") 단위의 숫자로 설정합니다.\n\nvTop, vHeight 값을 모두 설정했을 경우 vBottom 값은 무시됩니다.\n\n* 값에 기준 컴포넌트를 포함하여 설정했을 때 :\npixel 단위로 설정 시 기준 컴포넌트의 top 속성값을 기준으로 Button 의 bottom 이 결정됩니다.\n비율(\"%\") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Button 의 bottom 이 결정됩니다.</div></td></tr><tr><td>vMinWidth</td><td>String, Number</td><td><div>Button 이(가) 화면에 표시되는 최소 너비값을 pixel 단위의 숫자로 설정합니다.</div></td></tr><tr><td>vMaxWidth</td><td>String, Number</td><td><div>Button 이(가) 화면에 표시되는 최대 너비값을 pixel 단위의 숫자로 설정합니다.\n\nvMinWidth 보다 작은 값을 설정하면 vMinWidth 값으로 설정됩니다.</div></td></tr><tr><td>vMinHeight</td><td>String, Number</td><td><div>Button 이(가) 화면에 표시되는 최소 높이값을 pixel 단위의 숫자로 설정합니다.</div></td></tr><tr><td>vMaxHeight</td><td>String, Number</td><td><div>Button 이(가) 화면에 표시되는 최대 높이값을 pixel 단위의 숫자로 설정합니다.\n\nvMinHeight 보다 작은 값을 설정하면 vMinHeight 값으로 설정됩니다.</div></td></tr><tr><td class=\"code_cell\" colspan=\"3\"><div>var objComp = new Button();\n\nobjComp.init( \"Button00\", 30, 120, 196, 46 );\nobjComp.init( \"Button00\", 30, 120, 196, 46, null, null );\nobjComp.init( \"Button00\", null, null, 300, \"400px\", \"80%\", 300 );\nobjComp.init( \"Button00\", 0, 0, 200, 100, null, null, 300, 500, 200, 500 );\nobjComp.init( \"Button00\", \"Button22:10\", 300, null, null, \"Button33:10\", \"20%\", 300, 500, 200, 500 );</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "120,120,?"
}
},
{
"id": "u_10_0.5546777203718587",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\"><div>// Create Object \nvar objButton = new Button(); \nobjButton.init(\"Button\", 30, 120, 196, 46, null, null);\nobjButton.init(\"Button\", null, null, 300, \"400px\", \"80%\", 300);\nor\nvar objButton = new Button(\"Button\", 30, 120, 196, 46, null, null);\nvar objButton = new Button(\"Button\", null, null, 300, \"400px\", \"80%\", 300);\n \n// Add Object to Parent Form \nthis.addChild(\"Button\", objButton); \n \n// Insert Object to Parent Form \nthis.insertChild(1, \"Button\", objButton); \n \n// Remove Object form Parent Form \nthis.removeChild(\"Button\"); \n \n// Show Object \nobjButton.show(); \n \n// Destroy Object \nobjButton.destroy(); \nobjButton = null;</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "100%"
}
},
{
"id": "u_14",
"type": "heading2",
"content": "Status"
},
{
"id": "u_10_0.8860867429060765",
"type": "table",
"content": "<table><caption></caption><thead><tr><th>Name</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>disabled</td><td>status</td><td><div>컴포넌트가 비활성화된 상태</div></td></tr><tr><td>pushed</td><td>userstatus</td><td><div>컴포넌트가 push된 상태</div></td></tr><tr><td>selected</td><td>userstatus</td><td><div>컴포넌트의 특정 아이템이 선택된 상태</div></td></tr><tr><td>mouseover</td><td>status</td><td><div>마우스 커서가 컴포넌트 또는 컴포넌트의 특정 아이템 위에 있는 상태</div></td></tr><tr><td>focused</td><td>status</td><td><div>컴포넌트가 포커스를 받은 상태</div></td></tr><tr><td>enabled</td><td>status</td><td><div>컴포넌트가 활성화된 상태</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "120,120,?"
}
},
{
"id": "u_16",
"type": "heading1",
"content": "속성"
},
{
"id": "p_01_accessibilityaction",
"type": "heading2",
"content": "accessibilityaction",
"option": {
"alias": "Button_accessibilityaction"
}
},
{
"id": "p_02_accessibilityaction",
"type": "pre",
"content": "Button에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 action 정보를 설정하는 속성입니다."
},
{
"id": "p_03_accessibilityaction",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_accessibilityaction",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>▢ macOS</div></td><td><div>▢ Edge</div></td><td><div>■ Chrome</div></td><td><div>▢ Safari</div></td><td><div>▢ Firefox</div></td><td><div>▢ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_accessibilityaction",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_accessibilityaction",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_accessibilityaction",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_accessibilityaction",
"type": "command",
"content": "Button.accessibilityaction[= strAction]"
},
{
"id": "p_09_accessibilityaction",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.08356882909562657",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>this.Button00.accessibilityaction = \"Accessibility Action Message\"; \nthis.Button00.accessibilityaction = \"Select by direction key\";</div></td></tr><tr><th>strAction</th><td colspan=\"2\"><div>accessibilitydescreadtype 속성값에 \"action\"이 포함된 경우 스크린 리더의 음성 출력 대상으로 포함할 값을 설정합니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_accessibilityaction",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_accessibilityaction",
"type": "pre",
"content": "- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.\n\n- 컴포넌트에 선택상자 이동 시 사용자가 추가적인 정보를 얻기 위해 필요한 동작을 안내하는 용도로 사용합니다. \n 예를 들어 컴포넌트 특성에 따라 다음과 같이 속성값을 설정할 수 있습니다.\n \n - CheckBox 컴포넌트의 경우 아래와 같은 안내문을 accessibilityaction 속성값으로 설정할 수 있습니다.\n \"선택 상태를 전환하려면 스페이스 바를 누릅니다.\"\n \n - WebBrowser, WebView 컴포넌트의 경우 스크린 리더 사용자를 위한 안내문을 accessibilityaction 속성값으로 설정할 수 있습니다.\n \"웹 브라우저 컴포넌트 내 콘텐츠를 이용하기 위해서는 가상커서를 해제해 주세요.\"\n 그리고 WebBrowser, WebView 컴포넌트를 벗어났을 때 필요한 안내문을 accessibilityleavemessage 속성값으로 설정합니다.\n \"가상커서를 설정해 주세요\""
},
{
"id": "p_01_accessibilitydesclevel",
"type": "heading2",
"content": "accessibilitydesclevel",
"option": {
"alias": "Button_accessibilitydesclevel"
}
},
{
"id": "p_02_accessibilitydesclevel",
"type": "pre",
"content": "Button 에 선택상자 이동 시 하위 컴포넌트의 접근성 출력여부를 설정하는 속성입니다."
},
{
"id": "p_03_accessibilitydesclevel",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_accessibilitydesclevel",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>▢ macOS</div></td><td><div>▢ Edge</div></td><td><div>■ Chrome</div></td><td><div>▢ Safari</div></td><td><div>▢ Firefox</div></td><td><div>▢ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_accessibilitydesclevel",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_accessibilitydesclevel",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_accessibilitydesclevel",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_accessibilitydesclevel",
"type": "command",
"content": "Button.accessibilitydesclevel[= enumLevel]"
},
{
"id": "p_09_accessibilitydesclevel",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.1296758204700026",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>enumLevel ::= 'all' | 'self' | 'child' | 'none'</div></td></tr><tr><td class=\"code_cell\" colspan=\"3\"><div>this.Button00.accessibilitydesclevel = \"all\";</div></td></tr><tr><th>\"all\"</th><td colspan=\"2\"><div>Button 와 자식 컴포넌트에 대한 접근성을 모두 출력합니다.</div></td></tr><tr><th>\"self\"</th><td colspan=\"2\"><div>Button 의 접근성만 출력하고 자식 컴포넌트의 접근성은 출력하지 않습니다.</div></td></tr><tr><th>\"child\"</th><td colspan=\"2\"><div>Button 의 접근성은 출력하지 않고, 자식 컴포넌트의 접근성은 출력합니다.</div></td></tr><tr><th>\"none\"</th><td colspan=\"2\"><div>Button 와 자식 컴포넌트에 대한 접근성을 모두 출력하지 않습니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_accessibilitydesclevel",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_accessibilitydesclevel",
"type": "pre",
"content": "- accessibilitydesclevel 속성값을 설정하지 않으면 \"all\" 로 적용됩니다.\n\n- Button 과 같이 자식 컴포넌트가 없는 컴포넌트는 \"all\" 또는 \"child\" 로 설정 시 \"self\" 로 적용됩니다.\n\n- Div 와 같은 컨테이너 컴포넌트는 \"child\" 설정 시 실제 컨텐츠의 접근성만을 출력합니다.\n\n- accessibilitydesclevel 속성은 선택상자의 이동에 영향을 주지 않으므로 방향키로 선택상자가 Button 에 이동되게 하지 않으려면 accessibilityenable 속성을 설정하여야 합니다."
},
{
"id": "p_01_accessibilitydescription",
"type": "heading2",
"content": "accessibilitydescription",
"option": {
"alias": "Button_accessibilitydescription"
}
},
{
"id": "p_02_accessibilitydescription",
"type": "pre",
"content": "Button에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 description 정보를 설정하는 속성입니다."
},
{
"id": "p_03_accessibilitydescription",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_accessibilitydescription",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>▢ macOS</div></td><td><div>▢ Edge</div></td><td><div>■ Chrome</div></td><td><div>▢ Safari</div></td><td><div>▢ Firefox</div></td><td><div>▢ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_accessibilitydescription",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_accessibilitydescription",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_accessibilitydescription",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_accessibilitydescription",
"type": "command",
"content": "Button.accessibilitydescription[= strDescription]"
},
{
"id": "p_09_accessibilitydescription",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.5341350497941705",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>this.Button00.accessibilitydescription = \"Option\";</div></td></tr><tr><th>strDescription</th><td colspan=\"2\"><div>accessibilitydescreadtype 속성값에 \"description\"이 포함된 경우 스크린 리더의 음성 출력 대상으로 포함할 값을 설정합니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_accessibilitydescription",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_accessibilitydescription",
"type": "pre",
"content": "- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다."
},
{
"id": "p_01_accessibilityenable",
"type": "heading2",
"content": "accessibilityenable",
"option": {
"alias": "Button_accessibilityenable"
}
},
{
"id": "p_02_accessibilityenable",
"type": "pre",
"content": "Button 에 선택상자 이동 시 접근성 관련 속성값 출력여부를 설정하는 속성입니다."
},
{
"id": "p_03_accessibilityenable",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_accessibilityenable",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>▢ macOS</div></td><td><div>▢ Edge</div></td><td><div>■ Chrome</div></td><td><div>▢ Safari</div></td><td><div>▢ Firefox</div></td><td><div>▢ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_accessibilityenable",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_accessibilityenable",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_accessibilityenable",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_accessibilityenable",
"type": "command",
"content": "Button.accessibilityenable[= bEnable]"
},
{
"id": "p_09_accessibilityenable",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.7243267444621521",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>bEnable ::= 'true' | 'false'</div></td></tr><tr><td class=\"code_cell\" colspan=\"3\"><div>this.Button00.accessibilityenable = false;</div></td></tr><tr><th>true</th><td colspan=\"2\"><div>Button 에 선택상자가 이동되면 접근성 관련 속성값을 출력합니다.\n\n방향키 또는 제스처로 선택상자 이동 시 Static 과 같이 포커스를 갖지 않는 컴포넌트에도 선택상자가 이동됩니다.</div></td></tr><tr><th>false</th><td colspan=\"2\"><div>Button 에 선택상자가 이동되어도 접근성 관련 속성값을 출력하지 않습니다.\n\n데스크탑 환경에서 방향키로 선택상자가 Button 에 이동되지 않습니다.\n모바일 환경에서 제스처로 선택상자가 Button 에 이동되지 않습니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_accessibilityenable",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_accessibilityenable",
"type": "pre",
"content": "- accessibilityenable 속성값을 설정하지 않으면 true 로 적용됩니다.\n\n- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.\n\n- 선택상자 이동 시 컴포넌트의 ARIA-LABEL + Status + Role 순서로 정보가 조합되어 접근성으로 출력됩니다.\n 각 정보의 조합순서는 스크린 리더의 종류에 따라 달라질 수 있습니다.\n > ARIA-LABEL : Environment 의 accessibilitydescreadtype 속성에 설정된 속성값이 반영됩니다.\n > Status : Button 의 현재 상태가 반영됩니다.\n > Role : accessibilityrole 속성값이 반영됩니다. accessibilityrole 속성값을 설정하지 않으면 Button 의 고유 Role 이 반영됩니다.\n\n- accessibilityenable 속성값이 false 일 때 데스크탑 환경에서 방향키 외의 방법으로 선택상자를 Button 로 이동시키면 스크린 리딩 프로그램에서 임의의 값을 출력할 수 있습니다.\n\n\n◆ Mobile 제약\n\n- 모바일 환경에서는 Div 와 같은 컨테이너 컴포넌트 자체에 선택상자가 이동하지 않습니다."
},
{
"id": "p_01_accessibilitylabel",
"type": "heading2",
"content": "accessibilitylabel",
"option": {
"alias": "Button_accessibilitylabel"
}
},
{
"id": "p_02_accessibilitylabel",
"type": "pre",
"content": "Button에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 label 정보를 설정하는 속성입니다."
},
{
"id": "p_03_accessibilitylabel",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_accessibilitylabel",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>▢ macOS</div></td><td><div>▢ Edge</div></td><td><div>■ Chrome</div></td><td><div>▢ Safari</div></td><td><div>▢ Firefox</div></td><td><div>▢ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_accessibilitylabel",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_accessibilitylabel",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_accessibilitylabel",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_accessibilitylabel",
"type": "command",
"content": "Button.accessibilitylabel[= strLabel]"
},
{
"id": "p_09_accessibilitylabel",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.9582893076284821",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>this.Button00.accessibilitylabel = \"OK Button\"; \nthis.Button00.accessibilitylabel = \"[@static00]\"; \nthis.Button00.accessibilitylabel = \"[@static00][@static01]\"; \nthis.Button00.accessibilitylabel = \"[@static00][@static01] OK Button\";</div></td></tr><tr><th>strLabel</th><td colspan=\"2\"><div>accessibilitydescreadtype 속성값에 \"label\"이 포함된 경우 스크린 리더의 음성 출력 대상으로 포함할 값을 설정합니다.\n문자열로 설정하거나 부모가 같은 컴포넌트의 accessibilitylabel 속성값을 참조할 수 있습니다.\n다른 컴포넌트 참조 시에는 \"[@ComponentID]\" 형식으로 컴포넌트의 id를 대괄호와 \"@\" 문자를 사용하여 설정합니다.\n참조하는 참조값에 해당하는 컴포넌트를 찾을 수 없는 경우에는 참조값 자체가 문자열로 처리됩니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_accessibilitylabel",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_accessibilitylabel",
"type": "pre",
"content": "- enableaccessibility 속성값이 true인 경우만 적용되는 속성입니다.\n\n- accessibilitydescreadtype 속성값에 \"label\"이 포함되었으나 accessibilitylabel 속성값을 설정하지 않으면 스크린 리더의 음성 출력 대상에 포함하지 않습니다.\naccessibilitylabel 속성값을 설정하지 않더라도 컴포넌트의 name, value, text 속성값을 설정한 경우 해당 속성값이 스크린 리더의 음성 출력 대상으로 포함할 label 정보로 적용됩니다."
},
{
"id": "p_01_accessibilityrole",
"type": "heading2",
"content": "accessibilityrole",
"option": {
"alias": "Button_accessibilityrole"
}
},
{
"id": "p_02_accessibilityrole",
"type": "pre",
"content": "Button에 선택상자 이동 시 스크린 리더가 읽어주는 Role 정보를 설정하는 속성입니다."
},
{
"id": "p_03_accessibilityrole",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_accessibilityrole",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>▢ macOS</div></td><td><div>▢ Edge</div></td><td><div>■ Chrome</div></td><td><div>▢ Safari</div></td><td><div>▢ Firefox</div></td><td><div>▢ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_accessibilityrole",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_accessibilityrole",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_accessibilityrole",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_accessibilityrole",
"type": "command",
"content": "Button.accessibilityrole[= enumRole]"
},
{
"id": "p_09_accessibilityrole",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.06590381182567562",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>enumRole ::= 'none' | 'alert' | 'application' | 'button' | 'calendar' | 'chart' | 'checkbox' | 'columnheader' | 'combobox' | 'datepicker' | 'edit' | 'fileupload' | 'form' | 'frame' | 'grid' | 'gridcell' | 'groupbox' | 'heading' | 'image' | 'link' | 'listbox' | 'menu' | 'menubar' | 'progressbar' | 'radio' | 'rowheader' | 'scrollbar' | 'spin' | 'static' | 'statusbar' | 'tab' | 'tabpage' | 'textarea' | 'titlebar' | 'toolbar' | 'tooltip' | 'treegrid' | 'treeitem' | 'webbrowser'</div></td></tr><tr><td class=\"code_cell\" colspan=\"3\"><div>this.Button00.accessibilityrole = \"none\"; \nthis.Button00.accessibilityrole = \"button\";</div></td></tr><tr><th>enumRole</th><td colspan=\"2\"><div>- \"none\": 스크린 리더에서 Role 정보를 처리하지 않습니다.\n\n- 속성값을 설정하지 않으면 컴포넌트/오브젝트에 따라 기본 accessibilityrole 값이 적용됩니다.\n\"application\": Application, MainFrame\n\"button\": Button, FileDownload\n\"calendar\": Calendar\n\"checkbox\": CheckBox\n\"combobox\": ComboBox\n\"edit\": Edit, MaskEdit\n\"frame\": FrameSet, ChildFrame\n\"fileupload\": FileUpload\n\"form\": Form, Div, PopupDiv\n\"groupbox\": GroupBox\n\"image\": ImageViewer, Sketch\n\"listbox\": ListBox\n\"menubar\": Menu\n\"menu\": PopupMenu\n\"progressbar\": ProgressBar\n\"radio\": Radio\n\"spin\": Spin\n\"static\": Static\n\"tab\": Tab\n\"tabpage\": TabPage\n\"textarea\": TextArea\n\"webbrowser\": WebBrower\n\n- Grid 컴포넌트의 경우 하위 오브젝트까지 Role을 적용합니다.\n\"grid\": Grid\n\"gridcell\": Grid Cell\n\"columnheader\": Grid Column Head\n\"rowheader\": Grid Row Head\n\"treegrid\": TreeGrid\n\"treeitem\": TreeItem, TreeCell\n\n- 기능에 따라 컴포넌트 또는 오브젝트의 하위 오브젝트 영역에 아래와 같은 Role이 적용됩니다.\n\"alert\": Alert, Confirm, UserConfirm\n\"chart\": Chart\n\"datepicker\": DatePicker\n\"link\": Link\n\"scrollbar\": ScrollBar\n\"statusbar\": StatusBar\n\"titlebar\": TitleBar\n\"toolbar\": ToolBar\n\"tooltip\": Tooltip\n\n- \"heading\"은 특정 컨테이너 컴포넌트에 설정 시 accessibilityheadingnexthotkey, accessibilityheadingprevhotkey 속성값의 단축키로 이동 시 사용할 수 있습니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_accessibilityrole",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_accessibilityrole",
"type": "pre",
"content": "- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.\n\n- accessibilityenable 속성값을 설정하지 않으면 Button의 기본 Role 로 적용됩니다.\n\n- 추가적인 속성값이 필요한 Role 설정 시 Button에 해당 속성이 없으면 스크린 리더에 따라 정상적으로 정보를 읽지 못할 수 있습니다."
},
{
"id": "p_01_background",
"type": "heading2",
"content": "background",
"option": {
"alias": "Button_background"
}
},
{
"id": "p_02_background",
"type": "pre",
"content": "Button 의 배경 영역을 설정하는 속성입니다."
},
{
"id": "p_03_background",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_background",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>■ macOS</div></td><td><div>■ Edge</div></td><td><div>■ Chrome</div></td><td><div>■ Safari</div></td><td><div>■ Firefox</div></td><td><div>■ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_background",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_background",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_background",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_background",
"type": "command",
"content": "Button.background[= strbackground]"
},
{
"id": "p_09_background",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.7698621252154584",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>strBackground ::= [<bg-image> | <linear-gradient>] [<background-origin> [<background-clip>]] [<background-color>]\n\n<bg-image> ::= 'none' | <imageurl> [<repeat-style>] [<position>]\n <imageurl> ::= 'URL(' <Theme-Image> | <Web-Image> ')'\n <repeat-style> ::= 'repeat-x' | 'repeat-y' | 'repeat' | 'no-repeat'\n <position> ::= <horizontal-position> <vertical-position> ['/' <background-size>]\n <horizontal-position> ::= 'left' | 'center' | 'right' | <pos-percentage> '%'\n <vertical-position> ::= 'top' | 'center' | 'bottom' | <pos-percentage> '%'\n <background-size> ::= 'auto' | 'cover' | 'contain' | (<length> 'px' | <percentage> '%') {1,2}\n\n<linear-gradient> ::= 'linear-gradient(' [<angle> , ] <color-stop> ')'\n <angle> ::= 'to left' | 'to right' | 'to top' | 'to bottom' | 'to left top' | 'to left bottom' | 'to right top' | 'to right bottom'\n <color-stop> ::= <startcolor-stop> [<listcolor-stop>] <endcolor-stop>\n <startcolor-stop> ::= <color> [<percentage>'%']\n <endcolor-stop> ::= <color> [<percentage>'%']\n <listcolor-stop> ::= <color> [<percentage>'%\"] [,<listcolor-stop>]*\n <color> ::= <NamedColor> | <NumericColor>\n\n<background-origin> ::= 'border-box' | 'padding-box'\n<background-clip> ::= 'border-box' | 'padding-box'\n<background-color> ::= <NamedColor> | <NumericColor></div></td></tr><tr><td class=\"code_cell\" colspan=\"3\"><div>* XCSS\nbackground : #ffffaa;\nbackground : \"URL('./images/smiley.gif')\" no-repeat center center #ffffaa;\nbackground : \"URL('./images/smiley.gif')\" no-repeat center center /auto #ffffaa;\nbackground : \"URL('./images/smiley.gif')\" no-repeat center center /15px 15% #ffffaa;\nbackground : linear-gradient( red , blue , yellow );\nbackground : linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0));\nbackground : \"URL('./images/smiley.gif')\" border-box border-box #ffffaa;\n\n* Script ( normal property )\nthis.Button00.background = \"#ffffaa\";\nthis.Button00.background = \"\"URL('./images/smiley.gif')\" no-repeat center center #ffffaa\";\nthis.Button00.background = \"\"URL('./images/smiley.gif')\" no-repeat center center /auto #ffffaa\";\nthis.Button00.background = \"\"URL('./images/smiley.gif')\" no-repeat center center /15px 15% #ffffaa\";\nthis.Button00.background = \"linear-gradient( red , blue , yellow )\";\nthis.Button00.background = \"linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0))\";\nthis.Button00.background = \"\"URL('./images/smiley.gif')\" border-box border-box #ffffaa\";</div></td></tr><tr><th><bg-image></th><td colspan=\"2\"><div>배경에 표시될 이미지를 \"'none' | <imageurl> [<repeat-style>] [<position>]\" 형식으로 설정합니다.\n\n<background-color> 값이 설정되어 있으면 배경색 위로 이미지가 표시됩니다.\n\n\"none\" 으로 설정하면 이미지를 설정하지 않습니다.\n<imageurl> 값으로 이미지를 설정할 수 있습니다.\n<repeat-style> 값으로 이미지의 반복표시 방향을 설정할 수 있습니다.\n<position> 값으로 이미지의 표시위치를 설정할 수 있습니다.\n\n그라데이션과 배경이미지를 동시에 설정할 수 없습니다.</div></td></tr><tr><th><imageurl></th><td colspan=\"2\"><div>배경에 표시될 이미지를 \"'URL(' <Theme-Image> | <Web-Image> ')'\" 형식으로 설정합니다.\n\n\"URL ( [이미지경로] )\" 형식으로 테마 또는 웹의 이미지를 설정합니다.</div></td></tr><tr><th><Theme-Image></th><td colspan=\"2\"><div>테마에 선언된 이미지를 \"theme://images\\이미지명\" 형식으로 설정합니다.\n\n테마에 해당 이미지가 등록되어 있어야 합니다.</div></td></tr><tr><th><Web-Image></th><td colspan=\"2\"><div>웹의 이미지를 \"http://경로/이미지명\", \"https://경로/파일명\" 형식으로 설정합니다.\n\n웹에 접근 가능한 환경이어야 합니다.</div></td></tr><tr><th><repeat-style></th><td colspan=\"2\"><div>배경에 표시될 이미지의 반복표시 방향을 설정합니다.\n\n\"repeat-x\" 설정 시 이미지가 가로 방향으로 반복표시 됩니다.\n\"repeat-y\" 설정 시 이미지가 세로 방향으로 반복표시 됩니다.\n\"repeat\" 설정 시 이미지가 가로,세로 방향으로 모두 반복표시 됩니다.\n\"no-repeat\" 설정 시 이미지가 반복표시 되지 않습니다.\n\n값을 설정하지 않으면 \"repeat\" 로 적용됩니다.</div></td></tr><tr><th><horizontal-position></th><td colspan=\"2\"><div>배경에 표시될 이미지의 가로 위치를 설정합니다.\n\n\"left\" 설정 시 Button 의 왼쪽면과 이미지의 왼쪽면이 정렬되어 표시됩니다.\n\"center\" 설정 시 Button 의 중앙과 이미지의 중앙이 정렬되어 표시됩니다.\n\"right\" 설정 시 Button 의 오른쪽면과 이미지의 오른쪽면이 정렬되어 표시됩니다.\n<pos-percentage> '%' 형식으로 설정 시 이미지의 위치가 비율로 설정됩니다.\n\n<vertical-position> 값을 설정하고, <horizontal-position> 값을 설정하지 않으면 <horizontal-position> 은 \"center\" 로 적용됩니다.\n<vertical-position> 값과 <horizontal-position> 값을 모두 설정하지 않으면 <horizontal-position> 은 \"left\" 로 적용됩니다.</div></td></tr><tr><th><vertical-position></th><td colspan=\"2\"><div>배경에 표시될 이미지의 세로 위치를 설정합니다.\n\n\"top\" 설정 시 Button 의 윗쪽면과 이미지의 윗쪽면이 정렬되어 표시됩니다.\n\"center\" 설정 시 Button 의 중앙과 이미지의 중앙이 정렬되어 표시됩니다.\n\"bottom\" 설정 시 Button 의 아랫쪽면과 이미지의 아랫쪽면이 정렬되어 표시됩니다.\n<pos-percentage> '%' 형식으로 설정 시 이미지의 위치가 비율로 설정됩니다.\n\n<horizontal-position> 값을 설정하고, <vertical-position> 값을 설정하지 않으면 <vertical-position> 은 \"center\" 로 적용됩니다.\n<vertical-position> 값과 <horizontal-position> 값을 모두 설정하지 않으면 <vertical-position> 은 \"top\" 으로 적용됩니다.</div></td></tr><tr><th><pos-percentage></th><td colspan=\"2\"><div>배경에 표시될 이미지의 가로/세로 위치를 비율로 설정합니다.\n\n<horizontal-position> 에 \"0%\" 설정 시 \"left\" 와 같은 위치로 적용됩니다.\n<horizontal-position> 에 \"50%\" 설정 시 \"center\" 와 같은 위치로 적용됩니다.\n<horizontal-position> 에 \"100%\" 설정 시 \"right\" 과 같은 위치로 적용됩니다.\n<vertical-position> 에 \"0%\" 설정 시 \"top\" 와 같은 위치로 적용됩니다.\n<vertical-position> 에 \"50%\" 설정 시 \"center\" 와 같은 위치로 적용됩니다.\n<vertical-position> 에 \"100%\" 설정 시 \"bottom\" 과 같은 위치로 적용됩니다.\n\n0 보다 작거나 100 보다 큰 값을 설정 시 Button 의 영역을 벗어난 가상의 위치로 적용됩니다.\n\n값 설정 시 \"%\" 단위를 생략할 수 없습니다.</div></td></tr><tr><th><background-size></th><td colspan=\"2\"><div>배경에 표시될 이미지의 크기를 설정합니다.\n- auto: 원본 이미지 크기를 유지합니다.\n- cover: 이미지 비율을 유지하는 한도 내에서 배경에 빈 공간이 없도록 가장 크게 설정합니다.\n width 또는 height 길이가 긴 쪽은 잘려서 표시될 수 있습니다.\n- contain: 이미지가 잘리지 않고 비율을 유지하는 한도 내에서 가장 크게 설정합니다.\n- <length> | <percentage>: 이미지의 width, height 크기 또는 컴포넌트 대비 비율을 설정합니다. \n width 값만 설정하면 원본 이미지 비율에 따라 height 크기를 자동으로 처리합니다.\n height 값만 설정할 수는 없습니다. \n 음수값은 설정할 수 없습니다.</div></td></tr><tr><th><linear-gradient></th><td colspan=\"2\"><div>배경에 표시될 그라데이션을 \"'linear-gradient(' [<angle> , ] <color-stop> ')'\" 형식으로 설정합니다.\n\n<background-color> 값이 설정되어 있으면 배경색 위로 그라데이션이 표시됩니다.\n\n\"linear-gradient ( [방향, 색상값, 색상값, ...] )\" 형식으로 그라데이션 방향과 색상을 설정할 수 있습니다.\n\n그라데이션과 배경이미지를 동시에 설정할 수 없습니다.</div></td></tr><tr><th><angle></th><td colspan=\"2\"><div>그라데이션의 표시 방향을 설정합니다.\n\n\"to left\" 설정 시 오른쪽에서 왼쪽 방향으로 그라데이션이 표시됩니다.\n\"to right\" 설정 시 왼쪽에서 오른쪽 방향으로 그라데이션이 표시됩니다.\n\"to top\" 설정 시 아래쪽에서 윗쪽 방향으로 그라데이션이 표시됩니다.\n\"to bottom\" 설정 시 윗쪽에서 아래쪽 방향으로 그라데이션이 표시됩니다.\n\"to left top\" 설정 시 오른쪽 아래 방향에서 왼쪽 윗 방향으로 그라데이션이 표시됩니다.\n\"to left bottom\" 설정 시 오른쪽 윗 뱡향에서 왼쪽 아래 방향으로 그라데이션이 표시됩니다.\n\"to right top\" 설정 시 왼쪽 아래 방향에서 오른쪽 윗 방향으로 그라데이션이 표시됩니다.\n\"to right bottom\" 설정 시 왼쪽 윗 방향에서 오른쪽 아래 방향으로 그라데이션이 표시됩니다.\n\n값을 설정하지 않으면 \"to bottom\"으로 적용됩니다.</div></td></tr><tr><th><color-stop></th><td colspan=\"2\"><div>그라데이션의 시작점, 끝점, 중간점의 색을 \"<startcolor-stop> [<listcolor-stop>] <endcolor-stop>\" 형식으로 설정합니다.\n\n<angle> 값에 설정된 방향에 따라 시작점과 끝점의 위치가 결정됩니다.\n예를 들어 <angle> 값이 \"to left\" 이면 Button 의 right 위치가 시작점이 되고, left 위치가 끝점이 됩니다.\n <angle> 값이 \"to right\" 이면 Button 의 left 위치가 시작점이 되고, right 위치가 끝점이 됩니다.\n\n<listcolor-stop> 에 그라데이션 중간점의 색을 한개 이상 설정할 수 있으며 <percentage> 값 생략 시 균등하게 표시됩니다.</div></td></tr><tr><th><startcolor-stop></th><td colspan=\"2\"><div>그라데이션의 시작점 색을 \"<color> [<percentage>'%']\" 형식으로 설정합니다.\n\n<angle> 값에 설정된 방향에 따라 시작점 위치가 결정됩니다.\n시작점의 <percentage> 값을 \"0\" 이상으로 설정 시 \"시작점~설정값\"까지 동일한 색상으로 표시됩니다.</div></td></tr><tr><th><endcolor-stop></th><td colspan=\"2\"><div>그라데이션의 끝점 색을 \"<color> [<percentage>'%']\" 형식으로 설정합니다.\n\n<angle> 값에 설정된 방향에 따라 끝점 위치가 결정됩니다.\n끝점의 <percentage> 값을 \"100\" 이하로 설정 시 \"설정값~끝점\"까지 동일한 색상으로 표시됩니다.</div></td></tr><tr><th><listcolor-stop></th><td colspan=\"2\"><div>그라데이션의 중간점 색을 \"<color> [<percentage>'%\"] [,<listcolor-stop>]*\" 형식으로 설정합니다.\n\n시작점과 끝점 사이에 적용될 중간색을 \",\"로 구분하여 여러개 설정할 수 있습니다.\n뒤에 선언된 색의 <percentage> 값은 먼저 선언된 색의 <percentage> 값보다 커야 합니다.</div></td></tr><tr><th><color></th><td colspan=\"2\"><div>그라데이션 색상을 색상이름 또는 색상코드로 설정합니다.</div></td></tr><tr><th><percentage></th><td colspan=\"2\"><div><color> 에 해당하는 색이 적용될 위치를 비율값으로 설정합니다.\n\n<angle> 값에 의해 결정된 시작점이 \"0%\" 로 적용됩니다.\n<angle> 값에 의해 결정된 끝점이 \"100%\" 로 적용됩니다.\n\n0 보다 작거나 100 보다 큰 값을 설정 시 Button 의 영역을 벗어난 가상의 위치로 적용됩니다.\n예를 들어 \"150%\" 설정 시 시작점에서 끝점까지 거리의 반만큼 끝점에서 벗어난 위치에 <color> 값이 적용됩니다.\n\n<percentage> 값을 생략하면 균등한 위치에 <color> 값이 적용됩니다.\n값 설정 시 \"%\" 단위를 생략할 수 없습니다.</div></td></tr><tr><th><background-origin></th><td colspan=\"2\"><div>배경으로 처리될 기준영역을 설정합니다.\n\n\"border-box\" 설정 시 Border 를 포함한 영역이 배경영역으로 처리됩니다.\n\n\"padding-box\" 설정 시 Border 의 안쪽 영역이 배경영역으로 처리됩니다.\n\"padding-box\" 설정 시 그라데이션의 시작점, 끝점과 배경이미지의 반복 기준위치가 Border 안쪽 영역으로 처리됩니다.\n\n값을 설정하지 않으면 \"padding-box\" 로 적용됩니다.</div></td></tr><tr><th><background-clip></th><td colspan=\"2\"><div>배경이 실제로 표시될 영역을 설정합니다.\n\n\"border-box\" 설정 시 Border 를 포함한 영역에 배경이 표시됩니다.\n\"padding-box\" 설정 시 Border 의 안쪽 영역에 배경이 표시됩니다.\n\n값을 설정하지 않으면 <background-origin> 에 설정한 값이 동일하게 적용됩니다.\n<background-origin> 값도 설정하지 않았을 경우 \"border-box\" 로 적용됩니다.</div></td></tr><tr><th><background-color></th><td colspan=\"2\"><div>배경에 표시될 색을 색상이름 또는 색상코드로 설정합니다.\n\n<bg-image> 또는 <linear-gradient> 값이 설정되어 있다면 배경색은 배경이미지 또는 그라데이션 아래에 표시됩니다.\n<bg-image> 에 적용된 이미지에 투명으로 적용된 부분이 있거나 이미지가 Button 영역보다 작다면 해당 영역에 배경색이 표시됩니다.\n\n그라데이션과 배경이미지를 동시에 설정할 수 없습니다.</div></td></tr><tr><th><NamedColor></th><td colspan=\"2\"><div>\"red\",\"blue\" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.</div></td></tr><tr><th><NumericColor></th><td colspan=\"2\"><div>표시할 색의 색상코드입니다.\n\n\"#\" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-\"#FF00FF\")\nred, green, blue 값을 인자로 하는 \"rgb()\" 메소드로 색상코드를 설정할 수 있습니다. (ex-\"rgb(255,0,255)\")\nred, green, blue, alpha 값을 인자로 하는 \"rgba()\" 메소드로 색상코드를 설정할 수 있습니다. (ex-\"rgba(255,0,255,0.3)\")\nhue, saturation, lightness 값을 인자로 하는 \"hsl()\" 메소드로 색상코드를 설정할 수 있습니다. (ex-\"hsl(120,50%,50%)\")\nhue, saturation, lightness, alpha 값을 인자로 하는 \"hsla()\" 메소드로 색상코드를 설정할 수 있습니다. (ex-\"hsla(120,50%,50%,0.8)\")</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_background",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_background",
"type": "pre",
"content": "- background 속성값을 설정하지 않으면 undefined 가 설정되고, \"transparent\" 로 동작합니다.\n\n- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.\n 사용자 Prefix 는 스크립트 또는 넥사크로 스튜디오에서 속성값으로 설정 시 사용할 수 있습니다.\n\n- 배경의 기준영역과 표시영역은 <background-origin>, <background-clip> 값으로 각각 설정합니다.\n\n- 배경 이미지를 중앙에 위치시키려면 <position> 값을 \"center\" 또는 \"center center\" 로 설정하여야 합니다.\n\n- 배경이미지와 배경색을 모두 설정하면 배경색 위에 이미지가 표시됩니다.\n 그라데이션과 배경색을 모두 설정하면 배경색 위에 그라데이션이 표시됩니다.\n\n- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.\n 두 값을 동시에 설정 시 오동작이 발생할 수 있습니다."
},
{
"id": "p_01_border-radius",
"type": "heading2",
"content": "border-radius",
"option": {
"alias": "Button_border-radius"
}
},
{
"id": "p_02_border-radius",
"type": "pre",
"content": "Button 의 모서리 모양을 설정하는 속성입니다."
},
{
"id": "p_03_border-radius",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_border-radius",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>■ macOS</div></td><td><div>■ Edge</div></td><td><div>■ Chrome</div></td><td><div>■ Safari</div></td><td><div>■ Firefox</div></td><td><div>■ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_border-radius",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_border-radius",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_border-radius",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_border-radius",
"type": "command",
"content": "Button.borderRadius[= strborderradius]"
},
{
"id": "p_09_border-radius",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.6998136128707961",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>strborderradius ::= <horizontal-radius>{4} ['/' <vertical-radius>{4}]</div></td></tr><tr><td class=\"code_cell\" colspan=\"3\"><div>* XCSS\nborder-radius : 10px;\nborder-radius : 5px 6px 10px / 5px 10px;\n\n* Script ( normal property )\nthis.Button00.borderRadius = \"10px\";\nthis.Button00.borderRadius = \"5px 6px 10px / 5px 10px\";</div></td></tr><tr><th><horizontal-radius></th><td colspan=\"2\"><div>모서리를 둥글게 표시하기 위한 가로크기를 설정합니다.\n\npixel 단위로 입력하며 스페이스를 구분자로 4개값까지 설정할 수 있습니다.\n\n값을 1회 입력 시 top-left/top-right/bottom-right/bottom-left 모서리의 가로크기로 모두 동일한 값이 적용됩니다.\n값을 2회 입력 시 top-left/bottom-right, top-right/bottom-left 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다.\n값을 3회 입력 시 top-left, top-right/bottom-left, bottom-right 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다.\n값을 4회 입력 시 top-left, top-right, bottom-right, bottom-left 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다.</div></td></tr><tr><th><vertical-radius></th><td colspan=\"2\"><div>모서리를 둥글게 표시하기 위한 세로크기를 설정합니다.\n\npixel 단위로 입력하며 스페이스를 구분자로 4개값까지 설정할 수 있습니다.\n\n값을 1회 입력 시 top-left/top-right/bottom-right/bottom-left 모서리의 세로크기로 모두 동일한 값이 적용됩니다.\n값을 2회 입력 시 top-left/bottom-right, top-right/bottom-left 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다.\n값을 3회 입력 시 top-left, top-right/bottom-left, bottom-right 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다.\n값을 4회 입력 시 top-left, top-right, bottom-right, bottom-left 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_border-radius",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_border-radius",
"type": "pre",
"content": "- border-radius 속성값을 설정하지 않으면 undefined 가 설정되고, \"0px\" 로 동작합니다. \n\n- 스크립트로 접근 시 속성명은 \"borderRadius\" 를 사용해야 합니다.\n\n- <horizontal-radius>와 <vertical-radius>는 \"/\" 문자로 구분하여 입력합니다.\n\n- Calendar, Combo 와 같이 하위 컨트롤이 존재하는 컴포넌트는 하위컨트롤에도 border-radius 속성을 설정해야 정상적으로 모서리가 표시됩니다.\n\n\n◆ NRE 제약\n\n- border-radius 속성을 설정하면 모든 테두리가 같은 색으로 적용됩니다.\n -nexa-border 속성에서 top 에 적용된 색이 모든 테두리에 적용됩니다."
},
{
"id": "p_01_bottom",
"type": "heading2",
"content": "bottom",
"option": {
"alias": "Button_bottom"
}
},
{
"id": "p_02_bottom",
"type": "pre",
"content": "Button 을(를) 표시하기 위한 하단 좌표값을 설정하는 속성입니다."
},
{
"id": "p_03_bottom",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_bottom",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>■ macOS</div></td><td><div>■ Edge</div></td><td><div>■ Chrome</div></td><td><div>■ Safari</div></td><td><div>■ Firefox</div></td><td><div>■ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_bottom",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_bottom",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_bottom",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_bottom",
"type": "command",
"content": "Button.bottom[= nBottom]"
},
{
"id": "p_09_bottom",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.10695691517656014",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>nBottom ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']</div></td></tr><tr><td class=\"code_cell\" colspan=\"3\"><div>this.Button00.bottom = 10; \nthis.Button00.bottom = \"10px\"; \nthis.Button00.bottom = \"10%\"; \nthis.Button00.bottom = \"Button00:10px\"; \nthis.Button00.bottom = \"Button00:10%\";</div></td></tr><tr><th><strCompID></th><td colspan=\"2\"><div>Button 의 좌표값을 상대적으로 적용하기 위해 기준이 되는 컴포넌트의 ID 를 설정합니다.\n\n기준 컴포넌트는 Button 와 부모(Parent)가 동일하여야 합니다.\n또한, Form 로딩 시 Button 보다 먼저 생성되어야 합니다.\n\n값을 설정하지 않거나 잘못된 값을 설정하면 부모(Parent) 를 기준으로 좌표값이 적용됩니다.</div></td></tr><tr><th><nVal></th><td colspan=\"2\"><div>Button 의 하단 좌표값을 절대 길이 단위(\"px\"), 비율 단위(\"%\"), 상대 길이 단위(\"em\", \"rem\")의 숫자로 설정합니다.\n\n* <strCompID> 값을 생략했을 때 :\n- \"px\": 부모(Parent)의 bottom 속성값을 기준으로 Button의 하단 위치 설정\n- \"%\": 부모(Parent)의 height 속성값을 기준으로 Button의 하단 위치 결정\n- \"em\": 컴포넌트의 font-size 속성값을 기준으로 Button의 하단 위치 결정\n- \"rem\": MainFrame font-size 속성값을 기준으로 Button의 하단 위치 결정\n\n* <strCompID> 값을 설정했을 때 :\n- \"px\": <strCompID>의 top 속성값을 기준으로 Button의 하단 위치 결정\n- \"%\": <strCompID>의 height 속성값을 기준으로 Button의 하단 위치 결정\n<strCompID> 값 설정 시 \"em\", \"rem\" 단위는 지원하지 않습니다.</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_bottom",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_bottom",
"type": "pre",
"content": "- 좌표값에 단위를 생략할 경우 pixel 값으로 적용됩니다.\n\n- 좌표값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.\n\n◆ 기준 컴포넌트 설정 시 유의할 점\n\n- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.\n\n스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.\n스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.\n예를 들어 Button01 컴포넌트의 left 속성값이 \"Button00:10px\"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.\n기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다."
},
{
"id": "p_01_box-shadow",
"type": "heading2",
"content": "box-shadow",
"option": {
"alias": "Button_box-shadow"
}
},
{
"id": "p_02_box-shadow",
"type": "pre",
"content": "Button 에 그림자 효과를 설정하는 속성입니다."
},
{
"id": "p_03_box-shadow",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_box-shadow",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>■ macOS</div></td><td><div>■ Edge</div></td><td><div>■ Chrome</div></td><td><div>■ Safari</div></td><td><div>■ Firefox</div></td><td><div>■ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_box-shadow",
"type": "headline",
"content": "속성 타입"
},
{
"id": "p_06_box-shadow",
"type": "table",
"content": "<table class='r_no_border_table column_count_8'><caption></caption><tbody><tr><td><div>▢ Enum</div></td><td><div>▢ Expr</div></td><td><div>▢ Control</div></td><td><div>▢ Hidden</div></td><td><div>▢ ReadOnly</div></td><td><div>▢ Bind</div></td><td><div>▢ Collection</div></td><td><div>▢ StringResource</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "80,70,90,90,110,80,110,140"
}
},
{
"id": "p_07_box-shadow",
"type": "headline",
"content": "문법"
},
{
"id": "p_08_box-shadow",
"type": "command",
"content": "Button.boxShadow[= strbshadow]"
},
{
"id": "p_09_box-shadow",
"type": "headline",
"content": "문법 설정"
},
{
"id": "u_10_0.2711335949065934",
"type": "table",
"content": "<table><caption></caption><tbody><tr><td class=\"code_cell\" colspan=\"3\"><div>strbshadow ::= 'none' | [<inset>] <offset> [<blur>'px'] [<spread>'px'] [<color>]\n\n<offset> ::= <horizontal>'px' <vertical>'px'\n<color> ::= <NamedColor> | <NumericColor></div></td></tr><tr><td class=\"code_cell\" colspan=\"3\"><div>* XCSS\nbox-shadow : 10px 10px 10px #888888;\nbox-shadow : inset 10px 10px 10px 5px #888888\n\n* Script ( normal property )\nthis.Button00.boxShadow = \"10px 10px 10px #888888\";\nthis.Button00.boxShadow = \"inset 10px 10px 10px 5px #888888\";</div></td></tr><tr><th><inset></th><td colspan=\"2\"><div>그림자 효과가 컴포넌트 안쪽에 표시됩니다.\n생략 시에는 outset으로 동작합니다.\nNRE는 지원하지 않습니다.</div></td></tr><tr><th><offset></th><td colspan=\"2\"><div>그림자 효과가 표시되는 위치를 설정합니다.\n\nButton 의 좌상단 위치를 기준으로 그림자 효과가 표시될 위치를 가로/세로 픽셀값으로 설정합니다.</div></td></tr><tr><th><horizontal></th><td colspan=\"2\"><div>그림자 효과가 표시되는 가로 위치를 설정합니다.\n\n음수로 설정 시 컴포넌트의 왼쪽에 그림자 효과가 표시됩니다.\npixel 단위로 입력하며 \"px\" 단위를 생략할 수 없습니다.</div></td></tr><tr><th><vertical></th><td colspan=\"2\"><div>그림자 효과가 표시되는 세로 위치를 설정합니다.\n\n음수로 설정 시 컴포넌트의 윗쪽에 그림자 효과가 표시됩니다.\npixel 단위로 입력하며 \"px\" 단위를 생략할 수 없습니다.</div></td></tr><tr><th><blur></th><td colspan=\"2\"><div>그림자 효과에 blur를 설정합니다.\n음수로 설정 시 blur가 적용되지 않습니다.\npixel 단위로 입력하며 \"px\" 단위를 생략할 수 없습니다.</div></td></tr><tr><th><spread></th><td colspan=\"2\"><div>그림자를 확장하거나 축소합니다.\n양수로 설정 시에는 그림자를 확장하고 음수로 설정 시에는 그림자를 축소합니다.\nNRE는 지원하지 않습니다.</div></td></tr><tr><th><color></th><td colspan=\"2\"><div>그림자 효과의 색을 색상이름 또는 색상코드로 설정할 수 있습니다.\n\n값을 입력하지 않으면 브라우저별로 다르게 동작하거나 오동작할 수 있습니다.</div></td></tr><tr><th><NamedColor></th><td colspan=\"2\"><div>\"red\",\"blue\" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.</div></td></tr><tr><th><NumericColor></th><td colspan=\"2\"><div>표시할 색의 색상코드입니다.\n\n\"#\" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-\"#FF00FF\")\nred, green, blue 값을 인자로 하는 \"rgb()\" 메소드로 색상코드를 설정할 수 있습니다. (ex-\"rgb(255,0,255)\")\nred, green, blue, alpha 값을 인자로 하는 \"rgba()\" 메소드로 색상코드를 설정할 수 있습니다. (ex-\"rgba(255,0,255,0.3)\")\nhue, saturation, lightness 값을 인자로 하는 \"hsl()\" 메소드로 색상코드를 설정할 수 있습니다. (ex-\"hsl(120,50%,50%)\")\nhue, saturation, lightness, alpha 값을 인자로 하는 \"hsla()\" 메소드로 색상코드를 설정할 수 있습니다. (ex-\"hsla(120,50%,50%,0.8)\")</div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "180,120,?"
}
},
{
"id": "p_11_box-shadow",
"type": "headline",
"content": "참고"
},
{
"id": "p_12_box-shadow",
"type": "pre",
"content": "- box-shadow 속성값을 설정하지 않으면 undefined 가 설정되고, \"none\" 으로 동작합니다.\n\n- 스크립트로 접근 시 속성명은 \"boxShadow\" 를 사용해야 합니다.\n\n- <blur> 값을 크게 설정하면 시스템 자원 요구량이 많아져 성능 저하의 원인이 됩니다.\n\n- <inset>, <spread> 값은 NRE를 지원하지 않습니다. \n 넥사크로 스튜디오 디자인 창에서도 속성값 설정 시 변경된 디자인을 확인할 수 없습니다.\n\n\n◆ web runtime environment 제약\n\n- XCSS 를 사용하지 않고 rgba(), hsl(), hsla() 메소드를 속성에 직접 설정할 경우 브라우저 버전에 따라 적용되지 않을 수 있습니다."
},
{
"id": "p_01_color",
"type": "heading2",
"content": "color",
"option": {
"alias": "Button_color"
}
},
{
"id": "p_02_color",
"type": "pre",
"content": "Button 에 표시되는 텍스트의 색상을 설정하는 속성입니다."
},
{
"id": "p_03_color",
"type": "headline",
"content": "지원 환경"
},
{
"id": "p_04_color",
"type": "table",
"content": "<table class='table column_count_7'><caption></caption><thead><tr><th colspan='2'><div>Desktop NRE</div></th><th colspan='5'><div>Desktop WRE</div></th></tr></thead><tbody><tr><td><div>■ Windows</div></td><td><div>■ macOS</div></td><td><div>■ Edge</div></td><td><div>■ Chrome</div></td><td><div>■ Safari</div></td><td><div>■ Firefox</div></td><td><div>■ Opera</div></td></tr><tr><th colspan='2'><div>Mobile NRE</div></th><th colspan='5'><div>Mobile WRE</div></th></tr><tr><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div>■ Android</div></td><td><div>■ iOS/iPadOS</div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr></tbody></table>",
"option": {
"table_layout": "user",
"codeLanguage": "Javascript",
"table_layout_setting": "110,110,110,110,110,110,110"
}
},
{
"id": "p_05_color",
"type": "headline",
"content": "속성 타입"
},