반응형
제공해주신 HTML 코드를 모바일 환경(스마트폰 및 태블릿)에서 확대하지 않고도 한눈에 편하게 볼 수 있도록 CSS 스타일을 반응형(Responsive)으로 대폭 수정했습니다.
주요 수정 사항은 다음과 같습니다.
- 미디어 쿼리(@media) 도입: 모바일 화면 크기(최대 768px 이하)에 맞춰 폰트 크기와 패딩이 자동으로 최적화됩니다.
- 사주원국(Pillars) 구조 개선: PC에서는 가로로 4줄 배열되던 사주 기둥이, 모바일에서는 2열 2행 구조로 깔끔하게 배치되도록 유연하게 변경했습니다.
- 오행 그리드(Ohaeng-grid) 배치 개선: 모바일 화면이 좁아지면 가로로 구겨지던 오행 칸들이 가로폭에 맞춰 자연스럽게 아래로 떨어지거나 정렬되도록 조정했습니다.
- 테이블 및 성명학 요소 반응형 처리: 테이블의 글자가 깨지거나 화면 바깥으로 나가지 않도록 모바일 최적화 패딩 및 가로 스크롤 대응을 적용했습니다.
반응형