Category Archives: HTML/CSS

[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 »

anchor 태그() 클릭시 기본동작 (페이지이동)을 무효화 시키기

By | 10월 20, 2012

* 해결 컨셉    – <a/>태그는 클릭시 페이지 이동을 시도하므로      onclick 이벤트 핸들러에서 막아주면 된다. * 해결 방법    – html inline 속성에서 처리할 경우          <a href=”” onclick=”functionA(); return false” />    – jQuery 이벤트 핸들러 바인딩시 처리할 경우        $obj.click(function(e){         e.preventDefault();         //필요한 로직… Read More »

div에 가려져 있는 엘리먼트를 클릭 가능하도록(onclick) 처리하기

By | 10월 18, 2012

– 출처 :  http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements – * 일반적인 CSS pointer-events:none; background:url(‘your_transparent.png’);   * IE를 위한 예외처리  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’your_transparent.png’, sizingMethod=’scale’); background:none !important;

div의 수평 가운데 정렬(horizontal align center) 방법 (display:block 속성 엘리먼트의 수평 가운데 정렬)

By | 10월 15, 2012

* 해결 방법    가운데 정렬시키기를 원하는 block 속성 엘리먼트(ex: div)의 style속성을 다음과 같이 지정   (widh는 %나 pixel이나 관계없지만 반드시 숫자로 지정해 주어야 한다.)    style=”margin-left:auto; margin-right:auto; width:xxx” * 참고 링크    CSS Horizontal Align