IT 159 구글 크롬 기준 특정 웹 사이트 이미지 로딩 차단 설정 How to block website Images by setting Google Chrome 특정 웹 사이트의 웹페이지에 첨부된 이미지의 로딩을 차단하는 방법 - 과도하게 첨부된 이미지를 차단하고 텍스트만 로딩하여 쾌적한 인터넷 로딩 속도로 유용한 정보를 취득할 수 있습니다. - 페이지에 첨부된 광고의 이미지 소스가 다른 사이트일 경우 광고 이미지는 차단되지 않습니다. - Google Chrome 브라우저 - Version 105.0.5195.127 (Official Build) (64-bit) 크롬 웹 브라우저의 오른쪽 3점 메뉴 버튼을 누릅니다. 펼쳐진 메뉴의 선택 항목 중에서 '설정'을 선택합니다. 설정 항목에서 '개인정보 및 보안'을 선택합니다. 개인정보 및 보안 항목에서 '사이트 설정'을 선택.. 2022. 9. 29. 구글 애드센스 광고 용어 정리 구글 애드센스 고객센터의 도움말 센터에서 제공하는 용어집의 내용 일부를 간추렸습니다. [링크] 구글, 애드센스, 고객센터, 도움말 센터, "용어집" 이해하기 편하게 원문을 수정하였습니다. 그리고 일부 영문 표기는 구글 검색과 용어집 영문판의 내용을 참고하였습니다. 정리하는 과정의 부주의와 무지로 인한 오류가 발견될 수 있습니다. 정확한 내용은 위 링크 참고 CPC - 클릭당 비용, cost-per-click - cost / click - 광고 1회 클릭으로 게시자가 벌어들이는 금액 ※ 광고의 CPC는 전적으로 광고주가 정하는 것이며, 광고하는 제품에 따라 광고주가 클릭당 지불하려는 금액이 달라집니다. CPM (광고) - 1,000회 노출당 비용 - cost per mille, or cost per tho.. 2022. 9. 23. FireFox에서 flex-wrap과 overflow의 호환성 부족 해결 사례 #aside .inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; overflow-y: auto; /* 문제의 원인 */ "#aside .inner"는 flex 컨테이너이며, 2개의 박스 a와 b를 담고 있습니다. 컨테이너는 상하(y축) 스크롤됩니다. "flex-wrap: wrap" 설정을 집어넣어 컨테이너의 폭이 여유가 있을 경우 가로로 2개의 박스를 배열하고, 폭이 좁을 경우 세로로 박스를 배열합니다. MS Edge와 Google Chrome은 가로, 세로 배치가 정상으로 전환되지만, Mozilla FireFox는 세로로만 배열됩니다. Microsoft Ed.. 2022. 9. 19. 티스토리 블로그 로그인 오류 "지금 이 페이지가 작동하지 않습니다." 제 경우에는 카카오계정, 티스토리 계정 모두 로그인 안되고 위의 오류 메시지 떴습니다. 현재는 여러 가지 방법을 시도하다가 가까스로 카카오계정으로 로그인 성공하였습니다. 티스토리 로그인 서버에서 오류가 발생하여 복구한 것일지도 모릅니다. 어쨌든 위와 같은 오류 메시지가 뜰 때, 계정 관리자가 시도할 수 있는 방법이 있어서 기재해 놓겠습니다. HTTP ERROR 400 The Internet Engineering Task Force (IETF)의 정의 rfc7231 (ietf.org) The 400 (Bad Request) status code indicates that the server cannot or will not process the request due to something that is p.. 2022. 9. 16. viewport maximum-scale, minimum-scale document root element element element element attribute "href" element element text "my title" text "my link" text "my header" 더보기 The element is a container for meta-data(a set of data that describes and gives information about other data) and is placed between the tag and the tag. HTML 문서 요소의 viewport 설명 ① minimum-scale=1.0 maximum-scale=1.0 접속자가 컨텐트를 뷰포트 기준 100%(1.0)까지 확대 및 축소할 수 있게 설정하였습니다. .. 2022. 9. 8. 북클럽 스킨 "포인트 컬러(point-color)" 변경 북클럽 스킨의 "skin.html" 파일의 상단에는 1개의 링크와 2개의 헤더 숫자의 색을 지정하는 CSS 스타일 설정 구문이 있습니다. 1. 글 본문 텍스트 링크(".entry-content a") 2. 글 리스트 제목의 개수(".post-header h2 em") 3. 댓글 제목의 개수(".comments h2 .count") 모두 동일한 색으로 지정하는 것입니다. 위의 이미지에서 사용한 파란색은 "#0150FE"입니다. 북클럽 스킨 skin.html의 색 설정 코드 .entry-content a, .post-header h2 em, .comments h2 .count {color:} .comment-form .submit button:hover, .comment-form .submit button:.. 2022. 8. 30. (function () {})(); (function () { /* ... */ })(); (function () { /* ... */ }()); (() => { /* ... */ })(); a regular function function () {} + 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. Imme.. 2022. 8. 29. 마이크로소프트 엣지 메모리 관리 이상 증상 윈도우 10에서 사용하는 웹브라우저 Edge, 버전 104.0.1293.54에서 메모리가 정상적으로 반환되지 않는 증상이 발생합니다. 2022년 8월 18일 현재 최신 버전입니다. 아래 이미지는 엣지 웹브라우저를 사용하여 제 블로그("netware.tistory.com")를 접속하고 일정 시간을 사용하고 개발자 도구를 실행하여 현재 메모리 사용 상태를 캡처한 이미지입니다. 개발자 도구(DevTools)의 릴리즈 번호는 따로 없고 Edge 번호에 대응하는 것으로 추측합니다. 현재 104입니다. 엣지 개발자 도구의 성능 모니터가 제공하는 화면의 각종 정보 왼쪽: 처음 접속 상태 오른쪽: 일정 시간 사용 후 메모리가 반환이 안된 상태 Edge가 정상적으로 작동하는 상태에서는 왼쪽 화면의 수치에 근접하여 CPU.. 2022. 8. 18. 티스토리 블로그의 글 검색 기능과 카테고리의 연결 구조 https://netware.tistory.com/225?category=987855 블로그에 등록한 225번 글이며 카테고리 987855의 인터넷 주소입니다. 987855는 카테고리 "코딩 CSS"의 번호입니다. https://netware.tistory.com/225 카테고리 정보 없이 글 번호 225에 해당하는 인터넷 주소입니다. 위 2개의 주소 모두 동일한 글을 웹브라우저에 열어서 보여 줍니다. 이 글과 연결된 정보를 제공할 때에는 카테고리 정보의 유무 때문에 다른 범위의 관련 정보를 제시합니다. 티스토리 스킨 가이드의 "글 치환자" 페이지, "이전 글 / 다음 글" 치환자 설명입니다. 이 치환자 설명을 응용하여 다음과 같은 코드를 글에 추가하여 이전 글과 다음 글에 대한 링크를 만들 수 있습니다.. 2022. 6. 27. 구글 adsense margin 오류 수정 .revenue_unit_wrap { margin-top: 20px; margin-bottom: 20px; } 티스토리 블로그에서 보여 주는 구글 애드센스 광고 CSS 코드를 개발자 도구로 살펴보았습니다. 상, 하 각각 20픽셀의 마진을 주어 본문의 내용과 거리를 두고 있습니다. 간단하게 그리면 아래와 같은 구조를 이루게 됩니다. block element인 "wrap" 안에 그리고 "container" 안에 배치하였습니다. "container" 박스 안의 마지막 개체이므로 애드센스 광고 하단의 20px margin이 "container" 하단 경계선과 접합니다. 아래 그림은 구글 크롬, 마이크로소프트 엣지, 그리고 Mozilla Foundation의 Firefox 브라우저들에서 렌더링 된 실제 모습을 간.. 2022. 6. 21.
