기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# CSS/JavaScript를 사용하여 Amazon Connect 위젯 버튼 및 프레임을 대상으로 지정
<a name="target-widget-button"></a>

커뮤니케이션 위젯은 호스트 웹 사이트에서 위젯 열기/닫기 버튼과 위젯 프레임을 직접 렌더링합니다. CSS를 사용하여 이러한 요소를 대상으로 지정하거나 JavaScript에서 참조하는 데 사용할 수 있는 특정 선택기가 있습니다.

**작은 정보**  
위젯 버튼의 색상 또는 위젯 자체의 스타일을 업데이트하려면 [Amazon Connect 관리자 웹 사이트](add-chat-to-website.md#customize-chat-widget)를 사용합니다. 보다 사용자 지정 가능한 스타일을 위해 커뮤니케이션 위젯에 직접 [사용자 지정 스타일을 전달](pass-custom-styles.md)할 수 있습니다.

## 위젯 요소 ID 및 예시
<a name="widget-elementid"></a>

다음 이미지는 채팅 위젯 버튼이 사용자 화면에 어떻게 표시되는지 보여 줍니다. 첫 번째 이미지는 채팅 위젯을 여는 열기 버튼을 보여 줍니다. 두 번째 이미지는 채팅 위젯을 닫는 닫기 버튼을 보여 줍니다.

![\[채팅 위젯의 나란히 배치된 이미지를 통해 채팅 창을 열고 닫을 수 있습니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/widget-elements.png)


1.  위젯 열기 버튼: `#amazon-connect-open-widget-button` 

1. 위젯 닫기 버튼: `#amazon-connect-close-widget-button`

1. 위젯 프레임: `#amazon-connect-widget-frame`

   1. 열린 상태의 위젯 프레임: `#amazon-connect-widget-frame.show`

   1. 닫힌 상태의 위젯 프레임: `#amazon-connect-widget-frame:not(.show)`

다음은 이러한 요소를 수정하는 CSS 스타일 시트의 예입니다.

```
/* Target widget button while widget is minimized */
#amazon-connect-open-widget-button {
  ...
}

/* Target widget button while widget is showing */
#amazon-connect-close-widget-button {
  ...
}

/* Target widget frame */
#amazon-connect-widget-frame {
  ...
}

/* Target widget frame while it is showing */
#amazon-connect-widget-frame.show {
  ...
}

/* Target widget frame while it is minimized */
#amazon-connect-widget-frame:not(.show) {
  ...
}
```

다음은 JavaScript를 사용하여 이러한 요소를 참조하는 예입니다.

```
const openWidgetButton = document.getElementById("amazon-connect-open-widget-button");
const closeWidgetButton = document.getElementById("amazon-connect-close-widget-button");

const widgetFrame = document.querySelector("#amazon-connect-widget-frame");
const openWidgetFrame = document.querySelector("#amazon-connect-widget-frame.show");
const hiddenWidgetFrame = document.querySelector("#amazon-connect-widget-frame:not(.show)");
```