본문 바로가기

Development/CSS

(11)
CSS 스크롤바 (Custom) 스크롤바에도 CSS 속성을 부여할 수가 있다. 현재 디버깅용으로 데이터 확인하기 위해 엘리먼트만들었는데.. 디버깅용이라 해도 이뻤으면 좋게엤다~ CSS 코드 /* Debugging Element */ [data-storage] { opacity:0; position:fixed; right:-9999999px; top:-9999999px; z-index:9999999 } [data-storage][debug] { opacity:.8; right:10px !important; top:10px !important; width:200px; height:200px; overflow:auto; background-color:rgab(15,82,144,.54) !important; color:#fff !importa..
css pinch zoom 찾다보니 까먹을까 포스팅 https://googlechrome.github.io/samples/touch-action/
IE 10 이상으로 셀렉트박스 아이콘 숨기기 셀렉트 박스를 배경이미지로 넣어 커스텀으로 사용하려 했는데,인터넷 익스플로러에서는 적용이 되지를 않는다. 구글링 해서 찾을 결과 10이상으로는 적용이 되는것 같다. 내가 테스트 해본 결과로는 11 이상이었다. select::-ms-expand { display:none; }
inline-block 여백 제거 inline-block 을 지정하면 여백이 생긴다.ㅡㅡ;구글링 하다보니까 font-size:0 하면 되긴 되는데.. 그럼 하위 요소들의 폰트사이즈를 지정해주지 않는 요소들은모두 폰트사이즈가 0이 되어 사라져 버리네;;고민이네.. display:inline-block VS float:left의견좀 부탁드립니다.
HTML5 / CSS3 placeholder 폰트 색상 지정 ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }
구글폰트 - 나눔고딕등 나눔고딕이 구글 웹폰트에 있드라구요. 아직 테스트는 해보지 않음. ^^;;테스트 해보신 분들 있음 댓글좀 부탁드립니다~~ LINK : http://www.google.com/fonts/earlyaccess
Box Shadow - CSS3 CSS 로 UI를 작성하다가 BOX Shadow 를 정리합니다. 정리가 필요할듯..먼저 HTML 문서구조를 이해하는게 정말로 중요하지만.. 어느정도 CSS 와 태그는 외워야 할듯.ㅋㅋㅋ ※ 브라우저별 지원여부 일단 예제 실행결과는 다음과 같습니다. 먼저 Outer 영역 코드입니다.CSS.ex-1 {-moz-box-shadow: -5px -5px #888;-webkit-box-shadow: -5px -5px #888;box-shadow: -5px -5px #888;}.ex-2 {-moz-box-shadow: -5px -5px 5px #888;-webkit-box-shadow: -5px -5px 5px #888;box-shadow: -5px -5px 5px #888;}.ex-3 {-moz-box-shadow..
웹폰트 font-weight:bold; 속성이 적용받지 못하는 상황 출처 : 제피's 님의 블로그 웹 폰트를 적용할 경우 다음과 같이 font-weigth 속성을 제외하고 선언할 경우 bold 속성이 적용되지 않는 문제를 확인했습니다. @font-face{ font-family: '나눔고딕'; src:url('../font/NanumGothic.woff') format('woff'); } 따라서 웹 폰트 이용시에는 font-weight를 다음과 같이 적용하여야 합니다. @font-face{ font-family: '나눔고딕'; font-weight: normal; font-style: normal; src:url('../font/NanumGothic.woff') format('woff'); } style속성중 font-weight:bold; 가 적용됨을 확인할 수 있습니다.

반응형