본문 바로가기

Development/CSS10

css pinch zoom 찾다보니 까먹을까 포스팅 https://googlechrome.github.io/samples/touch-action/ 2018. 8. 28.
IE 10 이상으로 셀렉트박스 아이콘 숨기기 셀렉트 박스를 배경이미지로 넣어 커스텀으로 사용하려 했는데,인터넷 익스플로러에서는 적용이 되지를 않는다. 구글링 해서 찾을 결과 10이상으로는 적용이 되는것 같다. 내가 테스트 해본 결과로는 11 이상이었다. select::-ms-expand { display:none; } 2015. 5. 8.
inline-block 여백 제거 inline-block 을 지정하면 여백이 생긴다.ㅡㅡ;구글링 하다보니까 font-size:0 하면 되긴 되는데.. 그럼 하위 요소들의 폰트사이즈를 지정해주지 않는 요소들은모두 폰트사이즈가 0이 되어 사라져 버리네;;고민이네.. display:inline-block VS float:left의견좀 부탁드립니다. 2013. 12. 17.
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; } 2013. 9. 2.
구글폰트 - 나눔고딕등 나눔고딕이 구글 웹폰트에 있드라구요. 아직 테스트는 해보지 않음. ^^;;테스트 해보신 분들 있음 댓글좀 부탁드립니다~~ LINK : http://www.google.com/fonts/earlyaccess 2013. 7. 5.
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.. 2013. 7. 5.
웹폰트 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; 가 적용됨을 확인할 수 있습니다. 2013. 6. 12.
[CSS] 단위 pt, px, em, ex, % 보통 디자인 결과물이 pt, px형태이기 때문에, 그대로 사용하는 것이 편하지만, 해상도와 플랫폼 등에 따라서 접근성을 가지기 위해서는 em, ex, %를 사용하는 것이 좋습니다. pt, px가 절대적인 단위인 반면에 em, ex, %는 상위 요소에 대한 상대적인 크기를 가지고 있어서 레이아웃을 좀 더 유동적으로 적용시킬 수 있습니다. 예를들어, 최상위 요소가 9pt인 경우 다음과 같습니다. 대부분 브라우저는의 폰트 사이즈는 12pt, 16px, 1em, 100%가 기본입니다. 9pt, 12px, 0.75em, 75% 이를 간단히 표로 정리하면, PointPixelem%9pt12px0.75em75%10pt13px0.8em80%10.5pt14px0.875em87.5%11pt15px0.95em95%12pt1.. 2013. 5. 28.
[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이상인 컨텐츠가 컨텐츠 영역을 .. 2011. 2. 25.
[CSS] 텍스트 줄바꿈 처리 word-break, white-space 출처 : http://htglss.tistory.com/31 작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다. word-break word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다. .selector {word-break:break-all;} 위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈.. 2011. 1. 20.