# Oracle Redwood 디자인 시스템 ## Oracle Redwood 디자인 시스템 인터페이스 미리보기 유효한 초안을 유지하면서 수량을 수정하고, 유효성 검사를 살펴보며, 정렬 및 필터링하세요. ## Oracle Redwood 디자인 시스템 디자인 참고 자료 고정된 JET 19.0.0 Redwood 스타일시트의 공개 기본 선언을 사용합니다. 독자적으로 구현한 워크시트 동작과 레이아웃은 별도로 표시했습니다. 비공개 변수와 이후의 반전 재정의는 기본 참고 자료에서 제외했습니다. ### Redwood 기본 의미 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --oj-core-text-color-primary | rgb(var(--oj-palette-neutral-rgb-190)) | JET 19 Redwood의 첫 번째/기본 선언입니다. 반전 및 밀도 선택자가 값을 재정의할 수 있으므로 모든 선언을 최종값 조회 하나로 통합하지 마세요. | | --oj-core-text-color-secondary | rgba(var(--oj-palette-neutral-rgb-190), .70) | JET 19 Redwood의 첫 번째/기본 선언입니다. 반전 및 밀도 선택자가 값을 재정의할 수 있으므로 모든 선언을 최종값 조회 하나로 통합하지 마세요. | | --oj-core-text-color-disabled | rgba(var(--oj-palette-neutral-rgb-190), .4) | JET 19 Redwood의 첫 번째/기본 선언입니다. 반전 및 밀도 선택자가 값을 재정의할 수 있으므로 모든 선언을 최종값 조회 하나로 통합하지 마세요. | | --oj-core-bg-color-content | rgb(var(--oj-palette-neutral-rgb-0)) | JET 19 Redwood의 첫 번째/기본 선언입니다. 반전 및 밀도 선택자가 값을 재정의할 수 있으므로 모든 선언을 최종값 조회 하나로 통합하지 마세요. | | --oj-body-bg-color | rgb(var(--oj-palette-neutral-rgb-10)) | JET 19 Redwood의 첫 번째/기본 선언입니다. 반전 및 밀도 선택자가 값을 재정의할 수 있으므로 모든 선언을 최종값 조회 하나로 통합하지 마세요. | | --oj-core-divider-color | rgba(var(--oj-palette-neutral-rgb-190),.12) | JET 19 Redwood의 첫 번째/기본 선언입니다. 반전 및 밀도 선택자가 값을 재정의할 수 있으므로 모든 선언을 최종값 조회 하나로 통합하지 마세요. | | --oj-core-focus-border-color | rgb(var(--oj-palette-neutral-rgb-190)) | JET 19 Redwood의 첫 번째/기본 선언입니다. 반전 및 밀도 선택자가 값을 재정의할 수 있으므로 모든 선언을 최종값 조회 하나로 통합하지 마세요. | ### 워크시트에서 사용하는 팔레트 값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --oj-palette-neutral-rgb-0 | 255, 255, 255 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | | --oj-palette-neutral-rgb-10 | 251, 249, 248 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | | --oj-palette-neutral-rgb-20 | 245, 244, 242 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | | --oj-palette-neutral-rgb-190 | 22, 21, 19 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | | --oj-palette-brand-rgb-120 | 0, 104, 140 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | | --oj-palette-info-rgb-20 | 237, 246, 249 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | | --oj-palette-danger-rgb-120 | 179, 49, 31 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | | --oj-palette-success-rgb-20 | 235, 248, 222 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | | --oj-palette-success-rgb-140 | 53, 86, 23 | 원시 RGB 채널 값은 rgb() 또는 rgba() 안에서 사용됩니다. 이 값만으로는 완전한 CSS 색상 값이 아닙니다. | ### 간격 및 형태 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --oj-core-spacing-1x | .25rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-2x | .5rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-3x | .75rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-4x | 1rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-5x | 1.25rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-6x | 1.5rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-7x | 1.75rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-8x | 2rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-9x | 2.25rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-10x | 2.5rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-11x | 2.75rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-spacing-12x | 3rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-border-radius-sm | 2px | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-border-radius-md | .25rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-border-radius-lg | .375rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | | --oj-core-border-radius-xl | .5rem | 공개된 기초 척도입니다. 워크시트는 네이티브 HTML 컨트롤에서 일부 값을 사용하지만, JET 컴포넌트의 동작을 구현한다고 주장하지 않습니다. | ### 본문 타이포그래피 및 컨트롤 크기 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --oj-typography-body-xs-font-size | 0.75rem | 테마의 기본 선언입니다. 원본 예제는 대체 글꼴로 Arial을 사용하며, 표와 콘텐츠 레이아웃은 애플리케이션 코드로 구현되어 있습니다. | | --oj-typography-body-sm-font-size | 0.859rem | 테마의 기본 선언입니다. 원본 예제는 대체 글꼴로 Arial을 사용하며, 표와 콘텐츠 레이아웃은 애플리케이션 코드로 구현되어 있습니다. | | --oj-typography-body-md-font-size | 1rem | 테마의 기본 선언입니다. 원본 예제는 대체 글꼴로 Arial을 사용하며, 표와 콘텐츠 레이아웃은 애플리케이션 코드로 구현되어 있습니다. | | --oj-typography-body-lg-font-size | 1.125rem | 테마의 기본 선언입니다. 원본 예제는 대체 글꼴로 Arial을 사용하며, 표와 콘텐츠 레이아웃은 애플리케이션 코드로 구현되어 있습니다. | | --oj-typography-body-xl-font-size | 1.25rem | 테마의 기본 선언입니다. 원본 예제는 대체 글꼴로 Arial을 사용하며, 표와 콘텐츠 레이아웃은 애플리케이션 코드로 구현되어 있습니다. | | --oj-typography-body-md-line-height | 1.25 | 테마의 기본 선언입니다. 원본 예제는 대체 글꼴로 Arial을 사용하며, 표와 콘텐츠 레이아웃은 애플리케이션 코드로 구현되어 있습니다. | | --oj-button-height | 2.75rem | 테마의 기본 선언입니다. 원본 예제는 대체 글꼴로 Arial을 사용하며, 표와 콘텐츠 레이아웃은 애플리케이션 코드로 구현되어 있습니다. | | --oj-button-border-radius | var(--oj-core-border-radius-md) | 테마의 기본 선언입니다. 원본 예제는 대체 글꼴로 Arial을 사용하며, 표와 콘텐츠 레이아웃은 애플리케이션 코드로 구현되어 있습니다. | ### 공개 스타일 적용 범위 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | Global theme overrides | :root declarations after JET CSS | 루트 재정의는 해당 공개 변수를 사용하는 모든 곳에 영향을 줍니다. | | Instance styling | A class scoped to the target component | 네이티브 컴포넌트 하나만 변경해야 할 때는 공개 변수를 범위 지정하세요. | | Redwood base | Tracks Oracle visual changes | Oracle의 디자인을 그대로 구현하는 것이 목표라면 이 방법을 선택하세요. 업그레이드 시 상속된 값이 달라질 수 있습니다. | | Stable base | Alternative for a distinct custom theme | Redwood와 동일하다고 설명하거나, 모든 반전 및 크기 조정 기능이 일치한다고 가정하지 마세요. | | Private variables | --oj-private-* excluded | 이 샘플은 비공개 구현 훅을 기반으로 공개 참고 자료를 만들지 않습니다. | ## Oracle Redwood 디자인 시스템 완전 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Oracle Redwood 디자인 시스템과 JET 버전 경계 ### 구현 계층을 정확하게 명시하세요 > Redwood는 다운로드 가능한 단일 컴포넌트 라이브러리보다 범위가 넓습니다. 이 가이드는 구체적으로 살펴볼 수 있는 참고 자료로 Oracle JET 19.0.0에 포함된 공개 CSS 기반 요소를 사용합니다. 미리보기는 해당 값을 사용하는 독자적인 HTML/CSS 재고 검토 워크시트이며, oj-table, oj-input-number 또는 다른 네이티브 JET 사용자 지정 요소를 인스턴스화하지 않습니다. 런타임에 관한 내용을 명확히 밝혀 독자가 시각적 기반 요소를 완전한 Oracle 애플리케이션 SDK로 오해하지 않도록 합니다. - 참고 자료: Oracle JET 19 Redwood CSS. - 미리보기 런타임: 브라우저 네이티브 HTML/CSS/JavaScript 독자 구현. - 데이터 및 유효성 검사 규칙: 독자적인 로컬 샘플. ### Oracle 애플리케이션 도입과 구분하세요 Oracle SaaS 제품에 Redwood를 도입하는 일, JET 애플리케이션을 구성하는 일, 공개 테마를 참고하는 일은 서로 다릅니다. 이 예제는 테넌트를 변경하거나 재고 기록에 연결하거나 제품 마이그레이션을 수행하지 않습니다. 전체 로컬 문서를 통해 시각적 규칙과 상태 모델을 살펴볼 수 있으며, 실제 JET 애플리케이션은 버전이 지정된 프레임워크 설정과 네이티브 컴포넌트 문서를 따라야 합니다. ## Oracle Redwood 디자인 시스템의 의미 역할 및 팔레트 값 ### 기본 선언을 올바르게 파악하세요 이 참고 자료는 고정된 스타일시트에서 각 공개 변수의 첫 번째 기본 선언을 가져옵니다. 이후 반전 또는 밀도 범위에서 같은 이름이 재정의될 수 있습니다. 따라서 일치하는 선언 중 마지막 항목을 단순히 추출하면 반전된 전경색을 기본 밝은 텍스트 색상으로 잘못 표기하게 됩니다. 이 가이드는 기본 범위를 명확히 구분하고 --oj-private-* 훅은 공개 참고 자료에서 제외합니다. ### 원시 채널과 색상 값을 구분하세요 --oj-palette-brand-rgb-120과 같은 팔레트 변수에는 RGB 채널 세 개가 들어 있고, 의미 역할은 이를 rgb() 또는 rgba()로 감쌉니다. 원본 예제의 동작 요소는 rgb()를 통해 브랜드 채널을 사용하고, 텍스트에는 core-text-color-primary를, 카드 배경에는 core-bg-color-content를 사용합니다. 원시 채널 문자열을 background-color에 그대로 복사하면 숫자가 그럴듯해 보여도 유효한 CSS 값이 아닙니다. ## Oracle Redwood 디자인 시스템의 간격, 타이포그래피 및 밀도 ### 구체적인 기반 척도를 사용하세요 공개 core-spacing 순서는 1x부터 12x까지 4px 단위로 구성됩니다. 작음, 중간, 큼, 매우 큼 테두리 역할은 각각 구분되며 버튼 높이는 별도의 컴포넌트 변수입니다. 워크시트는 적절한 부분에 실제 값을 사용하고, 32px 제목과 반응형 표 변환, 1120px 외부 너비는 독자적인 구성 결정임을 명시합니다. ### 밀도별 값을 혼합하지 마세요 이 고정 스타일시트에서 기본 body-md 크기는 1rem이고 행간은 1.25입니다. 이후 선택자에 따라 배율이 적용된 픽셀 값이 표시될 수 있습니다. 이 가이드에서는 기본값을 기록하며, 모든 Redwood 환경에서 하나의 계산된 크기를 사용해야 한다고 단정하지 않습니다. 브라우저 예제에서는 Oracle Sans가 로드된다고 주장하는 대신 Arial을 대체 글꼴로 사용합니다. 기본 JET 애플리케이션에서는 선택한 밀도, 테마, 플랫폼을 함께 테스트해야 합니다. ## Oracle Redwood 디자인 시스템 Oracle Redwood에서 영감을 받은 작업표 구조 ### 데이터와 작업을 이해하기 쉽게 구성하세요 각 원본 행에는 스튜디오 용품의 이름과 단위 설명이 있으며, 현재 재고를 최소 재고와 비교하고 수량 입력란을 제공합니다. 검토 상태 레이블은 해당 항목이 로컬 초안에 포함되는지 다시 표시합니다. 요약에는 필터로 숨겨진 행을 포함해 초안 전체의 수량이 집계됩니다. 이는 가상 샘플 데이터이며 재고 현황의 증거도, 구매 권장 사항도 아닙니다. ### 정렬 후에도 행 식별 정보를 유지하세요 애플리케이션은 수량을 표의 위치가 아닌 항목 ID에 저장합니다. 따라서 이름순으로 정렬하거나 원래 순서로 돌아가도 수정 내용이 유지됩니다. ‘최소 재고 미만’으로 필터링하면 화면에 표시되는 항목만 변경됩니다. 렌더링된 행 순서에 따라 위치가 정해지는 배열을 사용하면 정렬 후 한 항목의 수량이 다른 항목에 잘못 연결될 수 있습니다. 제공된 코드에서는 이러한 문제를 명시적으로 방지합니다. ## Oracle Redwood 디자인 시스템 Oracle Redwood에서 영감을 받은 수량 유효성 검사 ### 지정된 로컬 규칙에 맞지 않는 값을 거부하세요 원래 수량 입력란에서는 0부터 99까지의 정수를 입력할 수 있습니다. 값을 비워 두거나 음수, 소수 또는 범위를 벗어난 값을 입력하면 인라인 오류가 표시되고 검토 작업이 비활성화됩니다. 초안 모델에는 유효하지 않은 값 대신 마지막으로 입력한 유효한 수량이 유지됩니다. 화면에 오류를 표시해 이 차이를 명확히 하고, 유효하지 않은 값은 검토 합계에 포함하지 않습니다. ### 유효하지 않은 입력이 언제 취소되는지 설명하세요 필터나 정렬을 변경하면 마지막으로 입력한 유효한 초안 값을 바탕으로 표시할 행을 다시 구성하므로, 완료되지 않은 유효하지 않은 입력은 취소됩니다. 이는 로컬 예제에서 의도적으로 정한 범위일 뿐, 기본 JET의 유효성 검사 동작을 보장하는 것은 아닙니다. 실제 운영 환경의 편집 가능한 표에서는 모든 보기에서 유효하지 않은 초안을 유지하거나 화면 이동을 차단할 수도 있습니다. 이러한 동작은 자체 상태 모델에서 설계하고 테스트해야 합니다. ## Oracle Redwood 디자인 시스템 Oracle Redwood에서 영감을 받은 검토 및 초기화 ### 전송하는 것처럼 가장하지 말고 로컬 검토임을 알리세요 이 초안 검토를 선택하면 수량과 해당 항목 수를 쉽게 읽을 수 있는 형식으로 표시합니다. 주문이 전송되지 않았다는 점도 명시합니다. 이 예제에서는 의무 구매 규칙을 임의로 만들지 않으므로, 수량 합계가 0인 유효한 초안도 검토할 수 있습니다. 수량을 수정하면 이전 검토 메시지가 지워져 변경된 초안에 오래된 확인 메시지가 남지 않습니다. ### 예측 가능한 복구 동작을 제공하세요 수량 초기화를 선택하면 처음 제안된 추가 수량으로 돌아가고 검토 메시지가 지워집니다. 현재 필터와 정렬은 유지한 채 초기화된 모델을 바탕으로 행을 다시 표시합니다. 따라서 페이지를 새로고침하지 않아도 복구된 상태를 확인할 수 있습니다. 이 샘플에는 저장소나 백엔드가 없으므로 페이지를 새로고침하면 초기 로컬 데이터로 돌아갑니다. ## Oracle Redwood 디자인 시스템 Oracle Redwood에서 영감을 받은 반응형 표 ### 좁은 화면에서도 정보 계층 구조를 유지하세요 넓은 화면에서는 열 머리글과 행 머리글 역할을 하는 항목 이름이 있는 표로 표시됩니다. 화면 너비가 650px 미만이면 행이 읽기 쉬운 블록으로 바뀌고, 각 데이터 셀의 값 앞에 레이블이 표시됩니다. 입력 요소는 사용 가능한 너비 안에 유지되며, 항목 설명은 항목 이름과 함께 표시됩니다. 이 전환은 애플리케이션에서 독자적으로 구현한 CSS이며 oj-table의 반응형 동작을 설명하는 것이 아닙니다. ### 수정 및 필터링 상태를 테스트하세요 브라우저 테스트에서는 잘못된 수량을 입력한 뒤 수정하고, 항목을 정렬하고, 최소 재고 미만인 행을 필터링한 다음 결과 합계를 검토하고 레이아웃을 측정합니다. 1440px부터 280px까지 네 가지 너비를 확인했습니다. 빈 표 컨테이너가 있는지만 확인하는 것이 아니라 실제 콘텐츠와 상태 변경을 테스트합니다. ## Oracle Redwood 디자인 시스템 전체 참조 구현 ### 제공된 전체 문서를 실행하세요 HTML 예제에는 필요한 공개 토큰 선언, 독자적인 스타일, 샘플 레코드, 모든 이벤트 핸들러가 포함되어 있습니다. index.html로 저장하고 해당 디렉터리를 제공하면 됩니다. 누락된 가져오기나 외부 런타임 호출은 없습니다. 로컬 구현을 실행하는 데 JET JavaScript 패키지가 필요하지는 않지만, 참조 값은 JET 19.0.0에 고정되어 있습니다. 1. 제공된 전체 문서를 index.html로 저장하세요. 2. 로컬 HTTP 서버로 해당 폴더를 제공하세요. 3. 잘못된 수량을 입력하고 수정해 보세요. 4. 같은 초안에서 정렬과 필터링을 적용한 다음 검토하고 초기화하세요. ### 기본 JET 구성 요소는 자체 설정 절차에 따라 사용하세요 기본 애플리케이션을 만들려면 알맞은 Oracle JET 패키지를 설치하고 해당 프레임워크 설정 절차를 따르세요. 그런 다음 버전이 명시된 oj-* 구성 요소 계약과 공개 스타일링 변수를 사용하세요. 이 독립형 구현에 oj-* 태그를 붙여 넣기만 하면 초기화될 것이라고 가정하지 마세요. 연결된 스타일링 개요에서는 루트 수준 테마 설정과 구성 요소 범위 재정의의 차이를 설명하고, Redwood와 Stable 중 어떤 것을 기반으로 선택하면 적절한지도 안내합니다. ## Oracle Redwood 디자인 시스템 구성 요소 예제 ### index.html — 독자적인 전체 작업표 공개 토큰 하위 집합 전체, 반응형 HTML, 유효성 검사, 안정적인 행 상태, 로컬 검토 및 초기화 동작을 포함합니다. ``` Studio supplies worksheet

