Category Archives: HTML/CSS

[html/css] 분명히 z-index 값이 더 높은데도 불구하고 click 이벤트가 먹지 않았던 사례 (해결 => position: relative)

By | 11월 18, 2022

다음과 같은 상황이 있었다. A: 투명 div layer B: 버튼(button tag)을 감싸고 있는 div layer A가 B를 가리고 있는데, A가 투명이라 눈으로 보기에는 문제가 없음. 내 생각으로는 B의 z-index가 더 높기 때문에 클릭하는데 아무 문제가 없을 것이라고 생각했는데, 아무리 해도 클릭이 되지 않았다. B 에 position: relative 를 주었더니 해결됨!

[css] 스크롤바(scrollbar) 모양(design, 디자인) 조정하는 샘플코드 (custom…)

By | 9월 16, 2022

/* * 스크롤바 디자인 커스텀하는 코드 * * – 일단 antd table 내의 스크롤바를 가공해 보았음 * – webkit 계열에서만 사용할 수 있다고 함. */ /* 스크롤바 폭 */ .ant-table-body::-webkit-scrollbar { width: 8px; /* 여기서 height가 의미가 있나? */ } /* 스크롤바에서 움직이는 부분 */ .ant-table-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 2px; background-color: #bbb;… Read More »

[html] 상/하위 block 요소 간의 수직정렬 사례

By | 2월 9, 2021

html 엘리먼트의 수직정렬은 정확히 알고 하던 것이 아니라서 항상 헷갈리는데, 이번에 알게 된 사례를 하나 기록한다. 부모/자식 둘 다 display:block 이라고 가정하고, 부모요소의 css에 아래 항목을 추가한다. { display:flex; align-items:center; } 참고 링크 https://stackoverflow.com/questions/5166574/vertical-align-text-in-block-element/9406982

html의 이미지 맵(image map) 클릭시 각 map의 경계선이 보이지 않도록 처리하기

By | 10월 20, 2012

* 개요    – 이미지 맵 클릭시 경계선이 표시되면 어찌됐건 세련되지 못하게 보이는 게 보통이다.     그래서 기존에는 area 태그에 onfocus=”this.blur()” 속성을 넣어 주어서 이것을 막았는데,     노가다이기도 하고 보기에도 별로 좋지는 않았다.      그래서 검색을 해 보니 CSS로 간단하게 처리하는 방법이 있었다. * 해결방법    – 이미지맵을 사용하는 img 태그의 스타일속성에       outline:none… Read More »