포건시에서 UI 요소 및 화면 내 표현 요소들의 사이즈 가변 방법

빌더지식 포건시에서 UI 요소 및 화면 내 표현 요소들의 사이즈 가변 방법

추천0 비추천 0

페이지 정보

작성자 GCK제이크

작성일 2022-04-27 23:09 조회 526회 댓글 0건

본문

첨부파일

포건시-가변-사이즈.fgko (552.6K)

관련링크

안녕하세요. GCK제이크입니다.

댓글에서도 간단히 "제이크님" 정도로 불러주세요.

목차는 아래와 같습니다.

< 목차 >

1. 전제

2. 전체 화면의 비율 조정

3. 셀 영역의 가변 사이즈 설정

이번 포스팅에서는 포건시에서 전체 화면, UI 요소 및 화면 내 표현하고 싶으신 내용들에 대한 사이즈 가변 방법에 대해 설명 드리겠습니다.

< 전제 >

전제를 먼저 설명 드리겠습니다.

포건시는 "누구나", "코딩을 잘 알지 못해도", "소프트웨어를 개발하고자 하는 의지가 있다면" 등 쉽고 빠른 웹서비스 개발을 할 수 있도록 웹코드를 자동으로 생성해 주는 도구입니다. 그래서 포건시는 모눈종이 형태와 엑셀 형태의 UI를 기본 화면 구성 형태로 제공하고 있습니다.

그래서, 아래 그림과 같이 선택한 셀 영역의 크기를 화면 하단에 보여줍니다. 웹개발을 하다보면 가장 시간이 많이 소요되고 까다로운 부분 중 하나가 CSS에서 픽셀 공간 맞추고 그리는 부분인데, 포건시에서는 사실상 '초등학생 수준의 산수' 정도만 할 줄 알면 이런 부분을 쉽게 해결할 수 있습니다.

1. 모눈종이 형태의 화면 그리기 상태에서 셀 하나의 영역은 20x20px 입니다. px는 픽셀(pixel)의 약자입니다.

2. 아래와 같이 3x3 영역의 셀을 선택하면 20x3 크기의 영역이므로, 60x60px라고 표시되게 됩니다.

이런 방식을 이용하여 포건시에서는 아주 쉽게 사용자가 현재 작업 중인 영역의 크기를 알 수 있고, 이미지나 테이블, 차트 등의 크기를 가늠할 수 있습니다.

< 전체 화면의 비율 조정 >

다음은 한 페이지에 표현되는 전체 화면의 비율 조정 및 가변 사이즈에 대해 설명 드리겠습니다.

이번 설명은 웹브라우저 전체를 기준으로 함으로 그림이 작게 표현될 수 있습니다. 그림을 클릭하시면 조금 더 큰 사이즈로 보실 수 있습니다.

일반적으로 웹사이트는 ①헤더(Header), ②본문(Body), ③푸터(Footer)의 형태로 구현되며, 본문에는 여러 가지 왼쪽 오른쪽 영역으로 나누어 요소들이 표현됩니다.

1. 포건시에서 이를 표현하면 웹브라우저에서는 아래와 같이 표시됩니다.

하지만 포건시에서 이런 웹사이트를 만들어도 어느 정도 영역을 그려 표현한 후 사이즈는 고정되어 웹브라우저 한 가운데 표시되는 방식으로 표현됩니다.

2. 이런 경우 포건시에서는 기본적으로 '페이지 늘이기 모드'를 제공합니다. 페이지를 한 개 생성 후 오른쪽 패널의 '페이지 설정' 탭으로 가시면 보실 수 있습니다.

페이지 늘이기 모드에서 제공하는 모드는 아래와 같습니다.

① 전역 설정에서 상속

② 없음

③ 수평으로 늘이기

④ 세로로 늘이기

⑤ 양쪽 늘이기

⑥ 화면 비율 유지하고 수평으로 늘이기

이 모든 것을 글자로 하나 하나 설명 드리기는 어렵기에 예제를 만들어 첨부파일에 첨부해 두었습니다. 첨부 파일을 다운로드 받아 열어보시면 아래와 같이 제가 구현해둔 예제가 있으니, 각 페이지를 하나씩 실행 시키시면서 웹브라우저의 크기를 조정해 보십시오.

3. 위 페이지 늘이기 모드 중 "전역 설정에서 상속" 모드라는 말이 있습니다. "전역 설정"이란 「파일 > 옵션 > 응용프로그램 설정 > 페이지 늘이기 모드」에 있는 설정을 말합니다. 이곳(응용 프로그램 설정)은 현재 포건시 파일 전체 영역에 대한 설정을 하실 수 있는 곳입니다. 전역 설정이란 이곳에서 설정한 내용을 의미합니다.