IT163 구글 Chrome 텍스트 크기 렌더링 오류 모바일 기기(안드로이드)의 구글 Chrome 브라우저에서 텍스트 렌더링 결과가 font-size 지정과 무관한 오류 현상을 보이고 있습니다. 동일 페이지의 상단과 하단의 폰트 크기가 다르게 나타납니다.[추가] 2024.09.26글자의 크기만 확대하기 때문에, 글줄의 높이를 "line-height"로 지정할 경우 글자의 상하 여백이 줄어듭니다. 즉 행간이 사라지는 것과 같은 현상이 발생합니다.코드 오류로 인한 앱의 버그를 단기간 확실하게 수정할 수 있는 능력이 없으면서, AI를 표방하는 것은 모두 IT 관련 기업의 과장된 광고 술수입니다. 잘못된 AI로 인하여 발생하는 피해는 통제 불가능핳 정도로 위험한 수준이 될 수 있습니다. PC의 Chrome 브라우저에서는 해당 증상 발생하지 않습니다. 기기 ㉮: .. 2024. 9. 5. 댓글 google adsense 광고에 적용하는 inline CSS code 예제 Google Adsense Help / Ad units의 다음 페이지 참고"How to modify your responsive ad code"다음 작업은 html 파일에 관련 코드를 추가하는 요령입니다. 티스토리 배포 스킨에서는 'skin.html' 파일을 수정합니다. 1. 애드센스 개별 광고(display ad unit) 페이지에서 제공하는 코드를 위한 클래스를 지정합니다. 아래 예문에서는 "ads_aside" 클래스를 추가하였습니다. 블로그 사이드바에 부착하는 광고라서 위치 확인이 편한 이름을 사용하였습니다. 2. 위에서 지정한 클래스를 위한 CSS style 코드를 추가합니다. ※ 애드센스에서 제공하는 개별 광고의 기본 코드에 지정한 style 항목과 충돌하지 않게 조심합니다. 2024. 8. 27. 댓글 DISM 명령어로 Windows 이미지 복구 DISM.exe [dism_options] {Imaging_command} [] DISM.exe {/Image: | /Online} [dism_options] {servicing_command} [] 설명 DISM에서 Windows 이미지의 기능 및 패키지를 열거, 설치, 제거, 구성 및 업데이트 사용할 수 있는 명령은 서비스되는 이미지에 따라 다름 사용할 수 있는 명령은 이미지가 오프라인 또는 실행 중인지에 따라 다름 FFU 명령/Capture-Ffu 실제 디스크 이미지를 새 FFU 파일로 캡처 /Apply-Ffu .ffu 이미지 적용 /Split-Ffu 기존 .ffu 파일을 여러 개의 읽기 전용 FFU 파일로 분할 /Optimize-Ffu 다른 크기의 저장소에 적용할 수 있도록 FF.. 2024. 6. 4. 댓글 CSS border width 지정 값과 디스플레이 불일치 이유 블로그 웹 페이지의 하나의 요소에 상하 border 값으로 각각 1px로 설정하였습니다.크롬 웹 브라우저를 띄우고 개발자 도구로 확인하니까 위의 캡처 이미지와 같이 0.727픽셀로 표시됩니다.CSS 파일에 "border: 1px"로 지정한 내역이 반영되지 않은 것입니다. 웹 브라우저와 사용하는 기기의 OS 설정 값을 조사하고, 변경하면서 결과를 눈으로 확인하면서 이유를 찾았습니다.일단, 웹 브라우저의 화면 확대 및 축소 그리고 기기의 OS에서 설정하는 글자 크기 설정과 화면 확대 및 축소 기능에 영향을 받는다는 것을 확인하였습니다.1. OS(MS Windows 11)의 시스템 / 디스플레이 설정 값 변경 ① 텍스트 및 기타 항목의 크기 변경② 연결된 디스플레이의 해상도 변경- 기본 값으로 100%와 모니.. 2024. 5. 3. 댓글 티스토리 스킨의 네임카드 CSS 코드 수정 수정이 필요한 서버 파일 comment.css의 네임카드 관련 코드 /* https://tistory1.daumcdn.net/ ... /style/comment.css */.tt_box_namecard { display: flex; justify-content: space-between; position: relative; min-height: 206px; background-color: #F7F7F7; margin-top: 20px; margin-bottom: 20px;}.tt_box_namecard .tt_btn_subscribe { display: flex; align-items: center; justify-content: center; height: 36px; margin-.. 2024. 4. 25. 댓글 CSS backdrop-filter, MS Edge에서 작동 오류 실행 환경: 윈도우 11(PC), 마이크로소프트 엣지 123.0.242081임시 복구: 엣지의 설정 / 시스템 / "사용 가능한 경우 그래픽 가속 사용" 변경 ※ "그래픽 (하드웨어) 가속 기능" 활성화시키면 유튜브 일부 동영상 재생할 때 끊김 현상이나 이미지가 일그러지는 사례가 발생할 수 있습니다. ※ 핸드폰과 같은 모바일 환경의 웹 브라우저에서는 필터 기능 정상입니다. .filter { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); background-color: rgba(0,0,0,0.3);} 웹 페이지에 반투명한 간유리 효과를 주는 backdrop-filter입니다.구글 .. 2024. 4. 9. 댓글 Chromium 엔진 기반 웹 브라우저 버그 구글 Chromium 오픈 소스 프로젝트 기반 엔진을 사용하는 웹 브라우저 Microsoft Edge와 Google Chrome에서 페이지 렌더링에 오류가 발생하고 있습니다. Chromium의 버그로 추측하며, 최근 AI 기능 접목을 위한 브라우저 소스 코드 개편 과정의 코딩 실수가 누적되고 있는 것으로 짐작하고 있습니다. ※ Naver 웨일(Whale)도 Chromium 기반 엔진을 사용하고 있습니다. 웨일 최신 버전(3.25.232.19)에는 크로미움 122 업데이트가 적용되어 있으며, 마이크로소프트 엣지와 구글 크롬에서 발생하는 페이지 렌더링 오류가 발생하지 않습니다. 크로미움의 버전 차이가 있는지는 확인이 안되고 있습니다. 하나의 버그로 그치지 않고 다양한 이상 증상이 나타나고 있습니다. IT 기.. 2024. 3. 16. 댓글 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 요소가 움직이기.. 2024. 2. 19. 댓글 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. 댓글
