netwareMore

Grid를 이용한 column과 row 변환 코드, Bing AI 질문

grid를 처음 공부하면서 블로그 코드를 변경하고 있는 중입니다. grid가 flex에 비하여 상당히 복잡합니다. 단기간에 익히기에는 좀 부담이 되어 모르는 부분은 Bing Chat(AI)의 도움을 받으면서 CSS 코드를 작성하고 있습니다. 반영하려는 웹 페이지의 디자인은 다음과 같습니다. 페이지의 폭이 넓을 때: column + gap + column 페이지의 폭이 좁을 때: row 1개, less than 500px width Bing Ai에 질문합니다. "How to set grid width, to be full width rows when the full width is less than 500px and to be 40% width 2 columns when the full width is m..

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 내용은 스택오버..

text-overflow와 (inline-)block의 문제 해결

.article-link p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} 문자(text) 행(line)의 길이가 컨테이너 박스의 가로 폭을 초과할 경우에, 폭에 맞추어 잘라내고(truncate) 말 줄임(ellipsis) 처리하는 방법입니다. CSS의 text-overflow 설정 값으로는 ellipsis, clip, string, initial, inherit을 사용합니다.  말줄임표(ellipsis)를 사용하여 초과하는 문자를 잘라낸 모습입니다. 한글 맞춤법의 말줄임표 부호 "......"와 형태가 다릅니다. 아래와 같이 임의로 지정 가능합니다. text-overflow: ellipsis " [..]";text-overflow..

블로그 스킨의 자바스크립트 수정 코드에 대한 MS Bing AI 설명

