모바일 css 작업(단위)
295
24 asked
선생님, 오랜만에 인사를 드리게 되었네요.
벌써 입사를 한지 1년이 다되가고 있네요.
처음에는 너무 힘들어서 전화를 하면서 선생님께 고민상담도 했는데 지금은 다들 2~3년차로 볼만큼 성장(혹은 찌든..)하였습니다.
현재 자사 신규서비스 퍼블을 하면서 바쁘지만 또 재미를 느끼고 있네요.
다름이 아니라 여쭤볼게 있어서 질문을 남기게 되었는데요.
저희회사는 모바일을 미디어 쿼리를 안쓰고 모바일 환경이 세팅이 되어있는 상태인데요.
pc는 1920이나 2560 환경에 맞게 작업을 해서 ui적으로 문제가 없습니다.
하지만 모바일은 디바이스별로 천차만별이라 어떤것에선 ui가 맞고 어떤것에선 틀어지는 현상이 발생하고 있습니다.
처음에는 vw단위를 활용해 작업을 하였는데, 실제 qa나 stage에 올려 모바일에서 볼 경우 깨지는 경우가 종종 있더군요
그래서 퍼센트 단위를 사용하거나 vw를 적절히 사용중인데요.
선생님께선 모바일 환경에서 작업 시 어떤 단위를 활용해서 작업을 진행하셨나요???
요번주 금욜부터 많이 추워진다는데 감기 조심하시고 또 코로나 조심하세요. 감사합니다.
Answer 1
1
아시겠지만 VW(Viewport Width) 라고 합니다.
vw로 작업하면 브라우저의 너비에 따라 변하니까 미디어 쿼리를 사용하지 않고 반응형 작업이 가능합니다.
장점이 있듯이 단점도 있습니다.
지금 말씀하신 것처럼 세밀한 조정이 어렵습니다.
미디어쿼리를 사용하면 손이 정말 많이가지만 vw에서 할 수 없는 세밀한 조정이 가능합니다.
저는 vw 단위로 실 작업을 해본 경험은 없습니다. 아무래도 세밀한 조정을 원하는 성향이라 미디어쿼리 작업을 선호합니다.
강의 내용 관련 문의드립니다 (animation)
1
55
2
Grid 수직정렬 제대로 안됩니다.
1
72
1
강의 화면이 안나옴
1
208
1
로그인 폼 CSS 디자인 코드 질문 있습니다.
1
235
1
inherit와 100%의 차이가 궁금합니다.
1
322
2
<br>태그 사용 빈도를 줄이게 될 경우의 질문입니다.
1
201
1
수업자료는 없나요?~
1
325
1
[공유] 부모 요소가 position: absolute 인 경우에 대한 설명
1
663
1
float: right 요소가 아래에 배치되는 이유 쉽게 설명
1
863
1
안녕하세요 가상클래스 포지션 활용 질문드립니다
1
386
2
hover 가상클래스 ( hover로 만드는 버튼 디자인, 드롭다운 네비게이션 & 컨텐츠) 강의중
3
460
2
nav 태그
1
1129
1
css 선택자의 모든-선택자 우선순위가 중요한 이유 강의 내용중에서
1
545
1
강의자료는 어디서 받을 수 있나요?
1
348
1
before after 가상클래스(도형과 버튼 만들기, 포지션 활용) 01 강의 중 이미지 안 뜨는 문제요ㅠ.ㅠ
1
673
2
유튜브 영상 파일
1
300
1
유튜브의 초급,중급 이론과는 어떤차이가 있나요?
1
260
1
선생님 질문이 있습니다. (float 속성)
1
262
1
파일다운로드와 관련하여
1
256
1
포지션(position) 속성(z-index와 포지션 속성 우선순위) 강의 질문있습니다.
1
401
1
오타(contaner)
1
241
1
float 속성을 설정했을 때 display: inline-block이 되는 것에 관련하여 질문이 있습니다.
1
2281
2
margin: auto;
1
354
1
label 태그의 사용법이 궁금합니다
1
352
2