실제 화면에서 CSS 그라데이션을 만들고 확인하기.
방향, 색 지점, 사용할 표면을 지정하세요. 텍스트가 겹치는 모든 위치의 대비를 확인하고 필요하면 단색 대체 배경을 제공하세요.
작업에 맞게 절차를 조정하세요.
표면, 방향, 색상 지점, 대체 배경을 정하고 CSS 선언을 만듭니다. 겹쳐진 내용 뒤의 전체 그라데이션과 반응형 잘림을 시험합니다. 배경의 아름다움과 텍스트 대비를 별도로 검토합니다.
- 제공할 내용
- 색상, 방향 및 시각 요구.
- 받을 결과
- 매개변수를 바꿀 수 있는 유효한 CSS 그라데이션.
입력과 결과를 확인하세요.
설명용 입력과 출력 · 실제 WebAct 실행이 아닌 학습용 예시
입력 항목 예시개
Create a left-to-right background from #fff7ed to #fed7aa, with a solid fallback.
완성된 예시
background-color: #fff7ed; background-image: linear-gradient(90deg, #fff7ed 0%, #fed7aa 100%); Check any foreground text against the full gradient, not just one endpoint.
이 입력을 프롬프트에 넣고 WebAct에 복사해 작업을 실행해 보세요. 결과는 설명용 예시와 다를 수 있습니다.
판단 기준과 문제 해결.
겹친 글의 대비를 그라데이션 한쪽 끝에서만 확인해도 되나요?
아니요. 글이 대비가 더 낮은 부분을 지날 수 있습니다. 실제 위치와 상태를 시험하세요.
그라데이션 방향이 의도한 배치와 다른 이유는 무엇인가요?
각도 규칙과 요소의 모양이 보이는 방향에 영향을 줍니다. 실제 표면에 렌더링해 확인하세요.
직접 준비한 자료로 시도하세요.
작업 프롬프트의 예시를 내 자료로 바꾸세요. 필요한 요구 사항은 유지하고 작업을 WebAct에 복사하세요.
작업 맞춤 설정 및 복사 ↑