20210820 - 포트폴리오 메인 페이지 작성 - 폰트 Font, 카드 리전 Card Region

1. 각 리전간 공간 확보를 위해 Static Content Region 삽입

Identification - Title : -----------------

Type : Static Content

Source - Text : <br>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

2. 메인 문구에 대한 폰트 적용

Identification - Title : HeadLine

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Myeongjo'; font-weight: 800; font-size: calc(16px + 2vw); text-align: center; color: #EBE9E5;">데이터에 기반한<br><br><br>나만의 맞춤 웹 시스템 구축</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

Page 속성

CSS - File URLs

https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap;

https://fonts.googleapis.com/css?family=Nanum+Gothic:400';

https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800;

3. 보조 문구에 대한 폰트, 색상 적용

Identification - Title : HeadLine2

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Gothic Coding'; font-weight: 400; font-size: calc(12px + 0.7vw); text-align: center; color: #F5E6CF;">요청내역을 작성하시면 <br><br>최적화된 비용과 시스템 구축 내용을 제안합니다</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

4. 제공 서비스 목록 Card Region

Identification - Title : Type-Service

Type : Cards

Source - Location : Local Database

SQL Query : 

select '고객 맞춤형' card_title

     , 'Best Customized' card_subtitle

     , '요구사항 맞춤 / 반응형 / 모바일 웹' card_body

     , '고객 요구사항에 맞추어 꼭 필요한 기능을 구현' card_secondary_body

     , 'fa fa-calendar-arrow-down' card_icon

     , 'Customized' card_badge

     , 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnv4xxn5wibt/b/bucket-20210801-JKinCloud/o/20210801-005.png' card_image

  from dual

union all

.....

select '클라우드환경' card_title

     , 'Oracle Cloud' card_subtitle

     , '장비 구입 NO! 클라우드로 언제/어디서든 접속' card_body

     , 'sbody' card_secondary_body

     , 'fa fa-cloud-wrench' card_icon

     , 'Oracle Cloud' card_badge

     , 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnv4xxn5wibt/b/bucket-20210801-JKinCloud/o/20210801-002.png' card_image

  from dual

Appearance - Template Options : Use Template Defaults, Style A

Attributes - Appearance - Layout : Grid

Grid Columns : 4 Columns

Title - Advanced Formatting : Enabled

HTML Expression : <span style="font-family: 'Nanum Gothic Coding'; font-weight: 700; font-size: 20px; monospace;">&CARD_TITLE.</span>

Secondary Body - Advanced Formatting : Enabled

HTML Expression : <span style="font-family: 'Nanum Gothic'; monospace;">&CARD_BODY.</span>

Icon and Badge - Icon Source : Icon Class Column

Icon Column : CARD_ICON

Icon Position : Start

Badge Column : CARD_BADGE

Media - Source : URL Column

URL Column : CARD_IMAGE

Position : Body

Appearance : Auto

Sizing : Fit

Performance - Lazy Loading : Enabled

5. 추가 문구에 대한 폰트, 색상 적용

Identification - Title : FooterLine

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Myeongjo'; font-weight: 800; font-size: calc(14px + 1.5vw); text-align: center; color: #EBE9E5;">신청서, 5분이면 작성 끝</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

Identification - Title : FooterLine2

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Gothic Coding'; font-weight: 400; font-size: calc(12px + 0.7vw); text-align: center; color: #F5E6CF;">IT 용어 사용하실 필요 없이<br><br>간결하게 필요 요청내역만 작성 해 주시면 됩니다</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

6. 신청서 작성, 예상비용 산정 Card Region

Identification - Title : Type-Request

Type : Cards

Source - Location : Local Database

SQL Query : 

select '신청서 작성하기' card_title

     , 'Best Customized' card_subtitle

     , '요구사항에 대한 신청서를 작성하세요' card_body

     , '고객 요구사항에 맞추어 꼭 필요한 기능을 구현' card_secondary_body

     , 'fa fa-clipboard-new' card_icon

     , '1' card_badge

     , 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/../o/20210801-005.png' card_image

  from dual

union all

select '예상비용 산정' card_title

     , 'Data-Driven' card_subtitle

     , '예상 화면 개수와 난이도 입력한 후 바로 확인 가능합니다' card_body

     , '자신만의 데이터를 관리하며' card_secondary_body

     , 'fa fa-dollar' card_icon

     , '2' card_badge

     , 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/../o/20210801-004.png' card_image

  from dual

Appearance - Template Options : Use Template Defaults, Style A

Attributes - Appearance - Layout : Grid

Grid Columns : 2 Columns

Card - CSS Classes : u-color-28-bg

Title - Advanced Formatting : Enabled

HTML Expression : <span style="font-family: 'Nanum Gothic Coding'; font-weight: 700; font-size: 20px; monospace;">&CARD_TITLE.</span>

Secondary Body - Advanced Formatting : Enabled

HTML Expression : <span style="font-family: 'Nanum Gothic'; monospace;">&CARD_BODY.</span>

Icon and Badge - Icon Source : Icon Class Column

Icon Column : CARD_ICON

Icon Position : End

Performance - Lazy Loading : Enabled

Action 버튼 추가

Identification - Type : Button

Label : GO

Link - Type : Redirect to URL

Target : javascript: setItems('&CARD_BADGE.');

Appearance - Display Type : Text

Hot : Enabled

Item 추가

Identification - Name : P1_TYPE

Type : Hidden

Setting - Value Protected : Disabled

Layout - Region : Type-Request

Advanced - Warn on Unsaved Changes : Ignore

Source - Maintain Session State : Per Request (Memory Only)

Dynamic Action - P1_TYPE

When - Event : Change

Selection Type : Item

Item : P1_TYPE

Action : Submit Page

Page 속성

Javascript - Function and Global Variable Declaration

function setItems(pType)

{

    apex.item("P1_TYPE").setValue(pType);

}

Process

After

Submit - Branches - RedirectProcess

Identification - Name : RedirectProcess

Execution Options - Point : After Submit

Behavior - Type : Function Returning a URL (Redirect)

Language - PL/SQL - PL/SQL Function Body

begin

 case 

   when :P1_TYPE = '1' then return apex_page.get_url(p_page => 1);

   when :P1_TYPE = '2' then return apex_page.get_url(p_page => 1);

 end case;

end;

참고

https://web-js.co.kr/font_kr.html

https://fonts.google.com/?subset=korean