728x90 300x250 SMALL 전체 글1098 제이쿼리 :: height값 구하기 하고 높이 값에 따른 메뉴바 변 지난번에 기록했던 특정위치의 높이 값까지 스크롤바를 내렸을 경우 클래스 추가해주는 스크립트 123456789101112131415 $(function(){ $(window).scroll(function(){ var navbar = $(this).scrollTop(); console.log(navbar); var $header = $('header'); if(navbar > 860){ $header.addClass('activated'); }else{ $header.removeClass('activated'); } }) }) Colored by Color Scriptercs 여기서 추가해서 이번에는 특정 엘리먼트의 높이 값을 구하고 그 값만큼의 위치까지스크롤바를 내렸을 경우 클래스가 추가되도록 바꿔보자 제.. 2018. 12. 4. 가변글꼴과 폰트 사이즈 em 간편하게 변경하기 폰트 사이즈- em : 부모 요소에서 지정한 폰트의 대문자M 너비를 기준으로 크기를 조절한다. 대문자 M의 너비를 1em으로 놓고 상대적으로 계산하는데 만약에 지정크기가 없다면 16px이 1em이 된다. font: 100% = 16px - rem : em 요소는 부모요소에 따라 사이즈계 계속 변경되기 때문에 계산이 복잡해 지는데 이런 단점을 극복하기 위해 만들어진 단위가 rem 이다 여기서 r은 루트를 뜻하며 맨 처음에 설정한 기본크기에 따라 적용되기 때문에 중간에 값이 변경되지 않고 계산하기도 편하디. 그러나 em으로 사용했을때는 확대시에 같은 비율로 늘어나고 줄어들지만 rem 단위는 결국 루트에 따라 고정된 값이라서 확대축소시에 비율이 깨진다는 얘기가 있다. - ex : x-height, 소문자 x의.. 2018. 12. 3. 헤더 상단에 내비게이션 바 스크롤 시에 배경 변화 주기 header 내비게이션 바 스크롤 내렸을때 특정 위치에서 클래스 넣어주는 스크립트 1234567891011121314 $(function(){ $(window).scroll(function(){ var navbar = $(this).scrollTop(); console.log(navbar); var $header = $('header'); if(navbar > 860){ $header.addClass('activated'); }else{ $header.removeClass('activated'); } }) }) Colored by Color Scriptercs 스크롤을 내릴경우 스크롤 값이 navbar 변수에 저장된다.헤더 값은 header 변수에 저장된다.navbar값이 860보다 클 경우헤더에 act.. 2018. 12. 2. 내 브라우저 html5 지원정도 테스트 [html5test] 자신이 사용하는 웹브라우저가 html5를 얼마나 지원하는지 알아볼 수 있습니다. http://html5test.com/ 위 주소로 들어가면 555점 만점을 기준으로 내 브라우저의 html5 지원정도를 알 수 있습니다. 상단에 other browsers를 클릭하면 다른 브라우저도 확인 가능합니다. 2018. 11. 29. 이전 1 ··· 268 269 270 271 272 273 274 275 다음 728x90 반응형 LIST
