CSS 16 티스토리 스킨의 네임카드 CSS 코드 수정 티스토리 블로그의 글 페이지의 댓글 입력 칸 위에 위치하는 네임카드 이미지입니다.※ 이미 아래의 수정 코드를 반영한 이미지 캡처※ 주황색 선은 정확한 테두리 범위를 보여 주기 위하여 색칠 티스토리 본사에서 삽입한 코드를 그대로 두면 로그인 전과 후의 이미지 하단 여백이 지나치게 넓게 차지하여 보기에 좋지 않습니다. 현재 상태를 유지하려면 할 필요가 없고, 눈에 거슬리면 본사에서 수정할 때까지 아래 코드를 임시로 적용해도 됩니다. "style.css" 파일의 적당한 위치에 끼워 넣습니다. PC와 모바일에 모두 적용해야 하니까, PC 관련 코드가 끝나는 부분에 넣으면 될 것입니다.북클럽 스킨의 경우 "/* ETC */"나 "/* Overwrite */" 항목에 집어넣으면 적당합니다.. 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. Grid Layout으로 사이트 링크와 관련 사이트 리스트 병합 사이트 링크 메뉴는 티스토리 스킨 북클럽의 소스 코드 이용 관련 사이트 메뉴는 티스토리 스킨 오딧세이의 소스 코드 이용 HTML 페이지에 사용한 티스토리 치환자 ** 티스토리 사이트의 서버가 비정상적으로 작동하여 치환자 소스 코드를 첨부하면 페이지에서 바로 실행됩니다. ** 불가피하게 소스 코드 대신 이미지 파일로 대체합니다. 추후에 서버가 정상화 되면 정상적인 코드를 등록합니다. ** 치환자 소스 코드의 ##를 **로 교체하여 실행을 막아 놓았습니다. ** 고객센터에 코드 블럭 실행 문제를 문의하였습니다. 아직 해결 안 된 상태입니다. ** CSS와 Javascript 코드는 정상입니다. 1. 현재 접속 페이지 종류 출력 치환자 [**_body_id_**] 위 코드가 아직도 실행되면 요렇게 보입니다. .. 2024. 2. 15. 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. 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. CSS counter 블로그 초기 페이지에 사용하는 카운터 1, 2, 3 ...... 북클럽 스킨의 "cover-thumbnail-2"와 "cover-list"의 각 항목에 숫자를 부착한 것입니다. 원래는 자바스크립트로 구현했던 기능으로 script.js 파일에 코드를 추가하여 사용하였는 데, 구글 PageSpeed에서 웹페이지 로딩 속도를 측정할 때마다 대규모 화면 변화를 일으키는 요인 중 하나로 이것이 당첨되었습니다. 리스트가 전체 페이지를 차지하고 숫자를 부착할 때마다 화면을 갱신하는 등 좋지 않은 영향을 미친다는 것인데 확인하는 방법이 어려워서 통과! 철거하고 CSS로 대체하기로 결정! 아직까지 별다른 점검 사항이 없는 것 보니까 괜찮은 것 같습니다. 만족했겠죠? 3개의 CSS 속성을 묶어서 구현할 수 있는 기능입니다.. 2022. 4. 15. CSS selector, nth-child()와 nth-of-type() 비교 ※ CSS selector div:nth-child(3) 하나의 부모 container에 들어 있는 자식들 중 3번째 자식이 이면 CSS 적용시키고, 만약 와 같은 다른 요소이면 이 규칙은 적용되지 않습니다. 요약하면, - 유형(type) 상관 없이 부모 객체의 3번째 자식 객체를 찾아서 - 앞에 지정한 요소(div)와 동일한 유형(div)의 자식일 경우에만 CSS 적용 div:nth-of-type(3) 하나의 부모 container에 들어 있는 자식들 중 만 선택 대상에 포함하여 그들 중 3번째 자식에게 CSS 적용 - 부모 객체의 유형(type) 자식들만 찾아서 - 그것들(div) 중 3 번째 자식에게 CSS 적용 부모 container에 child가 1개만 있을 때 1. first-child와 la.. 2022. 3. 19. Centering Things (vertically) CSS로 텍스트와 이미지를 수평, 수직 방향 중앙에 배치하는 방법입니다. W3C 해당 페이지 링크 최초 입력 2001년 5월 1일 마지막 갱신 2021년 2월 6일 Flex, Grid 시스템 구조를 사용하지 않고 호환성을 유지하면서 CSS1~3 기본 코드를 조합하여 element의 위치를 조정하는 방법을 설명하고 있습니다. https://www.w3.org/Style/Examples/007/center.en.html#vertical Centering lines of text Centering a block of text or an image Centering a block or an image vertically Centering vertically in level 3 Centering verticall.. 2021. 11. 20. Google Adsense, Kakao Adfit 사이드바의 위아래 margin 삭제 1. 본문과 사이드바에 모두 적용 .google-auto-placed, .revenue_unit_wrap { width: 100%; max-width: 1080px; margin: 40px auto !important; } 2. PC 접속 페이지의 사이드바에 적용 :not(.mobile-menu) #aside .google-auto-placed, :not(.mobile-menu) #aside .google-auto-placed ins, :not(.mobile-menu) #aside .revenue_unit_wrap { margin: 20px auto !important; } 2021.10.30 "2. PC 접속 페이지의 사이드바에 적용" 수정 구글의 배너 설정이 약간 변경되었습니다. 위의 코드는 상하 스.. 2021. 10. 19. CSS로 '위 첨자'와 '아래 첨자' 입력 위 첨자: superscript 아래 첨자: subscript HTML 코드 한글위 첨자 한글위 첨자 한글아래 첨자 한글아래 첨자 CSS 코드 기본(디폴트) vertical-align: baseline; 위 첨자(superscript) vertical-align: super; 아래 첨자(subscript) vertical-align: sub; font-size를 'small'이나 'smaller' 값으로 지정하여 글자의 크기를 더 작게 만듭니다. px나 em 단위로 지정해도 되겠죠. Class 지정 방법 선택 .superscript { vertical-align: super; font-size: small; } .subscript { vertical-align: sub; font-size: small; .. 2021. 10. 17.
