HOW 19 구글 크롬 기준 특정 웹 사이트 이미지 로딩 차단 설정 How to block website Images by setting Google Chrome 특정 웹 사이트의 웹페이지에 첨부된 이미지의 로딩을 차단하는 방법 - 과도하게 첨부된 이미지를 차단하고 텍스트만 로딩하여 쾌적한 인터넷 로딩 속도로 유용한 정보를 취득할 수 있습니다. - 페이지에 첨부된 광고의 이미지 소스가 다른 사이트일 경우 광고 이미지는 차단되지 않습니다. - Google Chrome 브라우저 - Version 105.0.5195.127 (Official Build) (64-bit) 크롬 웹 브라우저의 오른쪽 3점 메뉴 버튼을 누릅니다. 펼쳐진 메뉴의 선택 항목 중에서 '설정'을 선택합니다. 설정 항목에서 '개인정보 및 보안'을 선택합니다. 개인정보 및 보안 항목에서 '사이트 설정'을 선택.. 2022. 9. 29. Flex 컨테이너의 수평 위치 중앙에 배치 flex 컨테이너 스크롤-바를 수평 위치 중앙에 배치하기 위하여 justify-content와 overflow를 동시에 설정할 때 발생하는 호환성 문제를 해결하는 방법입니다. 현재 사용 코드 #header { position: relative; max-width: 1366px; margin: 0 auto; } #gnb { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } ...... #gnb ul { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: nowrap; .. 2022. 1. 11. Centering Things (vertically) CSS로 텍스트와 이미지를 수평, 수직 방향 중앙에 배치하는 방법입니다. W3C 해당 페이지 링크 최초 입력 2001년 5월 1일 마지막 갱신 2021년 2월 6일 Flex, Grid 시스템 구조를 사용하지 않고 호환성을 유지하면서 CSS1~3 기본 코드를 조합하여 element의 위치를 조정하는 방법을 설명하고 있습니다. https://www.w3.org/Style/Examples/007/center.en.html#vertical Centering lines of text Centering a block of text or an image Centering a block or an image vertically Centering vertically in level 3 Centering verticall.. 2021. 11. 20. CSS로 '위 첨자'와 '아래 첨자' 입력 위 첨자: superscript 아래 첨자: subscript HTML 코드 한글위 첨자 한글위 첨자 한글아래 첨자 한글아래 첨자 CSS 코드 기본(디폴트) vertical-align: baseline; 위 첨자(superscript) vertical-align: super; 아래 첨자(subscript) vertical-align: sub; font-size를 'small'이나 'smaller' 값으로 지정하여 글자의 크기를 더 작게 만듭니다. px나 em 단위로 지정해도 되겠죠. Class 지정 방법 선택 .superscript { vertical-align: super; font-size: small; } .subscript { vertical-align: sub; font-size: small; .. 2021. 10. 17. 북클럽 스킨 커버 아이템 추가 및 오류 수정 / 커버 갤러리2 북클럽 스킨 "커버 갤러리2" 아이템의 오류 수정 방법 - 'skin.html' 코드 수정 - 'cover-thumbnail-4' - class="title" "커버 갤러리2" 아이템의 HMTL 코드 소스는 'skin.html' 파일의 "cover-thumbnail-4"에서 관리합니다. "커버 갤러리2" 아이템을 활성화시키면 글의 제목이 중복 표시되는 오류가 발생합니다. 위 캡처 이미지의 "" 코드가 1, 2 겹쳐서 반복되고 있습니다. 한 개의 코드 라인을 삭제하면 간단하게 문제는 해결됩니다. 1번을 삭제하면 이 글 상단에 등록한 캡처 이미지처럼 그림과 글에 약간의 여백이 설정되어 안정감 있는 모습을 보입니다. 그리고 티스토리 치환자 태그 사이에 위치하는 것이 정상적인 코드입니다. 2번을 삭제하면 그림과.. 2021. 10. 10. 웹 성능 최적화를 위한 LazyLoad 적용 이미지의 범위 뷰포트 근처의 이미지에는 LazyLoad를 적용하지 않는 것이 좋습니다. LazyLoad라는 웹 페이지 로딩 최적화를 위한 이미지 다운로드 및 출력 제어 방법에 관한 간단한 글을 올렸었습니다. 2021.06.20 관련 글 lazysizes 스크립트를 사용한 Lazy Load 오프스크린 출력, TechWrite, Translation (tistory.com) 위 글은 'lazysizes'라는 스크립트를 이용 방법을 설명합니다. 적용 방법은, 태그에 'class=lazyload'를 추가하고 'src='를 'data-src='로 변경하는 것입니다. 페이지의 모든 이미지에 LazyLoad를 적용하니까 텍스트는 빠르게 출력이 되는데, 뷰포트 범위의 사정권(?)에 있는 로고 이미지, 네비게이션바의 버튼 이미지, 심.. 2021. 10. 3. 북클럽 스킨 사이드바의 '로그인'과 '로그아웃' 오류 수정 티스토리 블로그의 북클럽 스킨의 코드 오류를 수정하는 방법입니다. 모바일 접속할 때 팝업 창으로 뜨는 사이드바의 '로그인'과 '로그아웃'이 오류 수정 대상입니다. 텍스트로 링크되어 있는 이 버튼은 눌러도 반응이 없습니다. 블로그 관리자가 로그인한 상태이면 '로그아웃' 버튼이 보이고, 관리자가 로그인하지 않았으면 '로그인' 버튼이 보입니다. 오류가 발생하는 이유 아래 코드는 북클럽 스킨의 자바스크립트를 담고 있는 파일에서 복사한 오류 발생 부분입니다. 북클럽 스킨의 자바스크립트 코드는 'script.js' 파일에 담겨 있습니다. $profile.on("click", ".login", function(){ document.location.href = 'https://www.tistory.com/auth/lo.. 2021. 9. 23. Book Club 스킨 NavBar 'current' 표시 형태 수정 $(window).load(function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){ $(this).addClass("current"); } }); $gnb.find("ul").width(gnbWidth); if ( $gnb.width() < $gnb.find("ul").width() && $gnb.find(".current").length ){ var scrollPos = $gnb.find(".current").prev().length ? $gnb.find(.. 2021. 8. 24. 티스토리 블로그 애드핏과 애드센스에 'ADVERTISEMENT' 광고 표시 부착 티스토리 블로그에 올리는 애드핏, 애드센스 광고에 해당 이미지나 글이 홍보를 목적으로 하는 내용이라는 표식을 부착하는 방법입니다. 외국의 일부 국가에서는 의무적으로, 관습적으로 혹은 자발적으로 해당 콘텐츠가 광고라는 것을 표시하는 것 같습니다. 국내의 특정 콘텐츠 마케팅 업체의 광고에도 이러한 표식을 부착하는 곳이 있습니다. 애드핏과 애드센스의 국내 광고는 표시하지 않습니다. 표시 문구는 'AD' 혹은 'ADVERTISEMENT'를 많이 사용합니다. 부착하면 장점보다는 단점이 많을 것 같습니다. 각자 판단하여 필요하신 분은 사용해 보세요. 단점은 너무 많으니까 나열할 필요도 없을 것 같습니다. 장점 중의 하나는 위 이미지에 표시한 것과 같이 'ADVERTISEMENT' 문구가 빠르게 로딩된다는 것입니다... 2021. 8. 15. 구글 애드센스 블로그 홈 화면에서 제외 구글에 웹 페이지 로딩 속도, 시인성 등 여러 가지 사용자 접속 환경을 정밀하게 측정하는 PageSpeed Insights라는 도구가 있습니다. 블로그의 수정이 잦으니까 가끔 알 수 없는 오류가 발생하기도 하고 이 도구의 측정 점수가 뚝 떨어지기도 합니다. 심쿵하기도 하고 다시 복구해야 하는 데 마음이 편하지 않습니다. 자주 하니까 짜증이 나는 거죠. 편하게 모든 과오는 블로그에 붙여 놓은 애드센스와 애드핏 배너 광고의 탓으로 돌립니다. 블로그 첫 페이지(홈 화면)에서 광고를 제거하면 측정 점수가 잘 나오고 처음 접속자가 쾌적하게 블로그 구독을 시작할 수 있습니다. 거기에 덧붙여 구글에서 검색 순위를 높여준다는 확인되지 않은 소문도 있습니다. 일단 고득점만 하면 됩니다. 인덱스, 본문 페이지는 나중에 따.. 2021. 8. 11.
