본문 바로가기

반응형

CSS

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의견좀 부탁드립니다. 더보기
구글폰트 - 나눔고딕등 나눔고딕이 구글 웹폰트에 있드라구요. 아직 테스트는 해보지 않음. ^^;;테스트 해보신 분들 있음 댓글좀 부탁드립니다~~ LINK : http://www.google.com/fonts/earlyaccess 더보기
[CSS] min-height, height 핵(hack)없이 사용하기 UI 코드작성은 정말 힘들다..ㅡㅡ; 출처 : http://blog.naver.com/weiss/130100739719 보통 min-height를 쓸땐, ie6에서 작용하지 않으므로, 기존엔 ie에서만 먹는 _height를 사용했다. 하지만 핵을 쓰는 것때문에 Validator에 걸림. 소스는 좀 길어지지만 핵 안쓰고, 모든 브라우저에서 정상적으로 작동하게 할 수 있는 방법 div { min-height:500px; height:auto !important; height:500px; } 순서 매우 중요 min-height : ie7이상 및 표준브라우저에서 작용. height:auto !important : 표준브라우저에서 아래 height 속성을 무시하고 min-height이상인 컨텐츠가 컨텐츠 영역을 .. 더보기
[CSS] 텍스트 줄바꿈 처리 word-break, white-space 출처 : http://htglss.tistory.com/31 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈.. 더보기

반응형