태그 : css 요약보기전체보기목록닫기

1 2

css zoom in / out

/* 특정 요소를 200%로 변경 */.cssZoomIn { -ms-zoom: 2.0; // IE -moz-transform: scale(2.0); // Firefox -moz-transform-origin: 0 0; -o-transform: scale(2.0); // Opera -o-transform-origin: 0 0; -webkit-tran...

웹폰트 사용

1. 직접 웹폰트를 서버에 올려서 사용하는 방법초기에 사용되던 방법으로 직접 eot 파일과 woff 를 웹페이지 서버에 올려서 사용하는 방법이다.@font-face {    font-family: NanumGothic; // 사용할 폰트명    src: url('directory/NanumGothic.eot'); //...

Dynamic Stylesheet Framework - LESS / SASS

CSS는 HTML마크업을 꾸며주는 언어이다.CSS를 직접 작성하는 개발자가 많아지면서 (특히 필자의 경우) 개발자 입장에서 비효율적인 면이 나타났다.개발언어에 비해 그저 문법 나열로만 이루어진 CSS는 그 양이 방대해진다.그리하여 수정이 필요한 경우, 상당한 양의 중복된 곳을 수정해야하는 유지보수의 어려움이 발생한다.이런 부분을 개발자 입장에서 생각하여...

IE input태그에 나오는 X버튼(clear버튼) 제거

크롬에서는 나타나지 않으나 IE에서 input박스에 텍스트를 입력하면 오른쪽에 X버튼이 표시된다.경우에 따라서는 디자인 상 이 X버튼을 제거해야 하는데 이럴 경우 아래와 같이 CSS를 만들면 된다.<style type="text/css"> /* 모든 input에 대해 X버튼 제거 */ input[type=text]::-ms-clear { d...

파이어폭스에서 TEXTAREA Resizing 방지

파이어폭스에서 TEXTAREA를 표시하면 사용자가 TEXTAREA를 Resizing할 수 있는데,이를 방지하기 위해서 아래의 스타일을 추가한다.<textarea name='test' cols="90" rows="5" style="resize : none;"></textarea>

Skip To Content

웹사이트를 제작할 때 CSS가 깨진다거나, CSS가 반영되지 않는 환경의 브라우저로 접근할 때 사이트에 Skip To Content라는 기능을 만들어 컨텐츠 이동을 용이하게 제공할 수 있다.[CSS].skipToContent { position: absolute; top: -1000px; }[HTML]<dl class="skipToContent"&...

CSS clear property

레이어의 레이아웃을 위해 float를 사용하여 작업을 하게 됩니다.float:left, float:right가 대표적으로 쓰이는데요.요즘 같이 반응형웹이다 해서 복잡한 레이어 구성에서 종종 float을 쓴 하위의 레이어나 테이블이 뜻하지 않게 영향을 받게 됩니다. 이럴 때 하위의 레이어나 테이블에서 float 설정을 초기화하기 위해 사...

레이어의 넓이보다 레이어 밖으로 텍스트가 넘어갈 때

300px의 넓이를 지정한 레이어가 있다고 할 때, 한글의 경우 300px의 넓이로 아래로 wrap된다.그러나, 영문을 연이어 쓸 경우 레이어의 넓이를 벗어나서 표현되고 만다.이럴 경우 word-break:break-all을 해주면 한글과 마찬가지로 wrap된다.<div style="width:300px; word-break:break-all"&g...

크롬에서 홈페이지의 버튼이나 입력박스에 노란색 테두리 제거

크롬 브라우저로 홈페이지를 열어 버튼이나 입력박스를 선택하면 노란색 테두리가 표시된다.이를 제거하기 위해서는 아래와 같이 작업하면 된다.button {  outline:none;}input { outline:none;} Property Description Values CSS outline ...

테이블 상단, 하단, 왼쪽, 오른쪽 border 제어

웹 작업 중에 테이블의 왼쪽과 오른쪽의 border를 유지한채, 상하단의 border만 제거해야 하는 이슈가 발생했다.CSS에 보면 border-top-style이라는 것이 있는데 이를 이용하면 테이블의 border를 제어 가능하다.border-top-styleborder-left-styleborder-right-styleborder-bottom-sty...
1 2



20140817_300_250

통계 위젯 (화이트)

48227
1037
1030811