REDWOOD FOUNDATIONS / ORIGINAL WORKSHEET

Prepare the studio supplies

An original stock-review worksheet using public Oracle JET 19 Redwood variables. This is plain HTML/CSS and JavaScript, not a native JET component runtime or an Oracle inventory service. Arial is an explicit font fallback.

0units in the local draft
ItemOn hand / minimumAdd to draftReview state

Change a quantity to build a local replenishment draft. A draft may contain zero units. Nothing is ordered, approved or sent from this example.

``` 코드 참조 - 의도적으로 oj-table이나 oj-input-number를 사용하지 않았습니다. - Oracle 애플리케이션, 재고 서비스 또는 주문 엔드포인트에 연결되어 있지 않습니다. ## Oracle Redwood 디자인 시스템 에이전트 설정 ### 구현 시작점 독자적인 독립형 구현을 실행합니다. 기본 JET 적용은 연결된 공식 문서에서 안내하는 별도의 프레임워크 설정 절차가 필요합니다. ``` # Save the complete supplied document as index.html. python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### 프로젝트를 위한 프롬프트 ``` 검증된 JET 19 공개 기본 변수를 사용해 제공된 Redwood 기반 재고 검토 작업표를 독자적으로 구현하세요. RGB 채널 구문, 항목 ID를 기준으로 저장되는 유효 수량 상태, 유효성 검사 범위, 정렬 및 필터링 후 상태 유지, 로컬 전용 검토 및 초기화 동작을 유지하세요. 이 브라우저 구현을 기본 JET 또는 Oracle 서비스라고 설명하지 마세요. ``` ## Oracle Redwood 디자인 시스템 출처 및 범위 공개 Oracle JET 19 Redwood 변수를 사용한 OpenDesign 해석입니다. 미리보기는 일반 HTML/CSS/JavaScript이며, 네이티브 JET 구성요소나 Oracle 재고 관리 서비스가 아닙니다. Arial 대체 글꼴을 명시적으로 사용합니다. - JET 스타일링 개요 공개 변수 범위, Redwood와 Stable의 차이, 테마 경계. - Redwood CSS 고정 레퍼런스와 예제에서 실제로 사용한 기본값. - Oracle JET 문서 네이티브 프레임워크 설정 및 개발 관련 정보. - Redwood 도입 Oracle 애플리케이션 도입을 위한 별도 참고 정보. ## Oracle Redwood 디자인 시스템 관련 리소스 ### Orange OUDS Web 완성도 높은 반응형 비교 연구를 통해 Orange OUDS 1.4의 실제 시맨틱 토큰, 테마 패키지, 기본 Offcanvas 동작을 살펴보세요. ### Palantir Blueprint Blueprint로 밀도 높은 데이터 작업 공간을 구축하세요. 검증된 타이포그래피 및 의도 토큰, 선택 가능한 데이터 세트 테이블, 검토 인스펙터와 전체 React 소스가 포함됩니다. ### Pega Bolt Bolt의 Pega 브랜드 콘텐츠 시스템을 살펴보세요. 유동적인 타이포그래피, 가로·세로 간격의 분리, 편집형 리소스 페이지를 위한 Twig 아코디언 구성을 확인할 수 있습니다. - [구현 레퍼런스](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html) - [출처](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css) - [출처](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html) - [코드 참조](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css) - [JET 스타일링 개요 공개 변수 범위, Redwood와 Stable의 차이, 테마 경계.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html) - [Redwood CSS 고정 레퍼런스와 예제에서 실제로 사용한 기본값.](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css) - [Oracle JET 문서 네이티브 프레임워크 설정 및 개발 관련 정보.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/index.html) - [Redwood 도입 Oracle 애플리케이션 도입을 위한 별도 참고 정보.](https://docs.oracle.com/en/cloud/saas/readiness/redwood-adoption/)