프롬프트로 웹페이지에서 반응형 1×3 이미지 그리드 넣는 방법

웹페이지에 이미지를 가로로 3장 나란히 정렬하고 싶을 때,

실패하지 않으려면 구성 요소를 미리 정리해두는 게 좋아요.

 

이 글은 나중에 복사해서 다시 쓸 수 있도록 실무 중심으로 작성했어요.

---

1. 구조화 프롬프트 (HTML 요청용)

HTML 코드를 요청할 때 아래 문장을 그대로 복사해서 붙여넣으면 돼요.

웹페이지 본문에 넣을 HTML 코드를 만들어줘. 
이미지 3장을 1행 3열 형태로 가로 정렬해줘. 
각 이미지는 가로세로 비율이 유지되도록 설정하고, 왜곡되지 않게 만들어줘. 
이미지 아래에는 짧은 텍스트 설명이 들어가도록 해줘. 
반응형 디자인도 적용해서, 모바일에서는 이미지가 한 줄씩 세로로 배치되게 만들어줘. 
모든 스타일은 인라인 CSS로 구성해줘. 외부 CSS 파일 없이 사용할 수 있게 해줘. 
웹페이지에서 잘리지 않도록 전체 너비는 100%로 하고, 이미지 최대 너비는 300px로 제한해줘.
각 이미지와 해당 텍스트 설명을 하나의 <div> 블록으로 묶어서 구성해줘. 그래야 유지보수가 쉬워요.

---

2. 포함된 핵심 요소 정리

• 1행 3열 배열: 이미지 3장을 가로로 나란히 정렬해요.
• 이미지 비율 유지: 가로세로가 찌그러지지 않도록 자동 조정돼요.
• 텍스트 설명 포함: 각 이미지 아래에 설명 문구가 들어가요.
• 반응형 전환: 모바일에서는 이미지가 세로로 한 줄씩 배치돼요.
• 인라인 CSS 사용: 외부 파일 없이 HTML 코드 안에서 스타일을 처리해요.
• 최대 너비 제한: 이미지가 너무 커지지 않도록 max-width를 300px로 제한해요.

---

3. 통제해야 할 요소

항목	설명
배열 방식	flex, grid 등 어떤 방식으로 배치할지 결정해요.
반응형 처리	모바일 화면에서 자동으로 1열 전환이 되도록 구성해요.
이미지 비율 고정	object-fit: cover 또는 height: auto 등 비율 유지 방식이 필요해요.
이미지 크기	동일한 크기로 통일하고 가로 길이를 제한해요.
이미지 간격	margin, gap 등을 활용해 적절한 간격을 유지해요.
텍스트 위치	이미지 아래에 설명이 붙도록 구조를 설정해요.
파일 소스	이미지 URL 또는 플레이스홀더를 명확히 지정해요.
전체 정렬	그리드 전체의 정렬 방식(center, left, space-between)을 제어해요.

---

4. 실무 요령

이미지가 없는 경우, 그리드 선만 보이도록 요청하면 미리 레이아웃을 확인할 수 있어요.

이미지와 텍스트는 하나의 블록(<div>)으로 묶어서 유지보수가 쉽도록 요청하세요.

외부 CSS를 쓰기 어려운 환경에서는 반드시 인라인 스타일로 요청해야 브라우저 호환성이 좋아요.

HTML 구조를 자주 써야 한다면 이 글을 복사해 템플릿처럼 저장해두면 편해요.