본문 바로가기

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 더보기
IE와 W3C의 박스 차이에 의한 CSS 코딩 방식 http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/ IE와 W3C에서 사용하는 BOX의 크기는 다르게 설정되어있어서 사이즈가 다르게 나오는 것들이 많이 있다. 이를 해결하기 위한 방안이 아래 설명되어 있다. 이하는 원문의 내용을 발췌한 내용.. The W3C Box model First a look at the the W3C box model, which is used by all standards compliant browsers and by Internet Explorer 6 and later if the circumstances are right. In the W3C CSS box model a b.. 더보기
링크에 점선.. 아직도 onclick=this.blur()를 쓰나요? onclick=this.blur() => this.hideFocus=true 링크를 클릭하게 되면 링크 주변에 점선이 생기게되죠. 물론 그대로 두는 것이 웹표준 접근성에 맞겠지만 모양을 중요시하는 경향이 국내에선 많기 때문에 링크에는 항상 onclick 이벤트에 this.blur() 자바스크립트를 이용해서 링크에 점선이 생기는걸 막고는 했죠. 이를 한번에 해결하려면 a 테그의 스타일을 정의할 때 아래와 같은 한줄을 넣어주시면 됩니다. ^ ^ a { selector-dummy: expression(this.hideFocus=true;} 상당히 간단하고 쉽게 링크의 점선을 없앨 수 있겠죠? ^ ^ 많이 활용하자고용~ 더보기