전체 글 496

크로스브라우징 input 박스

input 박스에는 여러가지가 있습니다. (라디오,체크박스,텍스트박스등) 여기에서 라디오 박스와 체크박스는 IE와 타브라우저에서 외곽여백의 차이가 있습니다. 이런경우를 잘모르는 웹디자이너 같은 경우 무조건 자기디자인 데로 해달라고 요구하곤하죠.. 그것도 익스에만 맞춰달라면서...참피곤한 경우죠. 물론 디자이너 입장에서는 그게 정답이고, 퍼블리셔 입장에서 맞춰주는것도 해야할일중에 하나일수는 있습니다. 그래서 협업이 중요한거 같습니다. 여튼 이럴때 해결방법입니다. 먼저 소스를 살펴보겠습니다. 테스트 위와 같은 소스를 출력하면 다음과 같습니다. 익스와 파폭,사파리는 기본적으로 4px 이라는 외곽여백이 존재하며, 오페라는 3px 여백이 있었습니다. 세로여백은 top 라인에서 익스는 2px, 파폭과 사파리는 3p..

Web story/Html 2009.04.15

사파리 브라우저의 input 효과 비슷하게 하기

사파리 브라우저의 경우 input 텍스트 필드에 포인터가 있을경우 표시를 해준다 이와 비슷한 기능이 필요하고자 하는경우 써보자~ // 공통 input function replaceText(objValue, srcStr, desStr) { var str = objValue; while(str.indexOf(srcStr) != -1) str = str.replace(srcStr, desStr); return str; } function getBrowerType() { if(navigator.appName == "Microsoft Internet Explorer") return "IE"; else if(navigator.appName == "Netscape") return "Netscape"; } functi..

이미지 테두리 롤오버 효과 갭 발생 해결하는 방법

썸네일 이미지를 가로 세로로 배열해 놓고, 마우스 오버시 이미지 테두리를 생성시켜주는 롤오버 효과를 한 두번쯤은 적용해 보았을 것이다. 많은 경우 기본 이미지와 롤오버 이미지(테두리 생성 이미지) 두개를 별도로 제작하여 스크립트로 처리하는 경우를 볼 수 있는데, 조금만 더 고민을 해 보면 CSS만을 이요해서 간단히 구현해 볼 수 있다. HTML Markup: view plaincopy to clipboardprint? Default CSS: view plaincopy to clipboardprint? /* Init */ ul { margin: 0; padding: 0; list-style: none; } ul li a { border: 0; } ul li a img { border: 0; } ul li,..

Web story/CSS 2009.03.19

display:inline-block;

SS로 Layout을 잡을 때 inline element 사이에 block element를 넣고 싶을 때가 있습니다.하지만 div같은 block element를 사이에 넣는다면 새로 줄바꿈이 되어 element들이 포지셔닝하게 됩니다.기본적으로 inline element가 block element를 포함할 수 도 없습니다.그럴 때 inline-block display 속성을 사용한다면 원하는 방식으로 동작시킬 수 있을 것입니다.inline-block 속성은 매우 유용한 속성임에도 불구하고 자주 사용되지 않고 있습니다.IE7/FF2 등의 몇몇 브라우저에서 inline-block 속성이 구현되어 있지 않기 때문이죠.하지만 핵을 사용해서 구현하는 방법이 있네요. 아래는 관련 글입니다. http://blog.m..

Web story/CSS 2009.03.02

애플, Safari 4 발표 Cover Flow 기능 등 탑재

애플, Safari 4 발표 Cover Flow 기능 등 탑재 애플은 24일, 웹브라우저 Safari 4의 퍼블릭베타 버전을 발표했다. Mac/Windows버전 모두 애플의 웹사이트로부터 무료로 다운로드할 수 있다. Safari 4에서는, 새로운 Nitro엔진을 채용했다. JavaScript의 실행 테스트(SunSpider JavaScript Performance테스트)에서 Safari 3와 비교하여 4.2배 빨라졌다고 한다. 같은 테스트를 Internet Explorer 7과 비교하면 최대 30배, Firefox 3와 비교해도 3배 이상 빠르다고 한다. 이외에, 유저의 웹페이지 열람 이력을 바탕으로 즐겨찾기 랭킹을 정하고, 한페이지에 최대 24개의 섬네일 표시가 가능한 Top Sites, 최근 열람한 ..

Computer 2009.02.25
반응형