본문 바로가기
반응형

Development/CSS | SCSS | SASS13

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.
반응형