브라우저를 구분하는 코드 - 엔진을 통해서 브라우저를 구분하는 듯 함 - ios크롬을 실행하더라도 '사파리'라는 것을 확인함 var userAgent=navigator.userAgent.toLowerCase(); var browser; if(userAgent.indexOf('edge')>-1){ browser='익스플로러 엣지'; }else if(userAgent.indexOf('whale')>-1){ browser='네이버 웨일'; }else if(userAgent.indexOf('chrome')>-1){ browser='크롬'; }else if(userAgent.indexOf('firefox')>-1){ browser='파이어폭스'; }else if(userAgent.indexOf('safari/')..
1) transform 3D 변환 함수 속성 값 값 의미 기본값 translate3d(x, y, z) 이동(X축, Y축, Z축) 단위 translateZ(z) 이동(Z축) 단위 scale3d(x, y, z) 크기(X축, Y축, Z축) 없음(배수) scaleZ(z) 크기(Z축) 없음(배수) rotate3d(z, y, z, a) 회전(X벡터, Y벡터, Z벡터, 각도) 없음, deg rotateX(x) 회전(X축) deg rotateY(y) 회전(Y축) deg rotateZ(z) 회전(Z축) deg perspective(n) 원근법(거리) 단위 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3차원 변환 효과 없음 translateZ(z) perspecive view로 봤을때(3D)..
To support various device viewport size specially mobile device has portrait and landscape, scale up and down, website have to adjust various enviorment js Code - it is widely used function initScale() { var ress = navigator.userAgent; if (ress.indexOf("Android 1.", 0) > -1 ){ if (ress.indexOf("480", 0) > -1 ) { // 480x800 var per = 0.5226824457593688; } else if(ress.indexOf("600", 0) > -1 ) { /..
1) transform position을 사용하게되면 부하가 걸리게된다. transform와 같이 애니매이션에 특화된 속성을 사용해야 한다. 사용법 1. position을 이용한 애니메이션 효과(잘못된 사용방법) html 123 css .box { width: 200px; height: 200px; background: tomato; display: flex; justify-content: center; align-items: center; font-size: 30px; transition: 1s; position: relative; left: 0; top: 0; } .box:hover { position: relative; left: 100px; top: 30px; } ※ rendering이 다시 되기..
1) transform 2D 변환 함수 글꼴(서체) 지정 속성 값 값(변환함수) 의미 기본값 translate(x, y) 이동(x축, y축) 단위 translateX(x) 이동(x축) 단위 translateY(y) 이동(y축) 단위 scale(x, y) 크기(x축, y축) 없음(배수) scaleX(x) 크기(x축) 없음(배수) scaleY(y) 크기(y축) 없음(배수) rotate(degree) 회전(각도) deg skew(x-deg, y-deg) 기울임(x축, y축) deg skewX(x-deg) 기울임(x축) deg skewY(y-deg) 기울임(y축) deg matrix(n,n,n,n,n,n) 2차원 변환 효과 없음 matrix보다는 명시적으로 다른 함수를 사용하는 것이 효율적이다. rotate 회..
1) visibility:hidden 실제로 존재하지만 보이지 않지만 공간은 존재한다. display:none 사용법 html css div{ width:100px; height:100px; border: 4px red solid; } .div1{ visibility:hidden; } 출력결과 현업활용 대게 조건문을 활용해서 구현 할 것으로 예상 js document.all.(className).style.visibility="hidden" 예제 html js prev() { if(Num > 1) Num-- // 1보다 작을 경우 예외처리 if(Num === 1) document.all.prev.style.visibility="hidden";//0보다 작을경우 아이콘 안보이게 }, next() { if(..
1) marquee HTML에서 텍스트나 사진을 움직이게 할 수 있는 태그 속성 값 속성 의미 bgcolor 배경색상설정 width 가로크기 설정 height 세로크기 설정 direction 스크롤의 움직임 방향 behavior 움직임의 속성 loop 움직임 반복횟수 scrollamount 스크롤 되는 거리간격 scrolldelay 스크롤의 속도 vspace 위 여백 hspace 아래 여백 사용법 이 텍스트가 움직인다. 배경 색상은 파란색 가로와 세로는 100/50 스크롤 방향이 위쪽 스크롤의 무한반복 스크롤을 5회반복 한번에 2픽셀씩 이동 0.2초마다 스크롤을 이동 스크롤의 위/아래 여백 출력 See the Pen by EunshinNoh (@nes0410) on CodePen.