신기한 웹 세상

Category

CSS/Sass

IE10 이상 input 텍스박스에 포커스시 X표시 삭제 하는 방법

input[type=text]::-ms-clear{display: none; } IE(익스플로러)10 이상 버전에서 인풋박스에 포커스하면 X표시가 나온다. 이걸 삭제 해주기 위해서는 위의 소스같이 하면 나오지 않는다. 더 자세한 내용은 http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx 에서 볼 수 있다.

CSS3 Gradient Border

CSS .gradient-top-to-bottom{ width: 300px; padding: 20px; border-top: 5px solid #000; border-bottom: 5px solid #ccc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#ccc)); background-image: -webkit-linear-gradient(#000, #ccc); background-image: -moz-linear-gradient(#000, #ccc), -moz-linear-gradient(#000, #ccc); background-image: -o-linear-gradient(#000, #ccc), -o-linear-gradient(#000, #ccc); background-image: linear-gradient(#000, #ccc), linear-gradient(#000, #ccc);… Continue Reading →

CSS 스타일 초기화 해주는 CSS파일 – normalize.css

모든 웹 브라우저에 동일한 스타일을 적용시키려면 모든 CSS속성을 초기화를 시켜야한다. 총을 쏘기 위해서 0점 사격을 하듯이 말이다. normalize.css 공식사이트 reset.css 보통 넣기도 하고 basic.css로 넣기도 한다. normalize 3.0.0 normalize 4.0.0 3.0.0버전은 옛날버전이고, 4.0.0이 요즘 나온 버전이다. /*! normalize.css v4.0.0 |… Continue Reading →

웹 폰트 사용하기

@font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’); /* IE9 Compat Modes */ src: url(‘webfont.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */ url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */ url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */ url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */ } … Fonts Formats… Continue Reading →

구글 웹폰트 api를 이용하여 나눔고딕적용하기

//Css에 Imort로 불러오기 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); @import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css); @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css); @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css); body {font-weight:normal; font-size:12px; font-family:Nanum Gothic’,’Nanum Brush Script’,’Nanum Gothic Coding’,’Nanum Myeongjo’,’Nanum Pen Script’;}   <head> <link rel=”stylesheet” href=”//fonts.googleapis.com/earlyaccess/nanumgothic.css” /> <link rel=”stylesheet” href=”//fonts.googleapis.com/earlyaccess/nanumbrushscript.css” /> <link rel=”stylesheet” href=”//fonts.googleapis.com/earlyaccess/nanumgothiccoding.css” /> <link… Continue Reading →

CSS Sprite(스프라이트) 기법이란?

CSS sprites는 페이지의 첫 로딩 속도를 줄여주는 여러 방법중, 서버로의 요청 횟수를 최소화 하는 것은 최적화요소 중에서도 중요하며, 실제 적용하기에도 아주 손쉬운 방법중에 하나이다. 아이콘, 버튼같은 자주 쓰는 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지파일로 통합한 후… Continue Reading →

CSS Hacks IE 브라우저

IE 브라우저 IE6 ~ IE10 브라우저 호환모드를 위한 것이다. #hack{ color:red; /* All browsers */ color:red !important;/* All browsers but IE6 */ _color:red; /* Only works in IE6 */ *color:red; /* IE6, IE7 */ +color:red;/* Only works in IE7*/ *+color:red;… Continue Reading →

IE7에서 width를 %로 주고 float를 밀리는 현상

IE7에서 width를 %로 주고 float를 밀리는 현상 IE7에서는 사이에 따라 div가 밀렸다 안밀렸다 하는 현상이 일어난다고 합니다. 이놈의 IE..아오!! 다음같이 하면됩니다. width:25%; float:left; clear:right; //clear:right으로 하면 IE7에서 밀리는 현상을 막을 수 있다.

CSS 아웃라인 제거 방법

CSS 아웃라인 제거 방법 이렇게 하면 IE6까지 된다. div { outline:none;selector-dummy:expression(this.hideFocus=true) }    

CSS Max Height (IE6에서 max-height 값 적용시키기)

CSS Max Height (IE6에서 max-height 값 적용시키기) div{ _height: expression( this.scrollHeight > 332 ? “333px” : “auto” ); /* sets max-height for IE6 */ max-height: 333px; /* sets max-height value for all standards-compliant browsers */ overflow:scroll; }  

CSS3 컬러 값 표현 방법

1. Hexadecimal Colors Hex 색상 값은 모든 주요 브라우저에서 지원된다. Hex 컬러는 #RRGGBB로 명시한다. – RR(Red – 빨강), GG(Green – 녹색), (Blue- 파랑) 16진수 색상으로 명시한다.모든 값은 0 ~ FF 사이여야 한다. 예를 들면, #0000ff 값은 파랑색으로 렌더링 된다. 그… Continue Reading →

text-overflow:ellipsis 속성

text-overflow:ellipsis 속성 (제목이 길 경우 … 으로 표시) IE6,7 IE8,9 Chrome Safari FireFox Opera text-overflow:ellipsis O O O O O (Ver. 7 부터 지원) O 말줄임표 정렬 위치 (서체별) IE6,7 IE8,9 Chrome Safari FireFox Opera 굴림,Gulim 하단 중앙 중앙 중앙… Continue Reading →

디바이스별 미디어 쿼리 정의

CSS 코드에서 미디쿼리 선언하기 @media Rules @media only all and (조건문) {실행문} @media: 미디터쿼리의 선언문이다. @media only, all, and (조건문) 사이에 공백은 필수 이다. Media Type는 특정 미디어를 위해 특별히 제작 된 것이다. 예를 들어, “voice-family” 속성은 청각 사용자를 위해 설계된… Continue Reading →


© 2017 신기한 웹 세상

Up ↑