느리게 걷기

테이블 셀이 줄어들 때 셀 안의 이미지도 같이 줄어들게 하고 싶은데 IE에서 안되는 경우가 있다. table 에 table-layout:fixed 를 적용하면 된다.

크롬 브라우저에서 인쇄시 배경이미지를 출력하고자 할때,-webkit-print-color-adjust:exact;와 같은 속성을 적용해준다. 단, 배경이미지가 overflow:hidden 되어있는 영역에서 hidden 처리가 되지 않는다는 점.. ㅡㅡ;

글보기 페이지에서 사용자가 에디터로 작성한 글을 뿌려줄 때,줄바꿈 관련해서 이슈가 많을 것이다.사용자의 엔터를 인식하여 뷰화면에 적용하고자 할때,DB에서 엔터부분을 태그로 변환하여 뿌려주기도 하지만,단순하게 html에서 뷰 영역을 태그(또는 white-space 속성의 pre)를 사용할 수도 있다. white-space inherit 상속 받는 것normal defaultnowrap 줄바꿈을 하지 않는다pre 태그와 같은 기능. 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다pre-line 마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다pre-wrap pre-line 과 비슷하고, space 여백까지 줄바꿈이 된다

table의 border-collapse 속성이 collapse 일 경우, IE9에서 테이블 셀 안에서 어떤 객체에 적용한 box-shadow 가 먹질 않는다. 테이블 바깥으로 끄집어 내면 제대로 먹고... 결국 table의 border-collapse 속성을 separate 로 해줌으로 해결할 수 있다.

온라인서식에 한/영 변환을 설정할 수 있다. 속성 : ime-mode 값(sMode)auto : 기본값. 한/영 변환이 자유롭게 된다. 지정안한것과 똑같다..active : ime를 거치기 때문에 기본에서 한/영키를 한번 누른것 같은.. 즉 한글기본이된다. 그리고 이또한 한/영변환이 자유롭다.inactive : ime를 거치지 않고 입력이 된다. 즉 영문기본이고 한/영변환이 자유롭다.disabled : 영문기본으로 한/영변환이 안된다. 즉 영문, 숫자만 입력되고 한글입력은 불가능. SyntaxHTML {ime-mode:sMode;}Scripting [sMode=] object.style.imeMode Example

아래와 같은 테이블 구조가 있을 때, 구글크롬과 사파리에서만 col 값이 안먹는다. tr.thArea 부분의 위 행에 colspan 시킨 행이 존재 할때 tr.thArea의 td 및 th 에 col with 값이 제대로 안먹는다. 원인은 caption 을 가리기 위해 visibility:hidden 또는 position:absolute 또는 text-indent 속성을 주었기 때문. 해결방법은 display:none을 주면 된다.

모바일 작업하면서 @media query 라는 것을 본격적으로 접하게 되었는데, 참으로 CSS의 기능이 놀랍다는 생각을 해봅니다. CSS가 계속 발전하면서 더욱 다양하고 강력한 기능을 가지게 되었음에도 불구하고, 크로스브라우징 문제로(지원하지 않는 브라우저 때문에) 마음껏 사용하지 못한것이 사실인데요, 더욱 강력한 CSS3가 나오고 브라우저들도 웬만한 CSS속성을 지원하게 된 이 시대에 앞으로 HTML,CSS,JAVASCRIPT의 세계가 기대됩니다. 미디어쿼리는 한마디로 얘기해서 다양한 미디어를 구분하여 각각에 고유한 스타일을 적용시킬 수 있는 속성입니다. 예전같으면 서버사이드 언어, 또는 스크립트로 처리했던 것을 미디어쿼리 CSS로 처리할 수 있는 것이죠. 그렇다면 어떤 경우에 이것을 쓰게 될까.. 미..

아직까지 ie6 호환성을 고려해야 하는 것이 현실.. 기업들의 오래된 시스템 환경에서는 어쩔수없이 ie6을 사용하는 경우도 많다는데.. 그러나 앞으로는 웹사이트 제작사들이 아예 ie6에서 제대로 작동하지 않게 만들어야 사용자들도 다른 브라우저로 갈아타든지 업그레이드 하든지 할듯.. 사족이었습니다~ 반투명을 지원하는 png 포맷 이미지를 ie6 이하 버전 브라우저에서만 지원을 하지 않고, 배경을 회색으로 표시해버립니다. ie6에서 png를 사용하기 위한 방법으로 여러가지가 있는데, a 링크가 안되는 문제등을 생각했을 때 아래 방법이 제일 좋다고 생각됩니다. 1. DD_belatedPNG.js 사용(7kb) 먼저 아래 링크에서 js 파일을 다운받고, http://www.dillerdesign.com/expe..