netwareMore

scrollbar가 사라질 때 발생하는 layout shift 회피 요령

아래와 같은 CSS 코드를 설정하여 스크롤바(scrollbar)의 폭을  8픽셀(px)로 지정하여 사용하고 있습니다.가로와 세로 스크롤바에 모두 적용됩니다. ::-webkit-scrollbar { display: block; width: 8px; height: 8px; } sidebar와 같은 상위 레이어 팝업 창을 띄울 때,1. 일단 주위에 음영(dimm)을 주어 상위 레이어를 강조하고,2. 하위 레이어인 바탕 페이지가 마우스의 scroll에 반응하는 것을 막기 위하여 아래와 같은 코드를 사용합니다. body { overflow: hidden; } 이때 페이지의 구성에 따라서 layout shift라고 하는 화면 변동이 눈을 어지럽히는 경우가 있습니다. 스크롤바가 사라진 폭만큼 body 요소가 움직이기..

Grid Layout으로 사이트 링크와 관련 사이트 리스트 병합

사이트 링크 메뉴는 티스토리 스킨 북클럽의 소스 코드 이용 관련 사이트 메뉴는 티스토리 스킨 오딧세이의 소스 코드 이용 HTML 페이지에 사용한 티스토리 치환자 ** 티스토리 사이트의 서버가 비정상적으로 작동하여 치환자 소스 코드를 첨부하면 페이지에서 바로 실행됩니다. ** 불가피하게 소스 코드 대신 이미지 파일로 대체합니다. 추후에 서버가 정상화 되면 정상적인 코드를 등록합니다. ** 치환자 소스 코드의 ##를 **로 교체하여 실행을 막아 놓았습니다. ** 고객센터에 코드 블럭 실행 문제를 문의하였습니다. 아직 해결 안 된 상태입니다. ** CSS와 Javascript 코드는 정상입니다. 1. 현재 접속 페이지 종류 출력 치환자 [**_body_id_**] 위 코드가 아직도 실행되면 요렇게 보입니다. ..

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 ..

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

피부, 두피, 실리콘의 영향

지(루)성 피부와 두피 때문에 고생하고 있습니다. 실리콘과 같은 피부 차단 성분으로 인한 부정적인 영향이 있지 않을까 궁금하여 빙의 AI 검색 엔진에 질문하였습니다. 긍정적인 효과도 가능하겠지만 현대 사회가 광고 및 홍보에 지배당하는 느낌이 강하여 보이지 않는 뒷면을 찾아보고 싶은 생각에 부정적인 면을 조사합니다. 검색어는 "피부 두피 실리콘 악영향", 그리고 Bing AI의 답변입니다. 아래 붙여 넣기한 Bing의 답변을 구글에서 검색해 보았습니다. 단락 단위 검색입니다. 내용을 그대로 발췌했을 것으로 집작되는 소스를 알기 위한 목적이었습니다. 일치하는 겸색 결과를 찾을 수 없었습니다. 만약에 이 내용이 단순한 복사의 형태가 아닌 AI의 창작물일 경우 가능한 검색 결과라고 생각합니다. 피부와 두피에 실..

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') ..

갤럭시 워치5 와이파이 활성화 및 연결 방법

※ 이 글은 2023년 6월 현재 워치 내장 펌웨어 버전과 앱을 기준으로 작성하였습니다. 추후 버전 업그레이드에 의하여 새로운 기능이 적용되면 글의 내용은 실효성을 잃게 됩니다. 참고하시기 바랍니다. 삼성전자 워치5 블루투스 기종을 사용하고 있습니다. 이 제품은 워치에 내장된 블루투스를 폰과 연결하여, 공유된 폰의 네트워크 연결을 공유할 수 있습니다. 폰이 주위에 없을 경우, 워치5 (블루투스)로 네트워크에 연결하는 기능이 궁금하여 인터넷을 검색했습니다. 워치5의 설정 > 연결에 들어가니까 와이파이를 On/Off 할 수 있는 메뉴가 있었습니다. 워치5만으로 네트워크(와이파이) 연결이 가능하다는 뜻입니다. 와이파이 On 유지 조건 위에 첨부된 이미지는 삼성전자 홈페이지의 고객센터 글을 캡처한 것입니다. 워..

갤럭시 워치5

삼성전자 갤럭시 워치5 사용하게 되어 간단한 정보와 사진 기록합니다.아쉽게도 프로가 아닙니다. 프로의 시계 케이스는 티타늄입니다. 일반 버전과의 가격 차이가 10만 원 이상입니다. 그리고 프로에는 충전용 크래들이 포함되어 있습니다. 프로 밴드의 장착 부위가 분리되지 않기 때문에 충전할 때 필요합니다.삼성전자 페이지를 살펴보면 보다 자세하고 정확한 정보 확인 가능합니다. 삼성전자 > 제품 > 워치 > 워치5 ㉮ 갤럭시 워치5 프로- 45mm (해상도 450x450)- 사파이어 크리스털 글라스 디스플레이- 티타늄 바디 케이스- LTE or 블루투스- WI-FI, NFC, GPS- 컬러: 블랙 티타늄, 그레이 티타늄 ㉯ 갤럭시 워치5- 40mm / 44mm (해상도 각각 396x396 / 450x450)- 사..