# 시작하기 · 사용법

컴포넌트를 연결하기 전에 조명과 서피스의 개념을 살펴보세요.

Package: @bolerish/edge 0.4.0
Source: https://edge.bolerish.com/ko/docs/usage/

<a id="share-one-light"></a>

## 영역 선택하기

하나의 조명은 함께 반응할 서피스들을 관리합니다. 섹션 전체나 일부 요소가 같은 조명을 공유하도록 구성할 수 있습니다.

서피스(surface)는 조명에 연결된 HTML 요소입니다. 연결한 서피스만 하이라이트를 표시합니다. 독립적으로 반응할 영역에는 별도의 조명을 사용하세요.

<a id="keep-your-styles"></a>

## 기존 UI 유지하기

Edge는 컴포넌트의 배경, 글자, 여백과 기본 테두리를 유지합니다. 하이라이트에는 각 서피스의 글자색과 border-radius를 사용합니다. 기존 상호작용과 키보드 포커스 표시도 유지하세요.

서피스의 반응은 [스타일](https://edge.bolerish.com/ko/docs/styles/)에서, 조명의 움직임은 [움직임](https://edge.bolerish.com/ko/docs/motion/)에서 선택할 수 있습니다.

input을 감싸는 방법과 기존 하이라이트와의 충돌은 [적용 시 고려사항](https://edge.bolerish.com/ko/docs/integration/#wrap-inputs-you-own)을 참고하세요.

애플리케이션에서 요소의 위치를 직접 바꾼다면 [레이아웃 변경](https://edge.bolerish.com/ko/docs/integration/#refresh-after-layout-changes)을 참고하세요.

<a id="connect-existing-components"></a>

## 프레임워크 선택하기

사용하는 프레임워크에 맞는 가이드를 확인하세요.

[

### React





](https://edge.bolerish.com/ko/docs/react/usage/)