다양한 화면 크기에 맞게 컨테이너 형식 지정

소개

이 사용지침서에서는 Oracle JET 도우미 클래스를 사용하여 다양한 화면 크기를 지원하도록 Oracle JET 웹 앱을 커스터마이즈하는 방법을 알아봅니다.

Oracle JET 도우미 클래스를 사용하여 다양한 화면 크기에 대한 조건을 설정할 수 있습니다. 플렉스 레이아웃에서 컨테이너의 항목이 늘어나거나 축소되어 컨테이너 공간을 채웁니다. Oracle JET는 소형, 중형, 대형 화면 크기에 대해 스타일 클래스를 제공합니다. 선택한 화면 크기에 대해 사용할 논리적 열 수를 1에서 12로 지정하여 콘텐츠에 할당된 최소 화면 너비를 설정할 수 있습니다. 조건에 only 키워드를 지정하는 동안 화면 크기를 선택하면 해당 화면 크기에만 조건이 적용됩니다. 화면 크기를 선택하고 더 큰 화면 크기 조건을 생략하면 선택한 화면 크기와 이후의 모든 더 큰 화면 크기에 조건이 적용됩니다. 앱에서 도우미 클래스를 사용하여 텍스트 및 요소의 표시와 정렬을 제어하고, 패널 주위의 패딩을 사용자 정의하고, 다양한 화면 크기에 맞게 열을 설정할 수 있습니다.

화면 크기는 논리적으로 12개 열로 나뉩니다.

그림 screen-sizes.png에 대한 설명

목표

이 자습서에서는 Oracle JET 웹 앱에 도우미 클래스를 추가하여 텍스트 정렬을 지정하고, 패널에 패딩을 추가하고, 다양한 화면 크기에 대한 열을 설정합니다.

필요 조건

JavaScript 런타임, Node.js 및 최신 Oracle JET 명령행 인터페이스가 설치된 Oracle JET 앱을 생성하도록 설정된 개발 환경입니다.
Oracle JET Developer Cookbook에 액세스
JET_Web_Application 폴더를 생성할 수 있도록 이 학습 경로에 이전 자습서 완료

작업 1: 컨텐트 정렬을 위한 도우미 클래스 추가

div 요소에 서로 다른 화면 크기에 대해 도우미 클래스를 지정하여 Oracle JET 웹 앱의 레이아웃에서 콘텐츠 정렬을 수정합니다.

Oracle JET Cookbook을 열고 메뉴 모음에서 프레임워크를 누릅니다. 그런 다음 CSS 유틸리티를 누르고 레이아웃을 누른 다음 사이드바에서 텍스트 종료 데모를 선택합니다.
텍스트 끝용 Oracle JET Cookbook 데모에서 oj-sm-only-text-align-end 스타일 지정 클래스를 구현하여 텍스트 내용을 작은 화면의 끝에 맞추는 방법을 배웁니다. 작은 화면을 데모하려면 [전화 세로] 아이콘을 누르고 S 맞춤 끝에 대한 반응형 동작을 확인합니다.
JET_Web_Application/src/ts/views 디렉토리로 이동하여 편집기에서 dashboard.html 파일을 엽니다.
작업 머리글 앞에 id="activitiesContainer"가 있는 div 요소를 찾은 다음 oj-sm-only-text-align-end Oracle JET 반응형 도우미 스타일 클래스를 추가합니다.
```

<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
  <h3 id="activitiesHeader">Activities</h3>
```
oj-sm-only-text-align-end 스타일 클래스는 화면 크기가 작은 경우에만 컨테이너의 내용을 화면 너비의 끝에 정렬합니다.
dashboard.html 파일을 저장합니다.

코드는 content-Sort-dashboard-html.txt와 유사해야 합니다.

작업 2: 패딩을 위한 도우미 클래스 추가

Oracle JET 응답 간격 스타일 클래스를 사용하여 컨텐트에 패딩을 추가합니다. 상위 div 요소에서 반응형 간격 클래스를 지정하면 해당 상위의 모든 하위 div 요소에 패딩이 적용됩니다.

id="parentContainer2"에서 oj-lg-padding-pad-6x Oracle JET 응답 간격 스타일 클래스를 추가하는 div 요소를 찾습니다.

<!-- The style class is specified in the parent div element -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x">

dashboard.html 파일을 저장합니다. 코드는 padding-dashboard-html.txt와 유사해야 합니다.

작업 3: 다양한 화면 크기에 대한 열 설정

Oracle JET 웹 앱에서 div 요소에 크기 조정 스타일 클래스를 지정합니다. 이러한 Oracle JET 스타일 클래스를 사용하여 지정된 화면 크기에 대해 할당되는 최소 열 너비를 설정할 수 있습니다.

Activity 머리글 앞에 id="activitiesContainer" 요소가 있는 div 요소를 찾아 다양한 화면 크기에 대한 최소 열 수를 지정하는 스타일 클래스를 추가합니다.
```

<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-md-4 oj-sm-12">
  <h3 id="activitiesHeader">Activities</h3>
```
스타일 클래스 oj-sm-12는 div 컨테이너 12 열을 작은 화면에서 넓게 만들고 oj-md-4는 중간 또는 화면 크기 이상에서 div 컨테이너를 4열 너비로 만듭니다.

parentContainer2, activityItemsContainer 및 itemDetailsContainer 값을 가진 id 속성이 있는 항목 세부정보 머리글 주위의 div 요소를 찾습니다. 그런 다음 다음 스타일 클래스를 추가하여 여러 화면 크기에 대한 최소 열 너비를 지정합니다.

<!-- The style class in the div elements specifies the column width for different screen sizes -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  </div>
  <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">

dashboard.html 파일을 저장합니다. 코드는 final-columns-dashboard-html.txt와 유사해야 합니다.

작업 4: 웹 앱 실행

터미널 창에서 JET_Web_Application 디렉토리로 변경하고 앱을 실행합니다.
```
$ ojet serve
```
Oracle JET 툴은 대시보드 콘텐츠를 볼 수 있는 로컬 웹 브라우저에서 웹 앱을 실행합니다. 페이지를 마우스 오른쪽 단추로 누르고 검사를 선택하여 개발자 툴에서 페이지 뷰를 가져옵니다. 그런 다음 차원 드롭다운 메뉴에서 화면 크기가 작은 장치(예: 픽셀 5)를 선택하여 활동 목록 항목의 콘텐츠 정렬 변경사항을 확인합니다.

그림 content-Sort.png에 대한 설명
실행 중인 웹 앱을 표시하는 브라우저 창 또는 탭을 닫습니다.
터미널 창에서 Ctrl+C을 누르고 메시지가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.

추가 학습 자원

docs.oracle.com/learn에서 다른 실습을 찾아보거나 Oracle Learning YouTube channel에서 무료 학습 콘텐츠에 액세스할 수 있습니다. 또한 education.oracle.com/learning-explorer를 방문하여 Oracle Learning Explorer로 변경하십시오.

제품 설명서는 Oracle Help Center를 참조하십시오.

제목 및 저작권 정보

Format the containers for different screen sizes

F53126-01

February 2022