Manual

스타일링 함수

이재협/실장/시스템개발실/PHYSIA

이재협/실장/시스템개발실/PHYSIA

— 3 min read

이 문서에서는 Flex Panels에 제공되는 모든 스타일링 함수에 대해 설명합니다. 모든 스타일링 속성에 대한 일반 정보는 Flex Panel Struct Members를 참조하세요.

설정자 (Setters)

다음은 Flex Panel의 스타일을 설정하는 함수 목록입니다:

함수 이름 설명
flexpanel_node_style_set_width 너비 설정
flexpanel_node_style_set_height 높이 설정
flexpanel_node_style_set_min_width 최소 너비 설정
flexpanel_node_style_set_max_width 최대 너비 설정
flexpanel_node_style_set_min_height 최소 높이 설정
flexpanel_node_style_set_max_height 최대 높이 설정
flexpanel_node_style_set_aspect_ratio 종횡비 설정
flexpanel_node_style_set_position 위치 설정
flexpanel_node_style_set_position_type 위치 유형 설정
flexpanel_node_style_set_margin 여백 설정
flexpanel_node_style_set_padding 패딩 설정
flexpanel_node_style_set_border 테두리 설정
flexpanel_node_style_set_gap 간격 설정
flexpanel_node_style_set_direction 방향 설정
flexpanel_node_style_set_flex_direction 플렉스 방향 설정
flexpanel_node_style_set_flex_wrap 플렉스 래핑 설정
flexpanel_node_style_set_flex_basis 플렉스 기준 설정
flexpanel_node_style_set_flex_grow 플렉스 성장 설정
flexpanel_node_style_set_flex_shrink 플렉스 축소 설정
flexpanel_node_style_set_flex 플렉스 설정
flexpanel_node_style_set_justify_content 콘텐츠 정렬 설정
flexpanel_node_style_set_align_items 아이템 정렬 설정
flexpanel_node_style_set_align_self 자기 정렬 설정
flexpanel_node_style_set_align_content 콘텐츠 정렬 설정
flexpanel_node_style_set_display 표시 설정

접근자 (Getters)

다음은 Flex Panel의 스타일을 가져오는 함수 목록입니다:

함수 이름 설명
flexpanel_node_style_get_width 너비 가져오기
flexpanel_node_style_get_height 높이 가져오기
flexpanel_node_style_get_min_width 최소 너비 가져오기
flexpanel_node_style_get_max_width 최대 너비 가져오기
flexpanel_node_style_get_min_height 최소 높이 가져오기
flexpanel_node_style_get_max_height 최대 높이 가져오기
flexpanel_node_style_get_aspect_ratio 종횡비 가져오기
flexpanel_node_style_get_position 위치 가져오기
flexpanel_node_style_get_position_type 위치 유형 가져오기
flexpanel_node_style_get_margin 여백 가져오기
flexpanel_node_style_get_padding 패딩 가져오기
flexpanel_node_style_get_border 테두리 가져오기
flexpanel_node_style_get_gap 간격 가져오기
flexpanel_node_style_get_direction 방향 가져오기
flexpanel_node_style_get_flex_direction 플렉스 방향 가져오기
flexpanel_node_style_get_flex_wrap 플렉스 래핑 가져오기
flexpanel_node_style_get_flex_basis 플렉스 기준 가져오기
flexpanel_node_style_get_flex_grow 플렉스 성장 가져오기
flexpanel_node_style_get_flex_shrink 플렉스 축소 가져오기
flexpanel_node_style_get_flex 플렉스 가져오기
flexpanel_node_style_get_justify_content 콘텐츠 정렬 가져오기
flexpanel_node_style_get_align_items 아이템 정렬 가져오기
flexpanel_node_style_get_align_self 자기 정렬 가져오기
flexpanel_node_style_get_align_content 콘텐츠 정렬 가져오기
flexpanel_node_style_get_display 표시 가져오기

단위 (Units)

일부 속성은 절대 픽셀 값 또는 백분율 값을 가질 수 있습니다. 설정자 함수인 flexpanel_node_style_set_width와 같은 함수에서는 다음 열거형 멤버 중 하나를 사용하여 값과 함께 단위를 지정할 수 있습니다:

상수 설명
flexpanel_unit.point 값을 픽셀 수로 해석
flexpanel_unit.percent 값을 백분율로 해석
flexpanel_unit.auto 지원되는 속성에 대해 자동 크기 조정 사용

이러한 속성에 대한 접근자 함수인 flexpanel_node_style_get_width는 두 개의 멤버를 가진 구조체를 반환합니다:

멤버 데이터 유형 설명
unit Flex Panel Unit Constant 값의 단위, 위의 표에 있는 열거형 멤버 중 하나
value Real 값 자체

활용 예제

다음은 Flex Panel의 스타일링 함수를 활용하는 몇 가지 예제입니다:

// Flex Panel의 너비와 높이를 설정하는 예제
flexpanel_node_style_set_width(panel, 300);
flexpanel_node_style_set_height(panel, 200);

// Flex Panel의 여백과 패딩을 설정하는 예제
flexpanel_node_style_set_margin(panel, 10);
flexpanel_node_style_set_padding(panel, 5);

// Flex Panel의 플렉스 방향과 정렬을 설정하는 예제
flexpanel_node_style_set_flex_direction(panel, flexpanel_direction_row);
flexpanel_node_style_set_justify_content(panel, flexpanel_justify_center);

// Flex Panel의 최소 및 최대 크기를 설정하는 예제
flexpanel_node_style_set_min_width(panel, 100);
flexpanel_node_style_set_max_width(panel, 500);

// Flex Panel의 테두리와 간격을 설정하는 예제
flexpanel_node_style_set_border(panel, 2);
flexpanel_node_style_set_gap(panel, 15);

// Flex Panel의 위치와 종횡비를 설정하는 예제
flexpanel_node_style_set_position(panel, flexpanel_position_absolute);
flexpanel_node_style_set_aspect_ratio(panel, 16.0 / 9.0);
← 이전 글: Flex Panel 노드의 너비 설정