라이트박스 - Webflow 도움말

Last updated on 10/23/2025@mrbirddev

라이트박스 요소를 사용하여 이미지나 비디오를 전체 화면 모달 창에 표시하세요.

라이트박스 요소는 이미지(캡션 포함 또는 미포함)나 비디오를 전체 화면 슬라이드쇼 모달 창에 표시합니다. 라이트박스는 다양한 브레이크포인트에 대응하여 데스크톱, 태블릿, 모바일 화면에서 미디어를 표시하는 데 유용합니다.

라이트박스 생성 방법

라이트박스는 링크 블록에 중첩된 클릭 가능한 썸네일입니다. 사이트 방문자가 라이브 사이트에서 링크의 경계 내를 클릭하면, 라이트박스가 열려 연결된 미디어를 표시합니다. 추가 패널 > 고급에서 라이트박스를 추가할 수 있습니다.

라이트박스에는 다른 이미지 요소처럼 작동하는 이미지 요소가 포함되어 있습니다. 크기를 조정하고, 플레이스홀더 썸네일 이미지를 교체하려면 더블 클릭하고, alt 텍스트를 추가할 수 있습니다. 이미지 요소에 대해 더 알아보기.

라이트박스 썸네일과 더 큰 라이트박스 모달 창에 동일한 이미지를 사용할 수 있습니다. Webflow는 모든 인라인 이미지에 대해 자동으로 반응형 변형을 생성합니다. 반응형 이미지에 대해 더 알아보기.

플레이스홀더 이미지 요소를 교체하고 다른 콘텐츠(예: 헤딩 또는 다른 비링크 요소)를 라이트박스 링크 안에 드래그 앤 드롭합니다.

또한 div 블록을 사용하여 배경 이미지를 적용하여 동일한 크기의 이미지 썸네일을 만들 수 있습니다.

라이트박스 링크와 그 콘텐츠 모두 스타일을 지정할 수 있습니다. 예를 들어, 라이트박스 링크에 텍스트 요소를 중첩하면 라이트박스 링크 요소의 타이포그래피를 스타일링할 수 있습니다.

라이트박스 링크를 클릭했을 때 열리는 모달 창의 배경 오버레이는 사용자 지정할 수 없습니다. 그러나 이미지나 비디오를 추가하고 이미지 캡션을 추가할 수 있습니다.

라이트박스 모달 창에 이미지와 캡션을 추가하려면:

라이트박스 링크에 원하는 만큼 이미지를 추가할 수 있습니다. 이 이미지는 라이트박스 모달 창 안에서 슬라이드쇼로 표시됩니다.

현재 라이트박스 요소는 라이트박스 내 이미지에 대한 대체 텍스트를 지원하지 않습니다.

라이트박스 모달 창에 비디오를 추가하려면:

미디어 컬렉션 필드(예: 이미지 필드, 다중 이미지 필드, 비디오 필드)에서 썸네일 이미지 및/또는 라이트박스 미디어를 가져와 동적 라이트박스를 생성할 수 있습니다.

동적 컬렉션 필드를 라이트박스 썸네일에 연결하려면:

그런 다음, 라이트박스를 컬렉션 필드에 연결하여 동적 컬렉션 이미지가 라이트박스에서 사용할 수 있도록 합니다. 동적 컬렉션 필드를 라이트박스 미디어에 연결하려면:

다중 이미지 필드에 라이트박스를 연결하려면:

컬렉션 목록이나 컬렉션 페이지에 라이트박스를 추가할 때 다중 이미지 필드에 라이트박스를 연결할 수도 있습니다.

여러 라이트박스를 연결하여 슬라이드쇼 갤러리를 만들 수 있습니다. 사이트 방문자가 연결된 라이트박스를 클릭하면, 라이트박스는 연결된 그룹과 관련된 모든 미디어를 엽니다.

같은 그룹 이름을 사용하는 라이트박스는 그룹으로 연결됩니다.

컬렉션 목록의 라이트박스의 경우, 컬렉션 항목에서 하나의 라이트박스를 생성하고 연결하면 컬렉션 목록의 모든 라이트박스가 자동으로 연결됩니다.

페이지에 여러 개의 라이트박스가 있는 경우, 각 라이트박스 그룹에 다른 그룹 이름을 지정하여 구분할 수 있습니다.

Last updated on 10/23/2025@mrbirddev