Category Archives: HTML/CSS

[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

IE를 사용할 때 특정 버전의 엔진으로 렌더링 하도록 해 주는 http meta 태그 (X-UA-Compatible)

By | 10월 13, 2012

* 대략 아래와 같은 형식임    자세한 내용은 링크 참조 <meta http-equiv=”X-UA-Compatible” content=”IE=8,chrome=1″/> * 참고 링크    – Specifying Document Compatibility Modes (MSDN)   – Force IE9 to emulate IE8. Possible?   – X-UA-Compatible Meta Tag   – X-UA-Compatible META tag를 삽입하였으나 작동하지 않을 때   – Implementing the META Switch on Apache

각각 div로 이루어진 버튼들을 td 안에서 수평,수직 가운데 정렬(align) 하기

By | 9월 18, 2012

* html 코드 <!– 버튼들이 위치할 td –><td>     <!– 버튼들을 한 덩어리로 묶는 div –>     <div class=”inGridBtns”>        <!– 버튼들. background 이미지로 버튼임을 표현함 –>         <div onclick=”a()”></div>        <div onclick=”b()”></div>        <div onclick=”c()”></div>    </div></td> * css 코드 .inGridBtns {  display:inline-block; /* inline-block이어야 자식객체의… Read More »

HTML 테이블(table) 안에 폼(form)을 넣지 말자!

By | 9월 15, 2012

다른 브라우저는 다 인식하는 것 같은데,  구글 크롬(chrome)은 테이블 안에 있는 폼(form)을 인식하지 못한다. 웹표준도 아니라고 하니 이렇게 사용하지 말자!!! * 참고 위의 경우 디버거 등에서 보면, 실제 소스에는 form 태그 안에 <tr><td>등이 들어가 있음에도,<form id=”xxx”></form> 처럼 바로 태그가 닫혀 있음을 볼 수 있다. 그래서 jQuery등으로 하위엘리먼트들을 찾으면 찾을 수가 없게 되는 것이다. 그러나 jQuery의… Read More »

[펌글] ie7에서 display inline-block 사용하기

By | 9월 12, 2012

– 출처 :   http://dancer.tistory.com/126  – CSS로 Layout을 잡을 때 inline element 사이에 block element를 넣고 싶을 때가 있습니다. 하지만 div같은 block element를 사이에 넣는다면 새로 줄바꿈이 되어 element들이 포지셔닝하게 됩니다. 기본적으로 inline element가 block element를 포함할 수 도 없습니다. 그럴 때 inline-block display 속성을 사용한다면 원하는 방식으로 동작시킬 수 있을 것입니다. inline-block 속성은 매우 유용한… Read More »