웹 UI 라이브러리인 GWC에서 제공하는 Label 컴포넌트에 대한 예제 코드입니다.
먼저 DOM 구성은 다음과 같습니다.
<div class="center">
<div class="panel">
<div class="vcenter">
<gwc-label content="레이블1" outline-type="concave"></gwc-label>
<gwc-textinput></gwc-textinput>
</div>
<div class="vcenter">
<gwc-label content="레이블2" outline-type="none"></gwc-label>
<gwc-switch></gwc-switch>
</div>
<div class="vcenter">
<gwc-label content="레이블3" outline-type="convex"></gwc-label>
<gwc-textinput></gwc-textinput>
</div>
<div>
<gwc-label content="<span style='color:yellow'>Color 라벨</span>"></gwc-label>
<gwc-label content="<span style='color:red;text-shadow:none'>Color 라벨</span>"></gwc-label>
<gwc-label content="<span style='color:cyan;text-shadow:none'>Color 라벨</span>"></gwc-label>
</div>
</div>
</div>
<div class="center">
<div class="panel">
<div class="vcenter">
<gwc-label content="레이블1" outline-type="concave"></gwc-label>
<gwc-textinput></gwc-textinput>
</div>
<div class="vcenter">
<gwc-label content="레이블2" outline-type="none"></gwc-label>
<gwc-switch></gwc-switch>
</div>
<div class="vcenter">
<gwc-label content="레이블3" outline-type="convex"></gwc-label>
<gwc-textinput></gwc-textinput>
</div>
<div>
<gwc-label content="<span style='color:yellow'>Color 라벨</span>"></gwc-label>
<gwc-label content="<span style='color:red;text-shadow:none'>Color 라벨</span>"></gwc-label>
<gwc-label content="<span style='color:cyan;text-shadow:none'>Color 라벨</span>"></gwc-label>
</div>
</div>
</div>
그리고 CSS 구성은 다음과 같구요.
.center {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.panel {
display: flex;
gap: 0.4em;
flex-direction: column;
padding: 1em;
}
.vcenter {
display: flex;
align-items: center;
gap: 0.2em;
}
.center {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.panel {
display: flex;
gap: 0.4em;
flex-direction: column;
padding: 1em;
}
.vcenter {
display: flex;
align-items: center;
gap: 0.2em;
}
.center {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.panel {
display: flex;
gap: 0.4em;
flex-direction: column;
padding: 1em;
}
.vcenter {
display: flex;
align-items: center;
gap: 0.2em;
}
실행 결과는 다음과 같습니다.
속성의 text-align을 지정할 수 있으며 값은 left, center, right입니다. 예시는 다음과 같습니다.
<gwc-label content="필 드" text-align="right"></gwc-label>
<gwc-label content="필 드" text-align="right"></gwc-label>