각 문제를 확인하고 답변에 필요한 자료의 해설을 총결하다.
이 시험의 샘플 문제는 2021/11시에 영어만 있다.
총 8문항으로 이 기사의 대상은 1문항-4문항이다.
Front-End Developer Specialization의 샘플 문제에 대한 해설 2/2(#5-#8)
샘플 문제:
https://www.outsystems.com/learn/certifications/
의 Front-end Developer Specialist 항목은 Exam Details에서 다운로드할 수 있는 자료를 링크합니다.Sample Exam이 있는 파일이 해당 파일에 속합니다.

1 Architecture Canvas 및 모드

맞춤형으로 제작된 Pattern(대략widget)을 Archiitecture Canvas에서 말하는 레이어에 구성해야 하는 문제입니다.
Archiitecture Canvas는 OutSystems가 추천한 구조 설계용 도법이며 그 설계 방법을 이용했다.
모듈을 작용에 따라 세 층으로 나눈다.
도면층 및 하위 프로그램

End-User Module 레이어: 재사용 가능한 부품은 포함되지 않습니다.터미널 사용자에게 직접 제공하는 UI 및 프로세스

Core Module 레이어(문제의 선택 항목에서 Core Services): 재활용 가능 부품.비즈니스 사양이 포함된 제품

Foundation Module 레이어: 재활용 가능 부품.비즈니스 사양이 포함되지 않은 제품

OutSystems에서 모드는 일반적인 고가용성 UI 위젯을 의미하며 정답은 옵션 A의 Fundation Module입니다.
또한 OutSystems 아키텍처 디자인을 설명하는 애니메이션 수업 중 하나Typical Module Elements의 1:44 정도인'UI Patterns or Blocks'도 파운드리 모델즈의 전형적인 요소로 꼽힌다.

2 CSS 적용 순서

OutSystems에서는 다음 위치에서 CSS를 설정할 수 있습니다.
CSS 상세도

그리드 컨테이너 애플릿의 시스템 스타일시트

블록 스타일시트

기본 테마를 포함하는 테마 스타일시트(지정된 경우)

화면 또는 메일 스타일시트

격자 설정이 Theme 속성에 정의된 테마 확장 스타일시트

스타일 편집기를 사용할 때 Service Studio 스타일

Attributes 또는 Extended Properties에서 정의한 인라인 스타일

적용 순서는 상술한 숫자가 비교적 낮은 쪽부터 시작한다.따라서 CSS 적용 규칙에 따라 숫자가 클수록 우선합니다.
세부 사항을 무시하고 CSS의 적용 순서를 대략적으로 고려하면 Block & Theeme & Screen & Style Editor (우선순위는 반대) 이다.
문제의 이미지를 보면 같은 클라스는 블록/Theeme/Screen으로 기술되어 있습니다.

background-color: 블록부터 레드->Theeme, 블루->Screen까지 블랙이 적용되므로 후승의 규칙에 따라 블랙

컬러: 블록에서 블루->Themae까지 화이트가 적용되기 때문에 후승의 규칙에 따라 화이트

이에 해당하는 선택 항목 D "Background 컬러 will be Black and the text 색상 will be white"

3 서비스 Studio 미리보기용 class

이 문제에 관해서는 시험이 공개되면 바로 다운로드할 수 있는 Sample Exam의 PDF에 잘못된 대답이 있다는 점에 주의해야 한다.문제를 해결할 때는 새 파일을 다운로드하십시오.
스타일은 일반적으로 브라우저나 서비스 Studio 미리보기 때(UI 편집기에서 열 때) 적용됩니다.
그러나 이 설정은 등록 정보에 "-servicestudio"접두사를 붙일 때 Service Studio 미리 보기 시에만 적용됩니다.
문제의 설정을 보면(선택 항목은border에만 신경을 쓰기 때문에 그 중에서만 발췌)

.align-center {
    border-style: dashed;
    -servicestudio-border-width: 4px;
}

... 때문에

브라우저:border style:dashed;border-width가 지정되지 않았습니다.

border의 너비는 기본값이 있기 때문에 점선

을 표시합니다

Service Studio: border-style: dashed;border-width:4px;

너비 4px의 점선 보이기

각각 캡처(일부)로 확인하세요.
브라우저:

Service Studio:

따라서 브라우저나 Service Studio 미리보기에 border가 표시되므로 항목 A "The Container will have a border when rendered in the Service Studio preview"정답입니다.

4 CSS 로드 순서

블락, 스크린, 테미의 스타일 시트의 로드 순서를 묻는다.
2에서 참조한 대로 Block>Theeme>Screen 순으로 로드합니다.
따라서 마지막으로 옵션 B "The Screen's Style Sheet"을 로드합니다.

기타 Specialization 시험의 샘플 문제

Archiitecture Specialization에 대한 샘플 질문, 노트 1/2(#1-#5)
Archiitecture Specialization에 대한 샘플 질문 노트 2/2
Mobile Developer Specialization의 샘플 문제에 대한 해설 1/2(#1-#4)
Mobile Developer Specialization의 샘플 문제에 대한 해설 2/2(#5-#8)