메뉴 닫기

Axure RP로 화면 100% 가로 너비에 맞춘 이미지 혹은 배너 만들기

개요

Axure RP로 100% 가로 너비의 이미지 혹은 배너를 만드는 방법입니다. 브라우저 창 크기가 변함에 따라 이미지 혹은 배너의 가로 너비가 함께 변경됩니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.

 

실습 예제 파일 다운로드

실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드

 

시작하기

예제 파일 중 Full-width image or banner 페이지를 엽니다. 해당 페이지에는 Full-width background라는 dynamic panel이 있습니다. Full-width background 위젯을 선택하고 PROPERTIES 탭에서 100% Wide (browser only)라는 체크박스에 체크합니다.

 

배경 이미지 추가하기

STYLE탭에서 Back Image에서 Import를 클릭하여 원하는 배경 이미지를 하나 선택합니다. 혹은 이미지가 아니라 컬러로 배경을 쓰고 싶다면 Back Color 옵션을 설정합니다.

아래쪽에 있는 드롭다운 메뉴에서 Stretch to Cover 옵션을 선택합니다. 이 옵션을 선택하면 이미지가 항상 전체 창 너비에 맞게 변경됩니다.

 

미리보기

Preview 버튼을 클릭하여 미리보기 합니다.

댓글 남기기