Programming/CSS

    UX를 편리하게 하기 위한 7 CSS 팁

    http://mimul.com/pebble/default/2009/10/26/1256566020000.html 7 Quick CSS Enhancements for Better User Experience 1. Change Text Highlight Color - Firefox, Opera, and Safari에서만 됨 ::selection { background:#c3effd; color:#000; /* Safari and Opera */ } ::-moz-selection { background:#c3effd; color:#000; /* Firefox */ } 2. Prevent Firefox Scrollbar Jump - Firefox용 html { overflow-y:scroll; } 3. Round..

    How to set css style on disabled FORM INPUT Tag

    잘 모르던 내용인데 Google Chrome 내에 있는 라이브러리를 보다가 알게 되었네요. textarea:disabled, input:not([type]):disabled, input[type="text"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled { background-color: #EBEBE4; } 위와 같이 테그에 type 속성을 xpath 잡는 방식으로 잡네요. 그리고 그 뒤의 다른 속성 지정방식은 일반 CSS에서 하는 방식과 같으니 중요하진 않네요 ㅎㅎ 모르셨던 분들은 메모해두시길 ^ ^

    CSS 범위 넘어가는 글자에 자동으로 ... 붙이는 방법

    일단 핵심적인 내용을 먼저 하면 1. 문자열을 출력하는 영역에 너비(width)가 고정되어야 합니다. 2. 문자열의 넘어서는 부분을 생략(ellipsis)하고, 다른 넘어서는 부분은 안보이게(hidden) 처리합니다. 예를들어 다음과 같은 코드를 실행해보면 이해하시는데 빠를거에요 ^ ^ aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 결과는 다음과 같이 ... 문자가 붙어 나타나죠 ^ ^

    버튼을 CSS로 이쁘게~

    CSS 버튼 미리 되어있는 템플릿 뭔가 작업할때 버튼이 어설퍼서 보기 좀그렇다면 http://poshopzil.com/gBtn_all/ 다음 사이트에서 css에 버튼 모양 적용된 css를 가져다 쓰시면 쉽게 css 으로 미리 지정된 디자인을 가져다 쓰실 수 있습니다. 디자인쪽으로 참고 할만한 사이트.. 참조 : 포샵질 다콤 (http://poshopzil.com )

    IE 6에서 나타나는 배경이미지 깜빡임 현상 수정

    (자바스크립트를 통해서 처리하지만 CSS 관련된 내용과 가깝지 않은가 생각되어 CSS 카테고리에 옮겼습니다.) 먼저 두서없이 내용을 보시면 이해가 가지 않으실지 모르니... 다음 글을 읽어보시고 링크 : 배경 이미지 깜박거림(Background Image Flicker) 및 배경이미지의 반복적인 다운로드 문제에 대하여 이에 대한 해결책으로 아래와 같은 코드를 사용하는구나 하는정도로 이해하시면 되겠네요 ~ ^ ^ try { // IE only document.execCommand('BackgroundImageCache', false, true); } catch(e) { }

    DIV를 이용해 가운데 정렬

    http://flumpcakes.co.uk/css/center-div-ie div 테그를 이용해 표시되는 박스 형태의 레이아웃을 화면 가운데로 정렬하고 싶어하는 경우가 있습니다. 이럴때 대부분 table 테그에서 align=center를 많이 써 보셨기 때문에 text-align:center 를 사용하시는 경우가 많은데요. 이럴때는 다음과 같이 margin:0 auto; 를 사용하셔야 제대로 표현할 수 있습니다. 다음 사이트를 확인해보시면 보실 수 있습니다. http://flumpcakes.co.uk/css/center-div-ie