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:38] – admincomfilestudio:draw_title_bar:index [2026/02/20 15:34] (current) – external edit 127.0.0.1
Line 1: Line 1:
-====== 타이틀바 (Title Bar) ======+====== 타이틀바 ======
  
-<타이틀바>는 텍스트를 고품질 이미지 형태로 렌더링하여 표시하는 위젯입니다. 일반 텍스트 위젯보다 시각적으로 부드럽고 수려한 디자인을 제공합니다.+이 문서는 ComfileHMI Editor에서 제공하는 <타이틀바> 오브젝트의 기능과 설정 방법을 설명합니다.   
 +타이틀바는 화면 상단에 제목을 표시하기 위한 전용 오브젝트로, 이미지 기반으로 렌더링됩니다.
  
-{{:comfilestudio:draw_title_bar:titlebar1.png?nolink |타이틀바 위젯 배치 예시}}+<타이틀바>는 이미지로 만들어진 텍스트입니다.
  
-속성창을 통해 글꼴, 크기, 배경색 등을 자유롭게 변경할 수 있으며, 텍스트의 정렬 상태를 세밀하게 조정할 수 있습니다.+{{  :comfilestudio:Draw_Title_Bar:titlebar1.png?nolink | 타이틀바 기본 표시 예  }}
  
-{{:comfilestudio:draw_title_bar:hmi_title2.png?nolink |타이틀바 속성 설정 화면}}+속성창에서 글꼴, 크기, 바탕색 등을 변경할 수 있습니다. 
  
-  * **A (좌우 정렬)**: 텍스트를 왼쪽, 가운데, 오른쪽으로 배치합니다. +  * A : 좌우정렬 
-  * **B (상하 정렬)**: 텍스트를 위쪽, 중간, 아래쪽으로 배치합니다.+  * B : 상하정렬
  
-===== 모서리 모양 설정 =====+{{  :comfilestudio:Draw_Title_Bar:hmi_title2.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:m1.png?nolink |상단 라운드 설정}} +
-{{:comfilestudio:draw_title_bar:m2.png?nolink |상단 라운드 결과}} +
-  * **하단만 둥글게**: 하단 메뉴나 안내창 디자인에 활용됩니다. +
-{{:comfilestudio:draw_title_bar:m3.png?nolink |하단 라운드 설정}} +
-{{:comfilestudio:draw_title_bar:m4.png?nolink |하단 라운드 결과}}+
  
-===== 일반 텍스트 위젯과의 차이점 =====+{{  :comfilestudio:Draw_Title_Bar:m02.png?nolink | 기본 모서리 형태  }}
  
-<타이틀바>는 실행 중 내용이 변하지 않는 **고정 이미지 방식**으로 처리됩니다.+<모서리 둥글게> 옵션을 켜면 아래와 같은 모양이 됩니다. 
  
-  * **안티앨리어싱(Anti-aliasing) 적용**: 텍스트가 배경 이미지와 결합될 때 외곽선을 부드럽게 다듬는 기법이 적용됩니다. 덕분에 일반 텍스트보다 곡선 부분이 훨씬 매끄럽고 고급스럽게 표시됩니다. +{{  :comfilestudio:Draw_Title_Bar:m5.png?nolink | 전체 모서리 둥글게 적용 예  }} 
-  * **용도**: 화면의 제목, 메뉴명, 라벨 등 정적인 문구를 강조하고 싶을 때 사용합니다.+ 
 +{{  :comfilestudio:Draw_Title_Bar:m6.png?nolink | 둥근 모서리 적용 상태 예시  }} 
 + 
 +상단만 둥글게 할 수 있습니다. 
 + 
 +{{  :comfilestudio:Draw_Title_Bar:m1.png?nolink | 상단 모서리 둥글게 적용 예  }} 
 + 
 +{{  :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#액션|상위 페이지로 가기]]