모바일,pc 접속 기기 구분하기 var filter = "win16|win32|win64|mac|macintel"; if ( navigator.platform ) { if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { //mobile 접속 } else { //pc 접속 } }var filter = "win16|win32|win64|mac|macintel"; if ( navigator.platform ) { if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { //mobile alert('mobile 접속'); } else { //pc alert('pc 접속'); } } 출처: https://88240.tistory.. 스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기 고정된 헤더(네비게이션) 사용 불편함 인지많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고 있는 경우 오히려 사이트의 사용자경험을 떨어뜨리는 요인이 되기도 한다. 이는 모바일과 같은 뷰포트가 작은 기기들에서는 더욱 그러하다.기존의 단순히 고정된 형태의 헤더 디자인을 제공하는 것 보다는 사용자의 스크롤 방향에 따라 헤더부분을 보여주거나 감춤으로써, 사용자의 의도에 맞는 디자인을 제공하는 것이 목적이다. 즉, 사용자의 스크롤이 아래로 향한다면 콘텐츠를 탐색하길 원하는 것이라 간주.. 모바일 팝업 띄울때 부모 스크롤 막고 팝업만 스크롤 되도록! ★모바일에서 팝업 띄울때 부모 창 스크롤 막고 팝업만 스크롤 되게 하기!→ 모바일에서는 overflow-y:hidden;이 안먹어서 이 방법 사용 모바일 스크롤 막기*{ margin:0; padding:0;} .cont { font-size: 30px; font-weight: bold; line-height: 330px; text-align: center;}.cont1 { background-color: #F29B76; }.cont2 { background-color: #EA68A2; }.cont3 { background-color: #32B16C; }.cont4 { background-color: #556FB5; } .nav { overflow: hidden; overflow-y: scroll; pos.. window.onload를 대체하는 jquery의 ready 함수 window.onload 함수는 웹페이지의 로딩이 끝나는 시점에 실행되는 함수다window.onload = function () { alert("로딩 완료"); } 와 같이 사용하게 되면 페이지 로드가 끝난 후에 "로딩 완료" 라는 얼럿창이 뜨게 된다하지만 onload에는 몇가지 단점이 있는데, 이 함수는 페이지 안의 이미지나 외부 파일이 로드 될때까지도 기다린 후에 사용되기 때문에 엔드유저 입장에서 불필요하게 로딩시간이 길어지게 된다. 더욱 심각한것은 동일한 페이지 내에서 onload 함수는 하나만 존재해야 한다는 것인데, 만약 외부 라이브러리에서 onload가 이미 선언 되어 있다면 이를 찾거나 하나로 합치는 것은 여간 어려운일이 아니다.또한 와 같은 attribute 가 설정이 되어 있는 경우에는 .. 자동 실행 함수 (window.onload, $(document).ready()) 요약window.onload 와 $(document).ready() 중에 어느 한 쪽이 좋다고 할 수 없다. window.onload 는 페이지의 모든 요소들이 로드된 이후에 호출되며$(document).ready() 는 DOM 요소들만 로드되면 호출된다. window.onload 는 한 페이지에 하나의 함수만 호출되지만$(document).ready() 는 모두 호출된다. 위와 같은 특징들을 파악하여 경우에 따라 적절히 골라서 쓰자. window.onload Javascript에서 페이지가 로드되면 자동으로 실행되는 함수를 구현할 때엔전역 콜백함수인 window.onload 함수를 사용합니다. ※ 자바스크립트 전역 콜백함수: http://zuyo.tistory.com/337 실행시점페이지가 모두 로드된.. 조건부주석 및 ie에서만 스타일적용 // html5shiv는 ie8이하 html5의 요소를 지원하며, respond.js는 ie8에서 미디어쿼리를 사용할 수 있게 한다. // 이러한 요소는 ie8에 대응하기 위한 요소로 조건부 주석을 적용하면 편하다. // ie9 미만 (즉 8부터) // ie 9일경우 // ie 8일경우 // ie9보다 작거나 같다면 /* 조건부 주석 ! : 아니다(not) - 예) [if !ie] ie가 아니라면 lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면 lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면 gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면 gte : 크거나 같.. 미디어쿼리관련 Media query관련 · 조건문이 될 수 있는 특징 ①width / height @media all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행 @media all and (width:768px), (width:1024px) { … } // 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행 @media not all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행②device-width / device-height @media all and (d.. IE에서만 CSS적용 IE에서만 CSS적용되도록/* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Enter your style code */ } /* IE6,7,9,10 */ @media screen and (min-width: 640px), screen\9 { /* Enter your style code */ } /* IE6,7 */ @media screen\9 { /* Enter your style code */ } /* IE8 */ @media \0screen { /* Enter your style code */ } /* IE6,7,8 */ @media \0screen\,screen\9 { /* Enter yo.. 이전 1 2 3 4 5 6 ··· 10 다음