분류 전체보기73 아이폰 노치 문제 해결 관련 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. 원이 확대되는 애니메이션 https://codepen.io/ziziziczic/pen/oNydqNe wave animation ... codepen.io 스타일 @-webkit-keyframes wave { from { -webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1; } to { -webkit-transform: scale(2,2); transform: scale(2,2); opacity: 0; } } @keyframes wave { from { -webkit-transform: scale(1,1); transform: scale(1,1); opacity: 1; } to { -webkit-transform: scale(2,2); transform: scale(.. 2022. 11. 25. 진수표시 자바스크립트는 특별한 변환 없이 16진수(0x), 8진수(0o), 2진수(0b)를 바로 사용할 수 있게 지원. 자바 16진수(0x), 8진수(0), 2진수(0b) => 8진수만 표기법이 살짝 다르네 parseInt(str, base)를 사용하면 str을 base진수로 바꿔줍니다(단, 2 ≤ base ≤ 36). : 결과값 정수 num.toString(base)는 숫자를 base진수로 바꾸고, 이를 문자열 형태로 반환합니다. : 결과값 문자열 2022. 8. 10. 특정 소수점에서 반올림하기 숫자 12.3456789 를 소수점 두번째 자리까지만 표시. 이때 반올림적용해보기 Math.round를 사용한 예제 ( 상단 이미지 참고 ) toFixed 적용 예제 주의사항 return 값이 문자열이라 + 기호를 붙여서 문자열을 숫자형으로 변환시켜주었음. 2022. 8. 10. 숫자 => 진법변환 let num = 255; num.toString ( 2 ) ; // 255 의 2진법으로 변환한 값 출력 255..toString(2); // 직접 숫자에 toString( ) 적용법 : 점 두개 또는 (255).toString( 2 ) ; // 괄호 사용해서 toString 적용 toString( 2진법 또는 8진법 또는 16진법) 이렇게 숫자 기재시, 해당 진법으로 변환됨. 2022. 8. 10. 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. 숙소 인원 설정 해보기 완성화면 ui 설명서 객실은 최대 3개까지 선택 객실별 성인은 최대 10명 (기본값 1) 객실별 아동은 최대 3명 (기본값 0) html 인원 및 객실수 객실1 성인 - + 아동 - + 나이 2세 3세 4세 5세 나이 2세 3세 4세 5세 나이 2세 3세 4세 5세 객실추가 css a{text-decoration: none;} input[type=text]{border:none;outline: none;width:20px;text-align: center;} .ally{position:absolute;display:block;width:1px;height: 1px;margin:-1px;padding:0;border:0;overflow: hidden;} .btn-base{background: #000;di.. 2022. 7. 4. mouseenter , mouseleave event 상황 ) 모바일에서 mouseenter, mouseleave 이벤트를 사용하려는데, 이벤트 자체가 발생이 안되는 것 해결 ) mouseenter , mouseleave 는 마우스를 쓰는 pc에서 사용되는 이벤트라 모바일에서는 발생하지 않음. 2022. 6. 29. linear-gradient 사용 예 linear-gradient(to bottom,rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.1) 70%, rgba(0,0,0,0) 100%); 방향, 특정 위치에서 색상정도 정의 가능. 2022. 6. 29. 이전 1 2 3 4 ··· 8 다음
