본문 바로가기
반응형

Development/CSS | SCSS | SASS12

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

티스토리툴바