모바일 화면 최적화 방법 질문드립니다!
229
投稿した質問数 1
선생님, 안녕하세요!
모바일 화면에서도 비율을 유지하면서 반응형으로 동작하게 만드는 것이 가능할까요? 여러 방법을 시도해 보았는데, 해결이 잘 안 돼서 이렇게 질문을 남깁니다.
아니면 차라리 모바일 전용 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를 각각 필요할 때만 보이게 할 수 있습니다.
관련해서 유사한 문제를 다룬 질문이 있어 소개해드리겠습니다:
- “미디어쿼리 사이즈”: 이 질문에서는 미디어 쿼리를 사용한 반응형 디자인에 관한 다양한 팁과 방법을 다루고 있습니다.
질문에서 설명하신 문제 해결에 많은 도움이 되셨으면 좋겠습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
6-6
0
9
1
Json 플러그인 사용시 variable collection 없음
0
14
1
배리어블 목록 없음
0
23
3
Token 등록 방법 문의
0
21
1
스크롤 이미지 영역 넘어갈시 가로로 스크롤이 안되여
0
133
1
vscode에서 svg파일 불러오기 질문
0
3763
1
key.svg 이미지
1
209
1
Vue.js 적용 방법
0
278
1
강사님 vscode 폰트와 색상이 뭔가요
0
648
2
2:20분 이해가 가지 않습니다.
0
284
1
web animation api를 통한 apple page
0
490
2
리액트에서 scroll-timeline.js 불러오는 법
0
726
1
특정 시점에 자바스크립트 호출은 어려울까요?
0
320
2
section04 - 각각의 객체에 개별 애니메이션 적용하기
0
461
3
scroll-timeline.js 를 사용한 ScrollTimeline 실행 시, easing 효과?
0
736
2
scroll-timeline.js 파일
0
544
1
선생님 Section4에 제목 오타난것같습니다!
0
389
1
keyframeEffect를 찾을 수 없다고 나와요
0
504
1
제이쿼리 animate()와는 다른걸까요?
0
402
1
scroll-timeline.js 파일을 cdn으로 불러 올 수 없을까요??
0
559
1
넓이를 %로 적용하긴 어려울까요?
0
434
2
scrollTimeline polyfill 에 관해서
0
812
1
아직 강의를 보진 않았는데
2
575
1
이 플러그인은 지원되지 않습니다. 어떻게 해결해야 되나요?
0
1151
2