const marks = document.querySelectorAll('#content .marker');window.addEventListener('scroll', function() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; document.body.classList.toggle('roll', scrollTop > 400); for (const ele of marks){ let elementTop = ele.getBoundingClientRect().top; if ( elementTop 24 && ele.classList.contains('pin') ..

웹브라우저의 타사 쿠키 차단 설정

주로 사용하는 웹브라우저의 설정을 들어가니까 "타사 쿠키 차단(Block third-party cookies)"이라는 항목이 있습니다. 현재 접속 사이트 외에 다른 사이트의 쿠키 설정을 차단하는 옵션입니다. 용어 설명 쿠키(cookies)는 사용자가 사이트에 접속했을 때 저장하는 사용자 관련 정보입니다. 직접 접속한 사이트, 사용자가 방문한 사이트, 혹은 일반적으로 주소표시줄에 표기되는 도메인과 연결된 쿠키를 구글 크롬에서는 퍼스트 파티 쿠키(first-party cookies)라고 부릅니다. 현재 방문한 사이트의 웹 페이지에 다른 사이트의 콘텐츠를 부착하여 표시할 경우에, 해당 콘텐츠를 소유한 도메인에 의하여 생성되는 쿠키를 구글 크롬에서는 서드 파티 쿠키(third-party cookies)라고 부르..

뱅킹 보안 프로그램과 키보드 입력 충돌

태블릿 계열의 노트북을 사용합니다. 마이크로소프트 서피스 랩탑과 유사한 형태의 레노버 Miix이며, 용도에 따라서 키보드를 착탈하여 태블릿과 노트북을 겸용할 수 있는 작은 기기입니다. 터치 스크린 패널이 디스플레이 앞에 부착되어 있습니다. 최근 사용 중 키보드 입력이 안되고 디스플레이에 "화면 회전 설정" 알림 메시지가 갑자기 뜨는 야릇한 오류가 발생합니다. 얼마 전, 국내 인터넷 뱅킹에 필수인 보안 프로그램을 설치한 후 이런 증상이 출현하였습니다. 기기를 사용할 때 키보드의 연결 형태를 변경하거나 유선 마우스를 제거 또는 부착하는 등의 입력 디바이스의 변경이 발생하면 해당 오류가 발생합니다. 다시 원래의 형태로 되돌려도 오류가 복구되지 않아서 기기를 다시 부팅시키면 정상으로 돌아옵니다. 기기를 다시 부..

티스토리 카테고리의 새로운 글 아이콘 변경하는 방법

티스토리에 (댓글 아니고) 새로운 글을 등록하면 카테고리에 글이 등록되었다는 "N"자 아이콘이 새롭게 표시됩니다. 위 이미지를 기준으로 하여, 전체 글("글 모음"), 메인 카테고리("IT"), 서브 카테고리("티스토리") 3군데 아이콘이 나타납니다. 만약에 메인 카테고리만 사용한다면 2군데 표시가 되겠죠. 자신이 원하는 다른 이미지가 표시되도록 변경하는 방법 설명합니다. 1. 사용할 아이콘을 업로드합니다. 티스토리에서는 업로드한 이미지는 자동으로 "images" 폴더로 이동합니다. 2. style.css에 필요한 코드를 추가하고 업로드합니다. 사용하는 코드는 아래와 같습니다. 개인 사용 환경에 맞게 수정하면 됩니다. /* style.css에 추가하는 코드 */ #category li a img { bo..

구글 애드센스의 광고주 URL 차단 기능 변경

구글 애드센스 계정에 들어갔더니 2개의 알림 메일이 있습니다. 오늘 글은 "알림: 3일 후 하위 도메인 차단 기능이 도메인 수준으로 승격됩니다."가 무슨 말인지 확인하는 과정을 서술합니다. 알림 메시지의 아래에는 "작업" 링크가 있습니다. 알림의 내용이 어려워서 이해가 힘든 경우 들어가서 정확한 뜻을 확인하고 알맞은 대응 방안을 생각하라는 것입니다. 하위 도메인에 적용하던 기존의 차단 관리 기능을 도메인 수준으로 승격하겠다는 의미인 것 같습니다. 왜, 어떤 사유로 도메인을 차단하는 기능을 변경하는 것인지 그리고 어떤 도메인을 차단하는 것인지 자세한 내역이 명시되어 있지 않습니다. 구글에서 관련 내용에 사용한 단어를 조합하여 검색을 시도합니다. 검색어는 "하위 도메인 차단 기능". 위와 같이 검색 결과의 ..

구글 크롬의 유튜브 동영상 재생 오류 복구

유튜브에서 동영상을 볼 때 제대로 재생이 되지 않는 경우가 있습니다. 그럴 때 사용할 수 있는 한 가지 해결 방법 공유합니다. 동영상 재생 오류가 발생하는 것은 간단하게 생각해도 몇 가지 직접적인 요인을 추론할 수 있습니다. - 컴퓨터나 그래픽 하드웨어의 불량 - 그래픽 카드, 칩, 혹은 CPU 내장 그래픽 코어를 구동하는 데 필요한 드라이버의 오류나 호환성 부족 - 동영상 압축에 사용된 코덱의 버그나 플레이어와의 호환성 문제 - 유튜브 서버가 지원하는 필요한 동영상 제작의 문제 위의 문제 발생 가능 요인은 개인마다 다르므로 평소에 점검을 해야 합니다. 이 페이지에서는 사용한 웹 브라우저 크롬의 설정을 변경하는 방법으로 문제를 해결할 것입니다. 문제가 발생한 크롬 브라우저 앱의 정보입니다. 업데이트를 빠..

Avast 백신 고객 센터를 가장한 스팸 피싱 메일

Gmail 받은 편지함에 들어온 스팸 메일입니다. 피싱 메일일 수도 있고요.발신자도 동일한 Gmail 계정 소유자이며 계정 명칭이 barrett로 시작합니다. 발송인 본인 계정일 수도 있고 해킹 당한 메일 계정일지도 모릅니다. 악성 바이러스에 대한 백신 프로그램으로 한 때 세계 1위의 점유율을 자랑하던 Avast 가장하고 있습니다. Thank you for your order에 #RU574219xxxxx와 같은 숫자가 붙었으므로, 백신 구입에 대한 감사 인사와 함께 주문 번호를 알려 주는 것입니다. 그럴싸하게 고객센터에서 발송한 메일을 가장합니다. Avast 고객센터의 메일 서버에서 발송한 것이 아니므로 99% 스팸 메일로 단정하고 혹시 아닐 수도 있다는 1%의 가능성을 없애기 위하여 조금 더 살펴봅니다..