IT/코딩 CSS30
구글 Chrome 텍스트 크기 렌더링 오류
모바일 기기(안드로이드)의 구글 Chrome 브라우저에서 텍스트 렌더링 결과가 font-size 지정과 무관한 오류 현상을 보이고 있습니다. 동일 페이지의 상단과 하단의 폰트 크기가 다르게 나타납니다. [추가] 2024.12.17오류 발생하지 않고 정상 출력* 모바일 Chrome 버전 131.0,6778.260에는 아래와 같은 텍스트 관련 옵션들이 있습니다.1. 방문하는 사이트의 텍스트 및 이미지 확대 또는 축소가 가능한 "기본 확대/축소" 기능2. 웹사이트의 확대 방지 요청을 무시하는 "확대/축소 강제 사용" 선택 기능이 2개의 옵션은 모바일 기기 자체의 설정 기능인 "글자 크기와 스타일" 및 "화면 크게/작게"와 함께 사용할 경우 여전히 오류 발생 가능합니다. 데스크탑의 디스플레이 크기와 달리 모바일..
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 항목과 충돌하지 않게 조심합니다.
CSS border width 지정 값과 디스플레이 불일치 이유
블로그 웹 페이지의 하나의 요소에 상하 border 값으로 각각 1px로 설정하였습니다.크롬 웹 브라우저를 띄우고 개발자 도구로 확인하니까 위의 캡처 이미지와 같이 0.727픽셀로 표시됩니다.CSS 파일에 "border: 1px"로 지정한 내역이 반영되지 않은 것입니다. 웹 브라우저와 사용하는 기기의 OS 설정 값을 조사하고, 변경하면서 결과를 눈으로 확인하면서 이유를 찾았습니다.일단, 웹 브라우저의 화면 확대 및 축소 그리고 기기의 OS에서 설정하는 글자 크기 설정과 화면 확대 및 축소 기능에 영향을 받는다는 것을 확인하였습니다.1. OS(MS Windows 11)의 시스템 / 디스플레이 설정 값 변경 ① 텍스트 및 기타 항목의 크기 변경② 연결된 디스플레이의 해상도 변경- 기본 값으로 100%와 모니..
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입니다.구글 ..
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를 이용한 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..
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..
티스토리 오버레이 창의 스크롤 기능 수정
오버레이 팝업창에서 스크롤할 때 바닥에 가려진 본문의 스크롤 기능을 일시 정지시키는 방법입니다. 본 블로그에 적용한 것이므로 다른 사이트에 사용할 경우 약간의 수정 과정이 필요합니다. 이런 방법도 있구나 하는 정도의 내용입니다. .mobile-menu { overflow: hidden; height: 100%;}#dimmed { position: fixed; top: 0; left: 0; z-index: 300; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);} 티스토리 북클럽 스킨의 "style.css"에 담겨 있는 코드입니다. - 모바일 접속하여- 메뉴 버튼을 눌러서 "aside" 팝업창을 열게 되면, ① 먼저, 본문 페이지 body의 ..
CSS attribute selector
[attribute] selector[attribute="value"] selector[attribute~="value"] selector [attribute|="value"] selector [attribute^="value"] selector [attribute$="value"] selector[attribute*="value"] selector a[target] { ... }input[type="text"] { ... }div[style*="display: none"] { ... }div[style*="height: 40px"] { ... } - ':not()' selector와 결합div:not([style*="display: block"]) { ... } - ':not()' selector와 '..
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 Edg..