note

이벤트 웹페이지를 이번에 만들게 되면서, 상단영역은 애니메이션이 많아 css로 구현하기 애매해서 video태그로 영상파일을 embed하는 식으로 진행을 했다. 작업시간을 줄이기위해 bootstrap기반으로 진행하였고, 웹&모바일용 영상파일을 두어 반응형에 따라 스위칭되게 하였다. 웹으로 접속시 모바일버전 영상은 안보이는데 브라우저 사이즈를 줄여서 모바일 사이즈로 줄이니 그때서야 재생이 되더라. display가 안된상태에서는 정지되고, display되는순간 재생되는건 이번에 알게되었다 ㅋ. (오히려좋음) 다만, 인앱(android)에서 로드시에 위 html 상태라면 컨트롤이 보이는 피드백이 있더라. video 태그면 어쩔수없나 해서 gif나 canvas sprite로 처리하려했으나, 마지막으로 video ..

반응형 코딩시 %계산만 사용해오다 vw를 사용하는식으로 최근에 작업을 했는데 괜찮은듯하여 기록한다. 모바일 디자인만 있고(최대 840px) 이하로 줄어들면 비율대로 줄어야하는 case 였다. $mobile-size: 840; /* vw 변환 function */ @function vw($target) { @if type-of($target) == number { @return calc(($target * 100) / $mobile-size) * 1vw; } @else if type-of($target) == list { $vw: (); @each $value in $target { @if type-of($value) == number { $vw: append($vw, calc(($value * 100) ..

브라우저의 GPU 가속을 사용하는 translate3d 속성이 있다.animation이라던지 가속을 위해 0,0,0을 넘겨주는 식으로해서 사용하면 유용한 속성이다.-webkit-transform : translate3d -webkit-transform : translateZ -webkit-transform : rotate3d -webkit-transform : scale3d -webkit-transform-style : preserved-3dwebkit/blink 엔진 기반의 데스크탑(Mac/Windows) 브라우저에서 translate3d속성으로 센터정렬 사용 시,글씨가 흐리고 뿌옇게 보이는 현상이 생겼다. .image-square > .content { padding: 0 10%; top: 50%; ..

부트스트랩 사용하여 모달사용시 반응형으로 웹과 모바일이미지를 분기하여 보여줄경우, IE 에서 이미지는 줄어들지만 부모 div의 높이가 최대값으로 고정되는 이슈 발생. 위와같이 부모div (.modal-body)가 함께줄어들지않고 이미지만 줄어드는 현상이 발생했다.webkit 엔진 브라우저에서는 문제가 없었다. 부트스트랩에서 제공해주는 class가 있는진 모르겠으나, max-height와 overflow속성으로 일단 해결했다.. 오늘 하루 열지 않기 위와같이 .modal-body에 max-height를 이미지 원본 높이만큼주고, overflow를 지정해주면, modal-body가 함께줄어들어서 해결되긴 한다..

html5 fileReader를 검색하면서 내용이 생각보다 간단하여 정리해둔다..이미 정리된 글들이 있지만 익혀둘겸 하나씩 해본다.. 감성프로그래밍(?)님의 블로그를 참고. 대부분 브라우저도 지원하는걸 보니 쓰기좋아보인다. https://caniuse.com/#feat=filereader 크게 3가지만 정리... 1. 텍스트파일 읽기2. 이미지파일 읽기3. 이미지파일 읽어 썸네일생성 1. 텍스트파일 읽기 pre태그는 단순히 읽은파일의 텍스트를 출력하기 위한영역.input태그에서 accept="text/*" 로 설정하면 텍스트기준으로 선택할수있는데선택창에서 모든파일보기하면 다른파일도 읽히긴한다. 이미지를 읽을경우 깨진다..readAsText메소드로 읽어둔 후 로드가 완료되면 뿌려준걸 볼 수 있다. 2. 이..

화살표이미지에 통통뛰는효과 주기위함 #load-layer #view-layer #btn-arrow { display:block; /* etc...style */ animation: bounce .5s infinite alternate; -webkit-animation: bounce .5s infinite alternate; } @keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } } @-webkit-keyframes bounce { from { transform: translateY(0px); } to { transform: translateY(-15px); } }

css3 간단 페이지 로딩화면 HTML : Loading… CSS : /* Absolute Center Spinner */ .loading { position: fixed; z-index: 999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; display:none; } /* Transparent Overlay */ .loading:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); } /* :not..

이미지를 넣고,, 페이지에선 줄여서 보여줄경우,, FIREFOX에서 흐리게 번지는,,(blur) 거임 ㅋ FF에선 IMAGE-RENDERING 기본값이 AUTO가 아닌가봄 ㅋ 그래서 AUTO로 하면됨.. img { image-rendering: -moz-auto; /* Firefox */ image-rendering: -o-auto; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: auto; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ }

https://blog.weirdx.io/post/35660

mobile chrome 에서썸네일 넓이가 110px 미만이면흐릿하게 blur 처리가 되는데또렷하게 보이도록 해당 기능 막는법?12345678img { image-rendering: optimizeSpeed; /* */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */ image-rendering: optimize-contrast; /* CSS3 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */}