인프런 커뮤니티 질문&답변
작성한 질문수
모바일 화면 최적화 방법 질문드립니다!
작성
·
24
·
수정됨
0
선생님, 안녕하세요!
모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다.
아니면 차라리 모바일 전용 SVG를 따로 만들고, PC 버전에서는 display: none으로 처리한 후 모바일일 때만 보이게 하는 방식이 더 나을까요?
조언 부탁드립니다!
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. 파이썬님.
반응형 웹 디자인에서 모바일 화면에서도 비율을 유지하면서 동작하게 만드는 것은 중요한 과제 중 하나입니다. 몇 가지 방법을 통해 최적화할 수 있는데요:
ViewBox와 PreserveAspectRatio 사용: SVG에서 viewBox 속성과 함께 preserveAspectRatio를 활용하면 비율을 유지하면서 다양한 화면 크기에 맞출 수 있습니다. 예를 들어,
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">같은 형식으로 적용할 수 있습니다.CSS 미디어 쿼리: 미디어 쿼리를 사용하여 디바이스의 화면 크기에 따라 다른 스타일을 적용할 수 있습니다. 이를 통해 특정 조건에서 SVG 요소의 크기나 위치를 조정할 수 있습니다.
반응형 유닛 사용:
%,vw,vh같은 반응형 유닛을 사용하여 SVG와 다른 요소의 크기를 자동으로 조정하게 할 수 있습니다.모바일 전용 그래픽: 두 가지 버전을 따로 만들어 상황에 맞게 전환하는 것도 하나의 방법입니다. CSS의
display: none속성을 활용해, PC와 모바일 버전의 SVG를 각각 필요할 때만 보이게 할 수 있습니다.
관련해서 유사한 문제를 다룬 질문이 있어 소개해드리겠습니다:
- “미디어쿼리 사이즈”: 이 질문에서는 미디어 쿼리를 사용한 반응형 디자인에 관한 다양한 팁과 방법을 다루고 있습니다.
질문에서 설명하신 문제 해결에 많은 도움이 되셨으면 좋겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.