IT/코딩 CSS 26

Article Thumbnail 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.
Article Thumbnail 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.. 2023. 12. 2.
Article Thumbnail 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-overflo.. 2023. 8. 31.
Article Thumbnail 티스토리 오버레이 창의 스크롤 기능 수정 오버레이 팝업창에서 스크롤할 때 바닥에 가려진 본문의 스크롤 기능을 일시 정지시키는 방법입니다. 본 블로그에 적용한 것이므로 다른 사이트에 사용할 경우 약간의 수정 과정이 필요합니다. 이런 방법도 있구나 하는 정도의 내용입니다. .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" 팝업창을 열게 되면, ① 먼저, 본문 페이지 bod.. 2022. 12. 25.
Article Thumbnail 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()' sele.. 2022. 11. 7.
Article Thumbnail 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.
Article Thumbnail 구글 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.
Article Thumbnail word-break, overflow-wrap, line-break word-break 단어의 절단 여부와 방법 - CSS property - used to specify how a word should be broken or split when reaching the end of a line (단어가 행의 끝 지점을 지나칠 때 자를 것인지 여부) - used to split/break long words and wrap them into the next line (다시 말해 다음 행으로 넘어가는 긴 단어를 자를 것인지 여부) /* 키워드 값 */ /* normal, break-all, keep-all, break-work */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: bre.. 2022. 6. 2.
Article Thumbnail 클릭 후 입력(input) 필드의 색과 placeholder의 글자 색 변경 현재 블로그에 사용하는 검색 입력 창의 모습입니다. 배경 색 #eee, placeholder의 글자 색 #555입니다. 마우스로 클릭하고 난 후 커서가 중앙에서 깜박이고 있으며 입력 창의 배경 색이 #fff으로 변경되고, placeholder 글자는 사라졌습니다. 편하게 입력할 준비가 된 상태입니다. 클릭을 했는 데도 placeholder 글자가 남아 있으면 입력하기 전에 먼저 지워야 하는지 고민하게 됩니다. HTML의 placeholder는 입력 창 혹은 입력 필드에 집어넣을 내용에 대한 설명을 간단하게 나열한 문구입니다. ※ 웹 브라우저의 쿠키에 저장되어 있던 예전에 입력한 검색어들과는 관련이 없습니다. 웹 브라우저로 접속한 웹 사이트에서 사용자가 기존에 입력했던 입력 단어를 입력 필드에 미리 제시하.. 2022. 5. 31.
Article Thumbnail display none, visibility hidden, opacity 0 display: none; DOM에 등록된 객체로, 사용자의 눈에 보이지 않으며, 마우스나 키보드와 같은 입력 도구로 실행이 불가능하지만, 자바스크립트와 같은 코딩 언어로 실행시킬 수 있습니다. 웹 페이지의 공간을 점유하지 않습니다. DOM 메모리에 로딩되어 존재하는 객체이나 페이지를 구성하지 않고 보이지도 않습니다. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take .. 2022. 5. 16.