업무 문제 해결5 아이폰 노치 문제 해결 관련 blog 글 아이폰 노치 문제에 관련하여 잘 설명된 blog 글을 모아보았습니다. https://wit.nts-corp.com/2019/10/24/5731 아이폰X 안전영역(Safe Area) 대응 사례 | WIT블로그 Safe Area는 원래 TV에서 처음 도입된 개념입니다. TV 해상도 비율이 다양해지면서 영상에서 타이틀, 자막 등이 필수 콘텐츠의 노출을 보장할 수 있는 영역입니다. wit.nts-corp.com https://carrotdesign.tistory.com/entry/iPhone-X-iPhone-11%EC%9D%98-%EC%95%88%EC%A0%84%EC%98%81%EC%97%ADSafe-area%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90 iPhone X, i.. 2022. 12. 26. pop up 창의 스크롤 문제 과제 : popup 내부에 컨텐츠를 좌우로 나뉘어 각각의 스크롤이 작동하게 하기 현상 : popup창의 스크롤이 아닌 뒷 배경의 스크롤이 작동하는 것.때문에 뒷 배경이 일부 보임. ios에서 popup 의 스크롤을 인식하지 못해 하단에 있는 주소창와 popup창의 일부 내용이 겹쳐져서 내용이 가림. 해결법 : 뒷 배경의 스크롤이 동작하지 않도록 height 값을 주고 overflow : hidden 처리 height: 100%; overflow-y : hidden; popup창의 전체 높이값을 제대로 인식하도록 다음과 같은 옵션을 썼다. (ios 를 위해서 사용) min-height: -webkit-fill-available; (popup 창에 사용) 각각의 스크롤이 부착될 height에 높이값을 주고,.. 2022. 7. 15. 제공된 리소스가 (퍼블,개발,운영에) 동기화 된것인지 확인 현상. 노랑 영역의 이미지가 틀어짐. 문제 운영 서버의 제공되는 이미지와 개발 및 퍼블상의 이미지가 달라서 운영 페이지의 해당 영역이 틀어짐. 해당 영역에 스타일링이 표준화 되어있지 않았음. 문제해결법 문제를 확인 후 , 운영서버 이미지 = 개발 서버 이미지 = 퍼블 서버 이미지 동일하게 맞춤 (이미지 사이즈 통일 , 테두리 있음, 배경있음, border-round 처리된 이미지 ) 각 브랜드별로 따로 css를 주었는데, 통일화된 css로 수정함. ( 운영서버의 DB에서 브랜드 배열값을 받아와서 뿌려주는 터라 통일시켜야함.) 재발 방지 기획자가 운영서버에 올리는 이미지를 확인 후, 작업 ! ( 디자이너에게 확인 하지 말것 !!) API로 댕겨오는 리소스에 대한 확인 필요. 2022. 7. 8. mouseenter , mouseleave event 상황 ) 모바일에서 mouseenter, mouseleave 이벤트를 사용하려는데, 이벤트 자체가 발생이 안되는 것 해결 ) mouseenter , mouseleave 는 마우스를 쓰는 pc에서 사용되는 이벤트라 모바일에서는 발생하지 않음. 2022. 6. 29. 아이폰) x 축 스크롤에서 끝까지 당겨지지 않는 문제 상황 ) 텍스트를 가로로 쭉 나열하고, x축으로 스크롤을 선언. (flex 사용, 각 텍스트간 거리는 마진으로 처리) 문제 ) 아이폰에서 해당 스크롤이 마지막까지 끌어당겨지지 않음 문제해결 ) x축으로 나열된 해당 div 블랙 내부의 모든 margin을 padding 으로 수정. 이후 스크롤 제대로 작동. 앞으로 사용법 ) margin , padding 섞어서 쓰지 말고, padding으로 통일. 2022. 6. 29. 이전 1 다음
