빌더지식 포건시에서 UI 요소 및 화면 내 표현 요소들의 사이즈 가변 방법
추천0 비추천 0
페이지 정보
작성자 GCK제이크 작성일 2022-04-27 23:09 조회 538회 댓글 0건본문
첨부파일
관련링크
안녕하세요. GCK제이크입니다.
댓글에서도 간단히 "제이크님" 정도로 불러주세요.
목차는 아래와 같습니다.
< 목차 >
1. 전제
2. 전체 화면의 비율 조정
3. 셀 영역의 가변 사이즈 설정
이번 포스팅에서는 포건시에서 전체 화면, UI 요소 및 화면 내 표현하고 싶으신 내용들에 대한 사이즈 가변 방법에 대해 설명 드리겠습니다.
< 전제 >
전제를 먼저 설명 드리겠습니다.
포건시는 "누구나", "코딩을 잘 알지 못해도", "소프트웨어를 개발하고자 하는 의지가 있다면" 등 쉽고 빠른 웹서비스 개발을 할 수 있도록 웹코드를 자동으로 생성해 주는 도구입니다. 그래서 포건시는 모눈종이 형태와 엑셀 형태의 UI를 기본 화면 구성 형태로 제공하고 있습니다.
그래서, 아래 그림과 같이 선택한 셀 영역의 크기를 화면 하단에 보여줍니다. 웹개발을 하다보면 가장 시간이 많이 소요되고 까다로운 부분 중 하나가 CSS에서 픽셀 공간 맞추고 그리는 부분인데, 포건시에서는 사실상 '초등학생 수준의 산수' 정도만 할 줄 알면 이런 부분을 쉽게 해결할 수 있습니다.
1. 모눈종이 형태의 화면 그리기 상태에서 셀 하나의 영역은 20x20px 입니다. px는 픽셀(pixel)의 약자입니다.
2. 아래와 같이 3x3 영역의 셀을 선택하면 20x3 크기의 영역이므로, 60x60px라고 표시되게 됩니다.
이런 방식을 이용하여 포건시에서는 아주 쉽게 사용자가 현재 작업 중인 영역의 크기를 알 수 있고, 이미지나 테이블, 차트 등의 크기를 가늠할 수 있습니다.
< 전체 화면의 비율 조정 >
다음은 한 페이지에 표현되는 전체 화면의 비율 조정 및 가변 사이즈에 대해 설명 드리겠습니다.
이번 설명은 웹브라우저 전체를 기준으로 함으로 그림이 작게 표현될 수 있습니다. 그림을 클릭하시면 조금 더 큰 사이즈로 보실 수 있습니다.
일반적으로 웹사이트는 ①헤더(Header), ②본문(Body), ③푸터(Footer)의 형태로 구현되며, 본문에는 여러 가지 왼쪽 오른쪽 영역으로 나누어 요소들이 표현됩니다.
1. 포건시에서 이를 표현하면 웹브라우저에서는 아래와 같이 표시됩니다.
2. 이런 경우 포건시에서는 기본적으로 '페이지 늘이기 모드'를 제공합니다. 페이지를 한 개 생성 후 오른쪽 패널의 '페이지 설정' 탭으로 가시면 보실 수 있습니다.
페이지 늘이기 모드에서 제공하는 모드는 아래와 같습니다.
① 전역 설정에서 상속
② 없음
③ 수평으로 늘이기
④ 세로로 늘이기
⑤ 양쪽 늘이기
⑥ 화면 비율 유지하고 수평으로 늘이기
이 모든 것을 글자로 하나 하나 설명 드리기는 어렵기에 예제를 만들어 첨부파일에 첨부해 두었습니다. 첨부 파일을 다운로드 받아 열어보시면 아래와 같이 제가 구현해둔 예제가 있으니, 각 페이지를 하나씩 실행 시키시면서 웹브라우저의 크기를 조정해 보십시오.
3. 위 페이지 늘이기 모드 중 "전역 설정에서 상속" 모드라는 말이 있습니다. "전역 설정"이란 「파일 > 옵션 > 응용프로그램 설정 > 페이지 늘이기 모드」에 있는 설정을 말합니다. 이곳(응용 프로그램 설정)은 현재 포건시 파일 전체 영역에 대한 설정을 하실 수 있는 곳입니다. 전역 설정이란 이곳에서 설정한 내용을 의미합니다.
< 셀 영역의 가변 사이즈 설정 >
화면 전체의 비율을 고치기 보다 특정 셀 영역의 비율만 고치고 싶다면 아래의 내용을 참고해 주십시오.
1. 먼저 아래와 같은 화면을 포건시에서 그려 봅니다.
2. 위의 내용을 실행하면 웹브라우저에서는 이렇게 화면 한 가운데 고정된 크기로 표시됩니다.
3. 자, 이제 맨 왼쪽의 노랑색 영역이 있는 A column에 마우스 오른쪽을 클릭하여 컨텍스트 메뉴를 호출하고, 이 중 '열 너비'를 클릭하겠습니다.
4. 열 너비 조정 창에서 '범위 모드'를 선택 후 최대 값을 1, 백분율로 선택 후 확인 버튼을 눌러 저장하십시오.
5. 다음은 맨 오른쪽 열인 BH column도 열 너비를 같은 방식으로 조정해 보겠습니다.
6. 이를 실행하면 아까는 한 가운데 고정폭으로 자리 잡던 컨텐츠들의 왼쪽 오른쪽 열이 아래와 같이 비율로 확장되어 있음을 보실 수 있습니다.
7. 하지만 아직 아래쪽은 그대로 이므로 여기도 고쳐보겠습니다. 푸터 영역 바로 위쪽의 셀의 행 높이를 조정하겠습니다. 동일한 방식으로 조정합니다.
8. 이렇게 세로도 비율에 맞춰 조정하고 나면 웹브라우저의 크기와 상관 없이 전체 컨텐츠들이 꽉찬 화면으로 표시됨을 보실 수 있습니다.
고맙습니다.
GCK제이크드립니다.
댓글목록
등록된 댓글이 없습니다.