# 투명도 설정

## 사용방법

<figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FaTrzOnhYMwqFwnhofAaI%2Ftransparent.png?alt=media&#x26;token=f381308d-2691-4f38-8206-1efc603a1e94" alt=""><figcaption></figcaption></figure>

1. 투명도를 조절할 컴포넌트를 선택합니다.
2. 투명도 설정을 클릭합니다.
3. 원하는 투명도 상태값을 숫자로 입력합니다.

## 기능설명

<table><thead><tr><th width="129">기능</th><th width="129">속성</th><th>의미</th></tr></thead><tbody><tr><td>투명도 설정</td><td>%</td><td>0부터 100까지 숫자 입력, 0에 가까울수록 투명</td></tr></tbody></table>

{% hint style="info" %}

* 체크를 했더라도 수치값을 입력해야 투명도가 적용됩니다.
* 스텝을 제외한 모든 컴포넌트(그룹, 컨트롤)에 적용할 수 있습니다.
  {% endhint %}

## 결과예시

<div align="left"><figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2FlyCV3SpZl3vv7HVDPjt9%2F%E1%84%90%E1%85%AE%E1%84%86%E1%85%A7%E1%86%BC%E1%84%83%E1%85%A9_before.png?alt=media&#x26;token=7680bb39-a40e-4ee3-95eb-13fc240e06ef" alt="" width="375"><figcaption><p>투명도 적용 전</p></figcaption></figure> <figure><img src="https://2124792335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSGiM6UdbWlqrZA6kPT9b%2Fuploads%2Fr2GsHN8T4l5fiQswRwQX%2F%E1%84%90%E1%85%AE%E1%84%86%E1%85%A7%E1%86%BC%E1%84%83%E1%85%A9_after.png?alt=media&#x26;token=45e2863e-5a8a-4425-b40f-0ca4284e83df" alt="" width="375"><figcaption><p>투명도 30% 적용</p></figcaption></figure></div>

## 따라하기

화면 속 \[시작하기]버튼을 눌러 데모를 확인하실 수 있습니다.

{% @storylane/embed subdomain="app" linkValue="ykibucmncmcv" url="<https://app.storylane.io/share/ykibucmncmcv>" %}