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

소개

이 자습서에서는 Oracle JET(Oracle JavaScript Extension Toolkit) 가상 DOM 앱을 커스터마이즈하여 Oracle JET 도우미 클래스를 사용하여 다양한 화면 크기를 지원하는 방법을 배웁니다.

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

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

그림 screen_sizes.png에 대한 설명

목표

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

필요 조건

Node.js 설치가 포함된 Oracle JET 가상 DOM 앱을 생성하도록 설정된 개발 환경입니다.
Google Chrome 웹 브라우저가 설치되고 기본 웹 브라우저로 설정됨
Oracle JET Developer Cookbook에 대한 액세스
이 학습 경로에서 이전 자습서 완료, Oracle JET Virtual DOM 앱에 컨테이너 추가

작업 1: 컨텐츠 정렬에 대한 도우미 클래스 추가

작은 화면 크기를 사용할 때 콘텐츠 정렬을 조정하도록 div 요소에 Oracle JET 도우미 클래스를 지정하여 Activity Container 구성 요소에서 콘텐츠 위치 지정을 수정합니다.

Oracle JET Cookbook을 열고 메뉴 모음에서 프레임워크를 누릅니다. 그런 다음 CSS 유틸리티를 누르고 레이아웃을 누른 다음 사이드바에서 텍스트 끝 데모를 선택합니다.
Text End용 Oracle JET Cookbook 데모에서 oj-sm-only-text-align-end 스타일링 클래스를 구현하여 작은 화면의 끝에 텍스트 콘텐츠를 정렬하는 방법을 배웁니다. 작은 화면의 데모를 보려면 [전화 세로] 아이콘을 누르고 정렬 종료에 대한 반응형 동작을 봅니다.
JET-Virtual-DOM-app/src/components/Activity 디렉토리로 이동하여 편집기에서 ActivityContainer.tsx 파일을 엽니다.
ActivityContainer 함수 정의에서 div(여기서 id="activitiesContainer")을 찾고 oj-sm-only-text-align-end 응답형 도우미 스타일 클래스를 추가합니다.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
```
파일을 저장하고 닫습니다.

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

Oracle JET 반응형 간격 스타일 클래스를 사용하여 상위 컨테이너 2 구성요소 및 하위 구성요소인 활동 항목 컨테이너 및 항목 세부정보 컨테이너에 패딩을 추가합니다. 상위 div 요소의 반응형 간격 클래스를 지정하면 패딩 스타일이 해당 상위의 모든 하위 div 요소에 적용됩니다.

Oracle JET Cookbook을 열고 메뉴 모음에서 프레임워크를 누릅니다. 그런 다음 CSS 유틸리티를 누르고 Margins & Padding을 누른 다음 사이드바에서 Responsive Spacing 데모를 선택합니다.
반응형 간격에 대한 Oracle JET Cookbook 데모에서 응답형 간격 클래스를 구현하여 다양한 화면 크기에서 컨테이너에 패딩을 추가하는 방법을 알아봅니다.
JET-Virtual-DOM-app/src/components 디렉토리로 이동하여 편집기에서 ParentContainer2.tsx 파일을 엽니다.
ParentContainer2 함수 정의에서 div(여기서 id="parentContainer2")을 찾고 oj-lg-padding-6x-horizontal 응답 간격 클래스를 추가합니다.
```
<div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal">
```
JET-Virtual-DOM-app/src/components/Activity 디렉토리로 이동하여 편집기에서 ActivityContainer.tsx 파일을 엽니다.
ActivityContainer 함수 정의에서 div(여기서 id="activitiesContainer")을 찾고 oj-sm-padding-4x-start 응답 간격 클래스를 추가합니다.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start">
```
JET-Virtual-DOM-app/src/components/ActivityItem 디렉토리로 이동하여 편집기에서 ActivityItemContainer.tsx 파일을 엽니다.
ActivityItemContainer 함수 정의에서 div(여기서 id="activityItemsContainer")을 찾고 oj-sm-padding-4x-start 응답 간격 스타일 클래스를 추가합니다.
```
<div  id="activityItemsContainer"
      class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start">
```
JET-Virtual-DOM-app/src/components/ItemDetail 디렉토리로 이동하여 편집기에서 ItemDetailContainer.tsx 파일을 엽니다.
ItemDetailContainer 함수 정의에서 div(여기서 id="itemDetailsContainer")을 찾고 oj-sm-padding-4x-start 응답 간격 스타일 클래스를 추가합니다.
```
<div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start">
```
열려 있는 파일을 저장하고 닫습니다.

작업 3: 서로 다른 화면 크기에 대한 열 설정

구성요소의 컨테이너 div 요소에 Oracle JET 격자 레이아웃 스타일 클래스를 지정합니다. 이러한 스타일 클래스를 사용하여 지정된 화면 크기의 컨테이너에 할당된 최소 열 너비를 설정할 수 있습니다.

