웹프로그래밍 (127) 썸네일형 리스트형 Vertical scrolling in iOS not smooth div에 overflow를 사용해 scroll 를 만들었을때, ios 등에서 smooth scroll이 안될 경우. * { -webkit-overflow-scrolling: touch; } 위 코드 삽입. * 로 설정은 부담이 될 수 있으므로 해당 태그에만 적용시켜도 된다. iphone X 웹뷰 safe-area-inset 관련 프로젝트에서 상단 하단 position:fixed된 레이아웃 상태에서 아이폰X 웹뷰 대응 방법이다. 메타태그 뷰포트쪽에 viewport-fit=cover 를 추가 padding-top: env(safe-area-inset-bottom); 2번의 속성값을 응용하는 건데 기본적으로 env(safe-area-inset-bottom); // IOS 11.0 이상 (신) constant(safe-area-inset-bottom); // IOS 11.0 버전 (구)ios 11.2 업데이트에서 constant가 제거됨 env를 사용. 해당 값이 필요한 부분에 위값을 응용하여 집어 넣었다. (저는 커스텀한곳에 위 env,constant 둘다 삽입 했습니다;) safe-area-inset의 기본값이 있어 값을 수정하고 .. CSS overflow scrolling and hidden scrollbar (iOS) I just played with this CodePen and it seems that if you set the background-color to transparent for all three properties below (and in this example also remove box-shadows), the scrollbar is not visible at all: #style-1::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1); background-color: transparent; } #style-1::-webkit-scrollbar { background-color: transparent; } #.. 안드로이드 웹뷰 스크롤바 안보일 때 (Android Webview scrollbar not visible, div overflow auto, scroll case) 앱 내에 웹뷰 방식으로 서비스를 런칭할일이 있는데, body scroll 이 아닌 div overflow auto 로 스크롤을 만들었는데 스크롤바가 나타나지 않았다. (어디서 영향을 준걸까...) 아래 css 코드를 적용하니 해결되었다. 스타일은 취향에 맞게 맞추면 된다. ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); -webkit-border-radius: 10px; border-radius: 10px; } ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px;.. 안전한 any 타입 만들기 타입스크립트에서 가장 유용한 타입은 무엇일까요? 저는 any 라고 생각합니다. 항상 타입 검사를 만족시킨다는 특성이 타입스크립트에서도 자바스크립트 모듈을 손쉽게 사용할 수 있게 해주기 때문입니다. 이렇게 자바스크립트의 거대한 생태계를 그대로 활용할 수 있게 해준다는 점에서, any는 타입스크립트의 생산성을 높여주는 유용한 타입입니다. declare const untypedModule: any; 그럼 타입스크립트에서 가장 유용하지 않은 타입은 무엇일까요? 저는 이 또한 any라고 생각합니다. 항상 타입 검사를 만족시킨다는 특성이 타입 검사의 의의를 퇴색시키기 때문입니다. 어떤 비정상적인 연산이라도 any 타입이 붙어버리면 타입 검사를 통해 걸러낼 수 없기 때문에 any는 프로그램의 안전성을 낮추는 유용하지.. moment.js (날짜관련 작업을 위한 자바스크립트 라이브러리) 들어가며 calendar 프로젝트를 진행하면서 날짜 관련정보를 다루었다(Date 객체). 프로젝트 중에 날짜 관련 data를 쉽게 다룰수 있는 라이브러리를 발견하여 이에 대해서 간단히 정리해보고자 한다. Moment.JS 는 날짜(Date)형식의 데이터의 파싱, 검증, 조작 그리고 화면에 출력하는 작업을 위해 만들어진 아주 유용한 라이브러리이다. 프로젝트를 통해 느낀 Date object의 불편함 & Moment.JS의 편리함 Date object와 관련된 method를 사용하면서 불편한점이 많았다. 한가지 예를 들면 ISO 포맷형태의 날짜data(ex. 2017-01-25)를 얻기 위해서, 시간이 까지 포함된 ISOString형태(ex. 2017-01-25T12:25:00.000z)에서 T를 기준으로 .. Uploading Files With VueJS and Axios VueJS and Axios GitHub – axios/axios: Promise based HTTP client for the browser and node.js work beautifully together for making HTTP requests. However, uploading files with VueJS and Axios can be a little bit challenging since it requires uploading files through an AJAX type system. I’ll be honest, I hate doing file uploads, but they are a necessity for the majority of applications. This tutori.. [React] Component Link to 로 연결시 스크롤 문제 해결 Component 를 Link to 로 연결시에 스크롤이 0 으로 이동되도록 아래와 같이 처리 이전 1 2 3 4 5 6 7 ··· 16 다음
