무료 폰트를 다운받아 사용하실 수 있는 눈누 입니다

다양한 디자인과 애니매이션 CSS소스를 제공하는 사이트 입니다

웹프로그램(HTML, 자바스크립트, CSS, Ajax, Jquery 등) 관련 소스를 다운로드 받을수 있는 블루비 입니다.

프로그램 소스를 공개해주는 프로그램나라 입니다

단순 텍스트를 이미지로 만드는 방법입니다 <img src="<?=gd_label("가나다 abc 123","font-size:30px;color:#ff0000;")?>"> 이미지 태그안에 gd_label("내용","CSS") 함수를 넣고첫번째 파라미터에 내용두번째 파라미터에 CSS를 넣어 사용하면 됩니다  작동이 되지 않는경우 폰트가 적용되지 않을수도 있으니 폰트도 같이 업로드해서 사용해야 합니다

텍스트 깜박이는 효과 만들기이다jquery,자바스크립트 등으로 만들수 있지만CSS로 간단하게 만드는 방법이다 class="red_to_blue" 선언만 하면 적용된다

테이블의 내용에 따라 테이블이 유동적으로 변하는 경우가 있다이때 고정하고 싶은 경우가 있다이때 사용하는 스타일이다table-layout:fixed 이걸 사용하면 테이블의 사이즈가 고정되어 내용이 길어질 경우 짤린 부분은 감춰지는 효과가 있다

기본적으로 opacity:0 사용하면 된다<div style="width:100;height:100px;background:#000000;opacity:0;"></div>   그러나 IE8은 지원하지 않아 filter:alpha(opacity=0)을 상용하는데<div style="width:100;height:100px;background:#000000;filter:alpha(opacity=0);"></div>   버전에 상관없이 사용하기위해서는 해당 버전에 적용되는 스타일을 모두 적용시키면된다<div style="width:100;height:100px;background:#00000

<hr> 태그에 색상을 넣고 싶으면<hr style="color:#000000"><hr style="border-bottom:1px solid #000000"> 이렇게 CSS를 통해 넣으면 적용될것 같지만 그렇지않다 그이유는 hr는 top,bottom라인이 존제한다 해서 기본적으로 하면 라인이 2px로 된다 top,bottom 각각 1px씩 2px이된다 해서 1px로 하고자 할때 border-bottom:1px solid #000000;border-top:none;  이런식으로 라인 하나를 제거하

스타일 여러게를 한꺼번에 변경하는 방법여러옵션을 사용하는 방법이다{}를 통해서 사용할수 있으며형식은 {"옵션명1":"값1","옵션명2":"값2"} 이런식으로 사용한다다음은 예시이다$(this).css({'border':'2px solid #f9cd00','padding':'0px'}) 하나만 사용할때는 {} 없이 "옵션1","값1" 이런식이다다음은 예시이다$(this).css("border","2px solid #f9cd00"); 

​클래스명을 자기 마음대로 정의하여 사용할수 있다그러나 표준처럼 사용하는 명을 따라주면 다른 사람이 접근했을때 또는 내가 다른 사람의 소스를 보았을때 많은 도움이되므로될수 있으면 묵시적으로 합의된 표준은 지켜주는것이 좋다 GNB ( Global Navigation Bar )사이트 최상위 전체 공통네비게이션.메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바 LNB ( Loca

<div style="float:left;width:calc(100% - 100px);"></div> 100px만큼 뺀 div값 

이미지에 마우스를 오버했을경우 이미지 안쪽으로 테둘이를 넣는 방법이다바깥쪽으로 테두리를 넣게되면 이미지영역이 커져서 깨지는 경우가 발생되기 때문에 안쪽에 넣은것이다<style>a.image01, a.image01 img {float:left;overflow:hidden;}a.image01:hover{border:4px solid #DDDDDD;}a.image01:hover img {margin:-4px;}</style><a href="" class="image01"><img border=0 src="이미지경로"></a> 

스타일을 적용해서 텍스트 입력 형식을 결정할수 있다한글인지 영문인지 등등 style = "ime-mode:auto"         (자동변경)  (한/영 전환 가능)style = "ime-mode:active"       (한글 모드)  (한/영 전환 가능)style = "ime-mode:inactive"     (영문 모드)  (오직 영문)style = "ime-mode:disabled"    (영문 모드)  (한/영 전환 불가)style = "ime-mode:deactivated" (한글

백그라운드를 노출할때에 공간을 띄우고 하고 싶을때가 있다이럴때 다음과 같이 하면된다. style="background-image:url('이지지경로');background-position:10px 20px;" x=>10pxy=>20px띄우게된다  

input type이 password인경우 value="비밀번호" 이렇게 입력하면 ****이렇게 내용을 볼수 없다그렇기때문에 해당 문구를 넣고 싶은경우 이미지를 활용하는 방법을 사용한다<input type="password" style="background:url(input_pw.gif);"   onfocus="this.style.backgroundImage='url()'">input_pw.gif 이미지에 "비밀번호입력" 이런식으로 만들어지 이미지를 호출하는 형태이다그리고 onfocus 되었을때 이미지를 비

웹폰트를 사용하는 방법이다스타일부분에 @font-face{font-family: fontstyle01;src:url(/swww/font/RixGoB.eot);} 선언하고사용하고자 하는곳에 다음과같이 사용하면적용된다 <div style="font-family:fontstyle01">웹폰트 NanumGothic.eot</div> 장점이 틀림없이 있다 그러나 난 별로 사용하지 안는다이유는 IE에서는 작동되는데 크롬브라우저에서는 적용되지 않는다그리고 적용되는 IE에서도 로딩과동

단어간 간격,글자간 간격, 줄간 간격을 스타일로 조절할수 있다​word-spacing:5px;//단어간 간격letter-spacing:7px;//자간line-height:18px;//행간  

입력할때영문 숫자 대문자로만 입력가능함style="ime-mode:disabled;text-transform:uppercase;"  

자간(문자와 문자 사이)를 넓게 하고자 할때 사용하는 스타일이다 <b style="letter-spacing:10px">문자간격</b>