본문 바로가기

공부하기/web

jquery 각 컨텐츠 높이 구하기 -> 배열에 넣 slide_list ... ... ... ... ... ... ... ... ... ... .offset() var _offset_arr = []; $("div[id^=slide_list]").each(function(){ _offset_arr.push($(this).offset()); }); console.log(_offset_arr); .push($(this).offset()); var _offset_arr = []; $("div[id^=slide_list]").each(function(){ _offset_arr.push($(this).offset()); }); console.log(_offset_arr);
jquery fixed 헤더 가로스크롤 처리 주로 헤더로 많이 쓰이는 fixed 상단에 위치가 고정 윈도우 창을 작게 했을경우, 가로로 스크롤을 해보면 콘텐츠와 함께 스크롤이되지않는다. window에 스크롤 이벤트 스크립트로 처리 // gnb fixed horizontal scroll issue $(window).scroll(function(){ $('.fixed-top').css('left', 0-$(this).scrollLeft()); });
meta og (오픈 그래프 open graph)태그에 대해서. meta og태그 (Open Graph Tag)에 대해 알아보자. 샘플 코드 ex) 이렇게 URL 링크를 공유했을 때, URL만 공유했지만, 제목, 이미지, 설명, 주소등이 함께 보여진다. 여기서 보여지는 콘텐츠들을 다룰 수 있게 해주는 것이 바로 og (오픈 그래프) 태그다. meta tag (메타 태그) 란?! HTML에 적용되는 특성, 기본정보를 작성하는 태그이다. This is a heading This is a paragraph. Try i" data-og-host="www.w3schools.com" data-og-source-url="https://www.w3schools.com/tags/tag_head.asp" data-og-url="https://www.w3schools.com/tags/t..
코드펜 codepen - HTML CSS Javascript 코드 테스트 / 미리복 코드펜 : https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 코드펜 CodePen 주로 HTML, CSS, Javascript 코드를 테스트할 때 사용하며, 블로그에 소스와 미리보기를 퍼올 때 사용할 수 있다. - 홈페이지 화면 코드펜 사용법. 주로, 코드펜에서 작성한 소스코드 미리보기를 블로그에 가져오는 것으로 많이 사용한다. - 블로그 (티스토리)에 소스코드 미리보기 가져오기. 1. 로그..
웹에서 사용할 수 있는 기능인가 체크 : 캔아이유즈 caniuse https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu caniuse.com 예를 들면, CSS의 grid 기능을 웹브라우저에서 사용할 수 있는지 확인하려면_?! 캔아이유즈에서 확인하..