신기한 웹 세상

Category

CSS

구글 웹폰트 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 ↑