You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: DHTMLX JavaScript Kanban 라이브러리 문서에서 cardHeight 구성에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Kanban의 무료 30일 평가판을 다운로드하세요.
3
+
title: cardHeight 설정
4
+
description: DHTMLX JavaScript Kanban 라이브러리 문서에서 cardHeight 설정에 대해 알아보세요. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Kanban의 무료 30일 평가판을 다운로드할 수 있습니다.
5
5
---
6
6
7
7
# cardHeight
8
8
9
9
### 설명
10
10
11
-
@short: 선택 사항입니다. 카드의 높이를 정의합니다.
11
+
@short: 선택 사항입니다. 카드의 높이입니다.
12
12
13
13
### 사용법
14
14
@@ -17,7 +17,7 @@ cardHeight?: number; // px
17
17
~~~
18
18
19
19
:::important
20
-
[`renderType: "lazy"`](/api/config/js_kanban_rendertype_config.md)와 [`scrollType: "default"`](/api/config/js_kanban_scrolltype_config.md)를 함께 사용할 때는`cardHeight`속성으로 카드의 고정 높이를 설정하는 것이 중요합니다. 설정하지 않으면 카드가 보이지 않습니다.
20
+
[`renderType: "lazy"`](api/config/js_kanban_rendertype_config.md)와 [`scrollType: "default"`](api/config/js_kanban_scrolltype_config.md) 설정을 함께 사용하는 경우,`cardHeight`속성을 통해 카드의 고정 높이를 반드시 지정해야 합니다. 지정하지 않으면 카드가 표시되지 않습니다.
21
21
:::
22
22
23
23
### 예제
@@ -27,12 +27,12 @@ new kanban.Kanban("#root", {
27
27
cards,
28
28
columns,
29
29
cardHeight:150, // px
30
-
//other parameters
30
+
//기타 매개변수
31
31
});
32
32
~~~
33
33
34
-
**변경 내역:** 이 속성은 버전 1.2에서 도입되었습니다.
34
+
**변경 내역:** 이 속성은 v1.2에 추가되었습니다.
35
35
36
-
**관련 문서:**[구성](/guides/configuration#카드)
36
+
**관련 문서:**[설정](guides/configuration.md#cards)
37
37
38
-
**관련 샘플:**[Kanban. Lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)
38
+
**관련 샘플:**[Kanban. Lazy rendering and column scroll](https://snippet.dhtmlx.com/xez9ghqq?tag=kanban)
description: DHTMLX JavaScript Kanban 라이브러리 문서에서 카드 설정에 대해 알아보세요. 개발자 가이드와 API 참조를 살펴보고, 코드 예제와 라이브 데모를 체험하며, DHTMLX Kanban의 무료 30일 평가판을 다운로드할 수 있습니다.
4
+
description: DHTMLX JavaScript Kanban 라이브러리 문서에서 카드 설정에 대해 알아볼 수 있습니다. 개발자 가이드와 API 참조를 탐색하고, 코드 예제와 라이브 데모를 시도해 보며 DHTMLX Kanban의 무료 30일 평가판을 다운로드할 수 있습니다.
5
5
---
6
6
7
7
# 카드
@@ -29,12 +29,13 @@ cards?: [
29
29
coverURL?: string,
30
30
name?: string,
31
31
isCover?: boolean
32
+
size?: number
32
33
}, {...}
33
34
],
34
35
color?: string,
35
36
users?: array | string | number,
36
-
// users?: array - 여러 사용자 지정 시 "multiselect" 편집기 유형을 사용할 경우
37
-
// users?: string | number - 단일 사용자 지정 시 "combo" 또는 "select" 편집기 유형을 사용할 경우
37
+
// users?: array - 여러 사용자를 지정할 때 "multiselect" 편집기 타입을 사용하는 경우
38
+
// users?: string | number - 단일 사용자를 지정할 때 "combo" 또는 "select" 편집기 타입을 사용하는 경우
38
39
priority?: string | number,
39
40
css?: string,
40
41
votes?: array,
@@ -46,61 +47,62 @@ cards?: [
46
47
text?: string,
47
48
date?:Date,
48
49
}, {...}
49
-
],
50
+
],
50
51
[custom_key: string]?: any
51
52
}, {...} // 다른 카드 데이터
52
53
];
53
54
~~~
54
55
55
56
### 매개변수
56
57
57
-
각 카드는 다음 매개변수를 포함할 수 있습니다:
58
-
59
-
-`id` - (선택) 관련 메서드를 통해 카드를 관리할 때 사용하는 카드 **ID**
60
-
-`label` - (선택) **Label** 필드에 표시되는 텍스트 라벨
61
-
-`description` - (선택) **Description** 필드에 표시되는 설명 텍스트
62
-
-`progress` - (선택) 0부터 100까지 범위의 진행률 값으로, **Progress bar** 필드에 표시
63
-
-`start_date` - (선택) Date 객체 형식의 시작 날짜 (문자열 날짜 사용 권장하지 않음), **Start date** 필드에 표시
64
-
-`end_date` - (선택) Date 객체 형식의 종료 날짜 (문자열 날짜 사용 권장하지 않음), **End date** 필드에 표시
65
-
-`attached` - (선택) 첨부 파일 상세 정보를 담은 배열, **Attachment** 필드에 표시. 각 객체는 다음을 포함할 수 있습니다:
66
-
- `id` - (필수) 첨부 파일 **ID**
67
-
- `url` - (선택) 파일 경로
68
-
- `previewURL` - (선택) 미리보기 이미지 경로
69
-
- `coverURL` - (선택) 커버로 설정된 이미지 경로
70
-
- `name` - (선택) 파일명
71
-
- `isCover` - (선택) **true**일 경우, "coverURL"에서 커버 이미지가 로드됨
72
-
-`color` - (선택) 카드 상단 라인의 색상을 나타내는 HEX 색상 코드
73
-
-`users` - (선택) 다수 사용자의 경우 사용자 ID 배열, 단일 사용자의 경우 문자열 또는 숫자. 사용자 할당을 위해 [cardShape.users](../js_kanban_cardshape_config) 속성에 사용자 데이터를 배열로 정의합니다. 사용자들은 **Users** 필드에 표시됩니다.
58
+
각 카드에 대해 다음 매개변수(데이터)를 지정할 수 있습니다:
59
+
60
+
-`id` - (선택 사항) 카드 **ID**입니다. 해당 메서드를 통해 카드를 관리할 때 사용됩니다.
61
+
-`label` - (선택 사항) 카드 라벨입니다. **Label** 필드에 표시됩니다.
62
+
-`description` - (선택 사항) 카드 설명입니다. **Description** 필드에 표시됩니다.
63
+
-`progress` - (선택 사항) 진행률 바 값입니다. 0에서 100 사이의 값을 지정할 수 있습니다. **Progress bar** 필드에 표시됩니다.
-`users` - (선택 사항) 여러 할당 사용자의 **ID** 배열 또는 단일 할당 사용자의 **string | number**입니다. 할당된 사용자를 지정하려면 [cardShape.users](api/config/js_kanban_cardshape_config.md) 속성에 사용자 데이터 배열을 정의해야 합니다. 사용자는 **Users** 필드에 표시됩니다.
74
76
75
77
:::info
76
-
`users?: array` - 여러 사용자 할당 시[**multiselect**](../js_kanban_editorshape_config/#--combo-select-multiselect-유형에-대한-매개변수) 편집기 유형을 사용할 때 사용자 **ID** 배열을 사용하세요.
78
+
`users?: array` - 여러 사용자를 지정할 때[**multiselect**](api/config/js_kanban_editorshape_config.md#--parameters-for-combo-select-and-multiselect-types) 편집기 타입을 사용하는 경우 사용자 **ID** 배열을 지정합니다.
77
79
78
-
`users?: string | number` - 단일 사용자 할당 시[**combo** 또는 **select**](../js_kanban_editorshape_config/#--combo-select-multiselect-유형에-대한-매개변수) 편집기 유형을 사용할 때 사용자**ID**를 지정하세요.
80
+
`users?: string | number` - 단일 사용자를 지정할 때[**combo** 또는 **select**](api/config/js_kanban_editorshape_config.md#--parameters-for-combo-select-and-multiselect-types) 편집기 타입을 사용하는 경우 단일**ID**를 지정합니다.
-`date` - (선택) 댓글이 게시된 시점을 나타내는 Date 객체 (수정 후에도 갱신되지 않음)
90
-
-`custom_key` - (선택) 카드에 대한 사용자 정의 키. 카드 위치를 열이나 행에 지정할 때 사용할 수 있습니다. 자세한 내용은 [columnKey](../js_kanban_columnkey_config) 및 [rowKey](../js_kanban_rowkey_config)를 참조하세요.
83
+
-`priority` - (선택 사항) 카드 우선순위 **ID**입니다. 카드 우선순위를 지정하려면 [cardShape.priority](api/config/js_kanban_cardshape_config.md) 속성에 우선순위 데이터 배열을 정의해야 합니다. **Priority** 필드에 표시됩니다.
84
+
-`css` - (선택 사항) 개별 카드에 대한 CSS 스타일을 정의합니다.
85
+
-`votes` - (선택 사항) 사용자 ID 배열입니다.
86
+
-`comments` - (선택 사항) 댓글 데이터가 포함된 객체 배열입니다. 각 댓글 객체에 대해 다음 매개변수를 지정할 수 있습니다:
87
+
-`id` - (필수) 댓글의**ID**
88
+
-`userId` - (필수) 댓글을 작성한 사용자의**ID**
89
+
-`cardId` - (필수) 댓글이 속한 카드의**ID**
90
+
-`text` - (선택 사항) 댓글 텍스트입니다. HTML 마크업도 포함할 수 있습니다.
91
+
-`date` - (선택 사항) 댓글 작성 날짜 객체입니다(문자열 날짜는 지정하지 마십시오). 수정 후에는 업데이트되지 않습니다.
92
+
-`custom_key` - (선택 사항) 카드의 사용자 정의 키입니다. 카드를 열(column)과 행(row)에 배치하기 위해 사용자 정의 키를 지정할 수 있습니다. 자세한 내용은 [columnKey](../js_kanban_columnkey_config) 및 [rowKey](api/config/js_kanban_rowkey_config.md) 속성을 참조하십시오.
91
93
92
94
:::info
93
-
새 카드 데이터를 동적으로 로드하려면 [**parse()**](../../methods/js_kanban_parse_method) 메서드를 사용할 수 있습니다.
95
+
카드 데이터를 동적으로 새로 불러오려면 [**parse()**](api/methods/js_kanban_parse_method.md) 메서드를 사용할 수 있습니다!
94
96
:::
95
97
96
98
### 예제
97
99
98
-
~~~jsx {1-40,44}
100
+
~~~jsx {1-41,45}
99
101
constcards= [
100
102
{
101
103
id:1,
102
-
label:"React와의 통합",
103
-
description:"간단한 설명",
104
+
label:"Integration with React",
105
+
description:"Some description",
104
106
progress:25,
105
107
start_date:newDate("02/24/2022"),
106
108
end_date:newDate("02/24/2023"),
@@ -111,7 +113,8 @@ const cards = [
111
113
previewURL:"../assets/img-1.jpg",
112
114
coverURL:"../assets/img-1.jpg",
113
115
name:"img-1.jpg",
114
-
isCover:true
116
+
isCover:true,
117
+
size:11979
115
118
}, {...} // 다른 첨부 파일 데이터
116
119
],
117
120
color:"#65D3B3",
@@ -122,16 +125,16 @@ const cards = [
122
125
id:1,
123
126
userId:1,
124
127
cardId:1,
125
-
text:"안녕하세요, 동료 여러분. 이 작업에 대한 제 의견을 공유하고자 합니다. 계획의 절반 이상은 지체 없이 처리해야 한다고 생각합니다.",
128
+
text:"Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays. ",
126
129
date:newDate(),
127
130
}, {...} // 다른 댓글
128
131
],
129
132
priority:1,
130
133
// "feature" 행에 카드를 배치하기 위한 사용자 정의 필드
131
-
// rowKey 설정은 "type" 값으로 지정되어야 합니다.
134
+
// rowKey 설정은 "type" 값으로 해야 합니다
132
135
type:"feature",
133
136
// "backlog" 열에 카드를 배치하기 위한 사용자 정의 필드
134
-
// columnKey 설정은 "stage" 값으로 지정되어야 합니다.
137
+
// columnKey 설정은 "stage" 값으로 해야 합니다
135
138
stage:"backlog",
136
139
css:"red",
137
140
}, {...} // 다른 카드 데이터
@@ -144,10 +147,10 @@ new kanban.Kanban("#root", {
0 commit comments