Oracle JET Cookbook을 열고 메뉴 모음에서 레이아웃 및 탐색을 누릅니다. 그런 다음 Grid를 누르고 사이드바에서 Basic 데모를 선택합니다.
반응형 grid 레이아웃 클래스의 Oracle JET Cookbook 데모에서는 12열 그리드 개념과 이러한 스타일 클래스를 구현하여 다양한 화면 크기에 대한 반응형 동작을 가상 DOM 앱에 추가하는 방법에 대해 알아봅니다.
JET-Virtual-DOM-app/src/components/Activity 디렉토리로 이동하여 편집기에서 ActivityContainer.tsx 파일을 엽니다.
ActivityContainer 함수 정의에서 div를 찾습니다. 여기서 id="activitiesContainer"를 찾고 다른 화면 크기에 대한 최소 열 수를 지정하는 oj-md-4 및 oj-sm-12 크기 조정 스타일 클래스를 추가합니다.
```
<div id="activitiesContainer"
     class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-sm-padding-4x-start oj-md-4 oj-sm-12">
```
oj-sm-12 클래스는 작은 화면에서 div 컨테이너 12 열을 너비로 만들고, oj-md-4는 중간 또는 더 큰 화면 크기에서 div 컨테이너를 네 개의 열 너비로 만듭니다.

파일을 저장합니다. 코드는 activity-container-tsx.txt와 유사해야 합니다.
JET-Virtual-DOM-app/src/components/ActivityItem 디렉토리로 이동하여 편집기에서 ActivityItemContainer.tsx를 엽니다. div(여기서 id="activityItemsContainer")에서 oj-md-6 및 oj-sm-12 스타일 클래스를 추가합니다.
```
<div id="activityItemsContainer"
     class="oj-flex-item oj-bg-success-20 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
```
파일을 저장합니다. 코드는 activity-item-container-tsx.txt와 유사해야 합니다.
JET-Virtual-DOM-app/src/components/ItemDetail 디렉토리로 이동하여 편집기에서 ItemDetailContainer.tsx를 엽니다. div(여기서 id="itemDetailsContainer")에서 oj-md-6 및 oj-sm-12 스타일 클래스를 추가합니다.
```
<div id="itemDetailsContainer"
     class="oj-flex-item oj-bg-neutral-30 oj-sm-padding-4x-start oj-md-6 oj-sm-12">
```
파일을 저장합니다. 코드는 item-detail-container-tsx.txt와 유사해야 합니다.
JET-Virtual-DOM-app/src/components 디렉토리의 편집기에서 ParentContainer2.tsx를 엽니다. div(여기서 id="parentContainer2")에서 oj-md-8 및 oj-sm-12 스타일 클래스를 추가합니다.
```
<div id="parentContainer2"
     class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x-horizontal oj-md-8 oj-sm-12">
```
파일을 저장합니다. 코드는 parent-container2-tsx.txt와 유사해야 합니다.

작업 4: 가상 DOM 앱 실행

터미널 window에서 JET-Virtual-DOM-app 디렉토리로 변경하고 가상 DOM 앱을 실행합니다.
```
npx @oracle/ojet-cli serve
```
Oracle JET 툴링은 로컬 웹 브라우저에서 가상 DOM 앱을 실행합니다.
페이지를 마우스 오른쪽 단추로 누르고 검사를 선택하여 개발자 도구에서 페이지 뷰를 표시합니다.
Chrome DevTools 도구 모음에서 을 눌러 장치 모드로 전환합니다.

그림 device_mode_lens.png에 대한 설명
그런 다음 픽셀 5와 같이 작은 화면 크기를 가진 장치를 차원 드롭다운 메뉴에서 선택하여 작업 컨테이너 구성 요소에서 작업 목록 및 머리글의 콘텐츠 정렬 변경사항을 확인합니다.

그림 content_alignment.png에 대한 설명
실행 중인 가상 DOM 앱을 표시하는 브라우저 창이나 탭을 닫습니다.
터미널 창에서 Ctrl+C을 누르고 프롬프트가 표시되면 y을 입력하여 Oracle JET 툴링 일괄 처리 작업을 종료합니다.

다음 단계

이 학습 경로의 다음 자습서로 이동하려면 여기를 클릭하십시오.

추가 학습 자원

docs.oracle.com/learn에서 다른 실습을 살펴보거나 Oracle Learning YouTube 채널에서 보다 무료 학습 컨텐츠에 접근할 수 있습니다. 또한 education.oracle.com/learning-explorer을 방문하여 Oracle Learning Explorer가 됩니다.

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

제목 및 저작권 정보

Format the component containers for different screen sizes

F72922-01

December 2022