HTML 화면을 보고 특정 요소의 스타일을 다시 만들어야 할 때가 있다. 이럴 때는 “예쁘게 만들어줘”보다, 요소가 어디에 있고 어떤 역할을 하는지 먼저 알려주는 편이 결과가 훨씬 안정적이다.
아래 템플릿은 DOM 경로, 요소 정보, 위치와 크기를 함께 전달하는 형태다. 캡처 기반 UI 복원이나 간단한 CSS 초안 생성에 사용할 수 있다.
기본 템플릿
다음 HTML 요소에 어울리는 CSS 스타일을 작성해주세요.
DOM Path: html
Element: <html lang="en">
Position: top=0px, left=0px
Size: width=1122px, height=477px
요소의 역할과 화면 크기를 고려해서 기본 레이아웃, 여백, 배경, 반응형 처리까지 포함해주세요.조금 더 구체적으로 요청하기
다음 HTML 요소의 스타일을 정의해주세요.
- DOM Path: html
- Element: <html lang="en">
- Position: top=0px, left=0px
- Size: width=1122px, height=477px
요구사항은 다음과 같습니다.
1. 제공된 위치와 크기를 참고해 레이아웃을 잡아주세요.
2. 고정 크기에만 맞추지 말고 반응형 화면에서도 깨지지 않게 작성해주세요.
3. 브라우저 기본 스타일 차이를 줄일 수 있는 기본값을 포함해주세요.
4. 접근성을 해치지 않는 범위에서 스타일을 제안해주세요.
완성된 CSS 코드와 함께, 중요한 스타일 선택 이유를 짧게 설명해주세요.CSS 초안 형태로 요청하기
아래 CSS 블록을 완성해주세요.
```css
html {
/* DOM Path: html */
/* Position: top=0px, left=0px */
/* Size: width=1122px, height=477px */
}
```
단순히 width와 height만 넣지 말고, 실제 문서의 루트 요소로서 필요한 기본 스타일을 함께 제안해주세요.사용할 때 주의할 점
위치와 크기는 참고값일 뿐이다. 특히 html이나 body처럼 문서 전체를 감싸는 요소는 캡처 시점의 뷰포트 크기와 강하게 연결된다. 그래서 CSS를 만들 때는 고정 픽셀을 그대로 박기보다 min-height, box-sizing, 기본 margin 제거 같은 전역 스타일을 함께 보는 편이 좋다.
프롬프트에 화면의 목적도 한 줄 넣으면 결과가 더 좋아진다. 예를 들어 “랜딩 페이지의 루트 요소”, “관리자 대시보드 화면”, “모바일 우선 레이아웃”처럼 맥락을 붙이면 모델이 색상이나 여백을 덜 임의로 정한다.