JavaScript12 Grid Layout으로 사이트 링크와 관련 사이트 리스트 병합 사이트 링크 메뉴는 티스토리 스킨 북클럽의 소스 코드 이용 관련 사이트 메뉴는 티스토리 스킨 오딧세이의 소스 코드 이용 HTML 페이지에 사용한 티스토리 치환자 ** 티스토리 사이트의 서버가 비정상적으로 작동하여 치환자 소스 코드를 첨부하면 페이지에서 바로 실행됩니다. ** 불가피하게 소스 코드 대신 이미지 파일로 대체합니다. 추후에 서버가 정상화 되면 정상적인 코드를 등록합니다. ** 치환자 소스 코드의 ##를 **로 교체하여 실행을 막아 놓았습니다. ** 고객센터에 코드 블럭 실행 문제를 문의하였습니다. 아직 해결 안 된 상태입니다. ** CSS와 Javascript 코드는 정상입니다. 1. 현재 접속 페이지 종류 출력 치환자 [**_body_id_**] 위 코드가 아직도 실행되면 요렇게 보입니다. .. 2024. 2. 15. 댓글 jQuery "$(window).scrollTop()", Javascript "window.scrollY" 비교 $(window).scrollTop() and window.scrollY are both used to determine the vertical scroll position of a web page. However, there are some differences between them. $(window).scrollTop() is a jQuery method that returns the current vertical position of the scroll bar for the first element in the set of matched elements or sets the vertical position of the scroll bar for every matched element. It is .. 2024. 1. 21. 댓글 Javascript arrow function (=>), this 구문 오류 자바스크립트 화살표(=>) 함수를 사용할 때, 이벤트 리스너가 부착된 DOM 요소를 지정하기 위하여 this를 사용하면 오류가 발생할 수 있으므로 event.currentTarget을 사용해야 합니다.현재 실행 중인 이벤트 리스너가 부착된 DOM 요소를 지칭할 때에는 "event.currentTarget" When a code runs after an event takes place, this is known as registering an event handler. On the other hand, the event listener listens to the event and then triggers the code for handling the event. [출처] TechTarget 내용은 스택오버.. 2023. 10. 19. 댓글 (function () {})(); (function () { /* ... */ })();(function () { /* ... */ }());(() => { /* ... */ })(); a regular functionfunction () {}+ function call();IIFE- Immediately-Invoked Function Expression- It executes immediately after it’s created.It was popular in JavaScript as a method to support modular programming before the introduction of more standardized solutions such as CommonJS and ES modules. Immediately i.. 2022. 8. 29. 댓글 웹 성능 최적화를 위한 LazyLoad 적용 이미지의 범위 뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다. LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다. 2021.06.20 관련 글lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com) 위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은, 태그에'class=lazyload'를 추가하고 'src='를 'data-src='로 변경하는 것입니다. 페이지의 모든 이미지에 LazyLoad를 적용하니까 텍스트는 빠르게 출력이 되는데, 뷰포트 범위의 사정권(?)에 있는 로고 이미지, 네비게이션바의 버튼 이미지, 심벌 .. 2021. 10. 3. 댓글 Position Sticky를 구현하는 Fixed JS 코드 4차 수정본 2021.04.19 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2021.06.10 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 2021.06.13 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 2021.10.05 - [IT/코딩 Javascript] - Position Sticky를 구현하는 Fixed JS 코드 활용 4차 수정 코드 const nav = document.getElementById('main-header'), rectTop = nav.offsetTop, tmp = nav.cloneNo.. 2021. 9. 28. 댓글 Book Club 스킨 홈 커버 아이템 오류 수정 코드 작성자: openperl@naver.com 블로그: netwaremore, TechWrite, Translation (tistory.com) 2021.08.14 - 더보기 숫자 표시 부분 스크립트 파일 오타 교정 - 수정한 첨부 파일 등록 2021.07.27 - 더보기 버튼에 숨긴 글 숫자 추가 ※ 코드에 오류가 있을 경우 댓글 남겨 주시면 많은 도움이 됩니다. 오류 발생 원인 1. 조건식 오류 if ( $item.length > 4 ){ $item.each(function(){ if ( $(this).index() > 4 ) $(this).hide(); }); $cover.append('more'); $cover.on("click", ".more", function(){ $(this).remove.. 2021. 7. 20. 댓글 IT와 블로그 관리에 도움이 되는 외부 페이지 개인 링크 Web Font Loader Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-develope.. 2021. 7. 5. 댓글 lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력 Github / aFarkas / lazysizes / README.md 'lazy load'는 웹페이지의 리소스를 전송 즉시 모두 화면에 출력하기보다는 필요할 때까지 페이지 출력을 기다리는 접근 방법입니다. 페이지를 스크롤하면 대기했던 이미지가 로딩되는 웹페이지가 대표적인 적용 사례입니다. 하나의 페이지가 담고 있는 리소스를 한 번에 모두 출력하지 않고 필요한 만큼만 나누어 출력하기 때문에 페이지 로딩 속도와 성능을 개선할 수 있습니다. 다운로드한 이미지 파일들은 캐시 메모리에 저장되어 있습니다. 이것을 로딩 시간은 잠깐 늦추어 뷰포트에 보이지 않다가 나중에 필요할 때 불러내므로 "offscreen images"라는 용어를 사용합니다. 이미지 파일, 특히 고해상도에 용량이 큰 사진을 많이 제공하는.. 2021. 6. 20. 댓글 Position Sticky를 구현하는 Fixed JS 코드 3차 수정본 1. 원글: Position Sticky를 구현하는 Fixed JS 코드 오류 수정 2. 수정: Position Sticky를 구현하는 Fixed JS 코드 2차 수정본 3. 수정: 본문 4. 수정: Position Sticky를 구현하는 Fixed JS 코드 4차 수정본 5. 활용: Position Sticky를 구현하는 Fixed JS 코드 활용 2, 3차 수정 코드 비교하고 간단한 설명 덧붙입니다. ※ The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent.. 2021. 6. 13. 댓글
