Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
comfilestudio:draw_title_bar:index [2026/02/12 21:43] – admincomfilestudio:draw_title_bar:index [2026/02/20 15:34] (current) – external edit 127.0.0.1
Line 1: Line 1:
-====== 타이틀바 (Title Bar) ======+====== 타이틀바 ======
  
-이 문서는 Comfile Studio에서 제공하는 <타이틀바> 오브젝트의 기능과 설정 방법을 설명합니다. 타이틀바는 화면 상단에 제목을 표시하기 위한 전용 오브젝트로, 이미지 기반으로 렌더링되어 미려한 디자인을 제공합니다.+이 문서는 ComfileHMI Editor에서 제공하는 <타이틀바> 오브젝트의 기능과 설정 방법을 설명합니다.   
 +타이틀바는 화면 상단에 제목을 표시하기 위한 전용 오브젝트로, 이미지 기반으로 렌더링됩니다.
  
-<타이틀바>는 이미지로 생성된 고품질 텍스트 오브젝트입니다.+<타이틀바>는 이미지로 만들어진 텍스트입니다.
  
-{{:comfilestudio:draw_title_bar:titlebar1.png?nolink |타이틀바 기본 표시 예}}+{{  :comfilestudio:Draw_Title_Bar:titlebar1.png?nolink | 타이틀바 기본 표시 예  }}
  
-속성창에서 글꼴, 크기, 바탕색 등을 자유롭게 변경할 수 있습니다. +속성창에서 글꼴, 크기, 바탕색 등을 변경할 수 있습니다. 
  
-  * **A (좌우 정렬)**: 텍스트를 왼쪽, 가운데, 오른쪽으로 정렬합니다. +  * A : 좌우정렬 
-  * **B (상하 정렬)**: 텍스트를 위쪽, 중간, 아래쪽으로 정렬합니다.+  * B : 상하정렬
  
-{{:comfilestudio:draw_title_bar:hmi_title2.png?nolink |타이틀바 속성창 설정 화면}}+{{  :comfilestudio:Draw_Title_Bar:hmi_title2.png?nolink | 타이틀바 속성창 화면  }}
  
-===== 모서리 모양 설정 =====+===== 모서리 모양 =====
  
-타이틀바의 모서리 옵션을 조절하여 화면 디자인에 최적화된 다양한 스타일을 연출할 수 있습니다.+타이틀바의 기본 모양은 다음과 같습니다.
  
-  * **기본 모양**: 각진 직사각형 형태입니다. +{{  :comfilestudio:Draw_Title_Bar:m02.png?nolink | 기본 모서리 형태  }}
-{{:comfilestudio:draw_title_bar:m02.png?nolink |기본 모서리 형태}}+
  
-  * **전체 둥글게**: <모서리 둥글게> 옵션을 활성화하면 부드러운 라운드 박스 형태가 됩니다. +<모서리 둥글게> 옵션을 켜면 아래와 같은 모양이 됩니다. 
-{{:comfilestudio:draw_title_bar:m5.png?nolink |전체 모서리 둥글게 적용 예}} +
-{{:comfilestudio:draw_title_bar:m6.png?nolink |둥근 모서리 적용 상태 예시}}+
  
-  * **상단만 둥글게**: 위쪽 모서리만 곡선으로 처리합니다. +{{  :comfilestudio:Draw_Title_Bar:m5.png?nolink | 전체 모서리 둥글게 적용 예  }}
-{{:comfilestudio:draw_title_bar:m1.png?nolink |상단 모서리 둥글게 적용 예}} +
-{{:comfilestudio:draw_title_bar:m2.png?nolink |상단만 둥근 형태 예시}}+
  
-  * **하단만 둥글게**: 아래쪽 모서리만 곡선으로 처리합니다. +{{  :comfilestudio:Draw_Title_Bar:m6.png?nolink | 둥근 모서리 적용 상태 예시  }}
-{{:comfilestudio:draw_title_bar:m3.png?nolink |하단 모서리 둥글게 적용 예}} +
-{{:comfilestudio:draw_title_bar:m4.png?nolink |하단만 둥근 형태 예시}}+
  
-===== 텍스트 위젯과의 차이점 (안티앨리어싱) =====+상단만 둥글게 할 수 있습니다.
  
-<타이틀바>는 실행 중에 내용이 변경되지 않는 **고정 이미지 방식**의 위젯입니다.+{{  :comfilestudio:Draw_Title_Bar:m1.png?nolink | 상단 모서리 둥글게 적용 예  }}
  
-  * **안티앨리어싱(Anti-aliasing) 적용**: 타이틀바의 글꼴은 배경 이미지와 함께 렌더링되므로 안티앨리어싱이 적용됩니다. 이는 곡선이나 대각선이 계단 현상 없이 부드럽게 표현되도록 하는 그래픽 기법입니다. +{{  :comfilestudio:Draw_Title_Bar:m2.png?nolink | 상단만 둥근 형태 예시  }} 
-  * **디자인 활용**: 화면의 대제목이나 메뉴 바 등 고정된 문구를 고급스럽게 표현하고 싶을 때 사용합니다.+ 
 +하단만 둥글게 할 수 있습니다. 
 + 
 +{{  :comfilestudio:Draw_Title_Bar:m3.png?nolink | 하단 모서리 둥글게 적용 예  }} 
 + 
 +{{  :comfilestudio:Draw_Title_Bar:m4.png?nolink | 하단만 둥근 형태 예시  }} 
 + 
 +===== 텍스트 VS 타이틀바 ===== 
 + 
 +<타이틀바>는 동작 중 그 내용이 바뀌지 않는 고정 이미지입니다.   
 +<타이틀바>의 글꼴은 배경 이미지와 함께 렌더링되므로 <안티알리아싱>이 적용됩니다.   
 +<안티알리아싱>은 곡선이나 대각선이 부드럽게 표현되도록 하는 그래픽 처리 기법입니다.
  
 ---- ----
-keyword: 타이틀바, 제목 표시줄, 안티앨리어싱, 라운드 모서리, UI 디자인, 고정 텍스트, 컴파일 스튜디오 디자인+ 
 +키워드: 타이틀바, Draw_Title_Bar, ComfileHMI, HMI 오브젝트, 모서리 둥글게, 안티알리아싱, 정렬 옵션, 화면 제목 설정
  
 [[comfilestudio:index#액션|상위 페이지로 가기]] [[comfilestudio:index#액션|상위 페이지로 가기]]