티스토리

Kang-ji
검색하기

블로그 홈

Kang-ji

kang-ji.tistory.com/m

#IT #웹퍼블리싱 #프론트엔드

구독자
1
방명록 방문하기

주요 글 목록

  • Galaxy Foldable 폴더폰 해상도 (Viewport) 폴더블 폰 모바일웹 브라우저 해상도 정보 기종 Viewport 화면 사이즈 (W x H) 해상도 Phys. (W x H) 인치 DPR (Device Pixel Ratio) Galaxy Flip4 412 x 1006 1081.5 x 2640.75 Galaxy Flip3 384 x 939 1080 x 2640 260 x 512 6.7 2.8125 Galaxy Flip2 6.7 Galaxy Flip 412 x 1004 1080 x 2636 112 x 300 6.7 Galaxy Z Fold3 접힌화면 320 x 872 넓은화면 674 x 842 접힌화면 840 x 2289 넓은화면 1769.25 x 2210.25 2.625 Galaxy Z Fold2 884 x 1104 1768 x 2208 7.6 2 Galax.. 공감수 4 댓글수 0 2021. 12. 13.
  • 이중탭 구현 jQuery 사용하여 이중탭 구현 html 로그인 폼 A 타입 B 타입 ID/PW 로그인2 로그인3 로그인 ※ 할당받은 ID를 입력하시면 로그인이 됩니다. 등록 로그인 해지 ※ 할당받은 ID를 입력하고 등록하시면 로그인이 됩니다. 등록 로그인 해지 ※ㅎㅎㅎ ID/PW FIDO2 MOTP 로그인 ※ 할당받은 ID를 입력하시면 로그인이 됩니다. 등록 로그인 해지 ※ sdd 등록 로그인 해지 ※ aaaaa script css .login .container{width:1280px; /*margin:0 auto;*/ margin-top:100px; margin-bottom:160px;} .login .tit-box{margin-bottom:56px;} .login .tit-box p{font-size:36px;.. 공감수 0 댓글수 0 2021. 12. 9.
  • [IOS] safari에서 확대 축소 막기 기존 모바일에서 확대 축소를 막기 위해선 코드만 추가해주기만 하면 정상적으로 작동이 됬습니다. IOS 10 이후 새 기능으로 To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport. 가 추가됨과 동시에 user-scalable=no 만으로는 아이폰 사파리에서 확대 축소가 불가능해졌습니다. 오늘은 css의 touch-action 으로 모바일 확대 축소 막는 방법을 알아보겠습니다. touch-action: pan-y; 를 사용하게 되면 세로 터치는 가능하게 되고 전체 확대는 불가능하게 됩니다. juyeol.tistory.com.. 공감수 1 댓글수 0 2020. 10. 22.
  • 터치 이벤트처리 stackoverrun.com/ko/q/7854107 javascript - 터치 스크린 장치에 마우스를 감지 나는 장치가 터치 장치인지 여부를 감지하는 다음 � : 나는 터치 기기를 사용하지 않을 경우에만 :hover 상태를 표시하려면이를 사용 var isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints; if(isTouchDevice) { $('body').addClass('yes-touch'); } else { ... stackoverrun.com big-blog.tistory.com/4357 자바 스크립트로 터치 스크린 장치 감지 자바 스크립트로 터치 스크린 장치 감지 Javascript / jQuery에서 클라이언트 장치에.. 공감수 1 댓글수 0 2020. 9. 25.
  • 모바일웹 브라우저 해상도사이즈 상세 1920x1080 Edge 브라우저 높이값 77px (상단 32px / 주소창 45px) Firefox 브라우저 높이값 74px (상단 33px / 주소창 41px) IE 브라우저 높이값 78px (상단 27px / 주소창 + 탭영역 51px) Opera 브라우저 높이값 70px (상단 31px / 주소탕 49px) Safari 브라우저 높이값 60px (상단 23 / 주소창 37 Chrome 브라우저 높이값 71px (상단 34px / 주소창 37px) 윈도우 10 기본 하단바 : 40px 1080px 높이값에서 55~77px 가려짐 결론 : 대략적으로 970~980 정도의 높이값을 웹디자인을 위해 사용가능 -----------------------------------------------------.. 공감수 3 댓글수 0 2020. 9. 8.
  • 접근가능(키보드) checkbox/radiobutton/ checkbox html What type of accessibilty issues do you see most often? There are no issues. Focus styles are not present. HTML markup is used in a bizarre way. Also, what happens if the label text is very looooooooong, like this one? css html { box-sizing: border-box; background: #f2f2f2; padding: 20px 50px } /* Inherit box-sizing to make it easier to change the property * for components that lev.. 공감수 0 댓글수 0 2019. 12. 24.
  • 아이폰5 (테스트 버전 ios8.4) 미지원 https://tldrdevnotes.com/css-sass/vh-full-height-mobile-phones/ TLDR Dev Notes 100vh does not take into account the browser bar or the navigation menu. On iOS Safari and Google Chrome, the viewport will not resize in response to the URL being shown or hidden. This is a compromise by design, to avoid page jarring, reflows and relayout tldrdevnotes.com 공감수 0 댓글수 0 2019. 12. 10.
  • iPhone 11 /iPhone 11 Pro/iPhone 11 Pro Max MediaQuery 6 iPhone 11 /* 1792x828px at 326ppi */ @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) { } This media query is also for: iPhone XR iPhone 11 Pro /* 2436x1125px at 458ppi */ @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { } This media query is also for: iPhone X and iPhone Xs .. 공감수 0 댓글수 0 2019. 11. 6.
  • Device Media Queries https://gist.github.com/needim/d15fdc2ac133d8078f7c Device Specific CSS Media Queries Collection Device Specific CSS Media Queries Collection. GitHub Gist: instantly share code, notes, and snippets. gist.github.com https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ Media Queries for Standard Devices | CSS-Tricks This page lists a ton of different devices and media queries th.. 공감수 0 댓글수 0 2019. 10. 17.
  • 스크롤 https://webdir.tistory.com/481 스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기 앞서 유사한 기능의 플러그인인 Headroom.js 에 대하여 살펴보았는데, 구형 IE에 대한 크로스브라우징에 어려움을 겪을 수 있습니다. 이에 원리는 유사하나 대상 요소가 명확하게 한정된 요소일때 간단히 구현할.. webdir.tistory.com 공감수 0 댓글수 0 2019. 6. 4.
  • 이중탭 레퍼런스 https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/methods/append append - API Reference - Kendo UI TabStrip | Kendo UI for jQuery docs.telerik.com 공감수 0 댓글수 0 2019. 5. 28.
  • 탭(이중탭) 예제 jQuery 사용하여 이중탭 구현 html 로그인 폼 A 타입 B 타입 ID/PW 로그인2 로그인3 로그인 ※ 할당받은 ID를 입력하시면 로그인이 됩니다. 등록 로그인 해지 ※ 할당받은 ID를 입력하고 등록하시면 로그인이 됩니다. 등록 로그인 해지 ※ㅎㅎㅎ ID/PW FIDO2 MOTP 로그인 ※ 할당받은 ID를 입력하시면 로그인이 됩니다. 등록 로그인 해지 ※ sdd 등록 로그인 해지 ※ aaaaa script $(document).ready(function(){ // 이중탭 $(".tabonoff > .cont-wrap").children().css("display", "none"); $(".tabonoff > .cont-wrap div:first-child").css("display", "block.. 공감수 1 댓글수 0 2019. 5. 27.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.