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속성을 초기화를 시켜야한다. 총을 쏘기 위해서 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 →
10 Free jQuery Parallax Scrolling Plugins 소개 출처 : http://www.desiznworld.com/2013/07/free-jquery-parallax-scrolling-plugins.html Parallax.js Source | Demo Parallaxjs Source | Demo Scrollorama Source | Demo Superscrollorama Source | Demo Parallax-Scrolling Source | Demo Skrollr Source | Demo jQuery Scroll Parallax Plugin Source |… Continue Reading →
1. 콘텐츠 모델(Content Models) 기존 HTML 기반의 마크업에서는 일반적으로 인라인 요소(Inline Element)와 블록 요소(Block Level Element)로 구분하는 정도의 개념만 존재하였지만, HTML5에서는 좀 더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것 끼리… Continue Reading →
//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 →
if($(“#id”) != null) { } if($(“.class”) != null) { } 이렇게 쓰는 것보다는 if($(“#id”).length > 0) { } if($(“.class”).length > 0) { } 이런식으로 쓰는 것이 좀 더 정확하고 맞을 것이다.
CSS sprites는 페이지의 첫 로딩 속도를 줄여주는 여러 방법중, 서버로의 요청 횟수를 최소화 하는 것은 최적화요소 중에서도 중요하며, 실제 적용하기에도 아주 손쉬운 방법중에 하나이다. 아이콘, 버튼같은 자주 쓰는 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지파일로 통합한 후… Continue Reading →
javascript로 브라우저 이름을 알기 위해서는 useragent를 많이 사용하지만 알아본결과 appName을 많이 사용하기도 한다. txt = “<p>Browser CodeName: ” + navigator.appCodeName + “</p>”; txt+= “<p>Browser Name: ” + navigator.appName + “</p>”; txt+= “<p>Browser Version: ” + navigator.appVersion + “</p>”; txt+= “<p>Cookies… Continue Reading →
Tab 1 Tab 2 tab-1 내용 tab-2 내용
/** Jquery를 이용한 ← (백스페이스) 사용 막기 **/
sublime text 2 빈줄 제거 하기 에디터 플러스에서도 빈줄 제거가 있듯이 서브라임 텍스트에서도 마찬가지로 있다. 에디터플러스와 흡사하다. 우선 에디터플러스에서는 찾기/바꾸기 (Ctrl + H)에서 정규식 체크를 한다. 그리고 찾은 문자열에 [\n]+을 입력하고 바꿀 문자열에 \n을 넣고 모두 바꾸기(Alt + A)를 하면… Continue Reading →
워드프레스 Awesome Filterable Portfolio 플로그인 사용 설명 동영상
HTML 태그 약자 설명 a href = Anchor(배에 달려있는 닻) Hypertext REFernce img = IMaGe(이미지) head = 머릿글 html = HyperText MarkupLanguage b = Bold(굵은글씨) i = Italic(이탤릭체.기울어진) u = Underline(밑줄) target = 표적 title = 표제 id = IDentification(신원확인)… Continue Reading →
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 →
웹접근성 데이터 테이블 지침서 표의 제목셀과 내용셀을 올바르게 짝짓기 표의 제목셀과 내용 셀은 짝짓기가 바르게 되어야 표를 표시할 수 없는 상황에서 표를 펼치거나 화면 낭독 프로그램 등에서 표를 순서대로 읽어줄 때에도 표가 제공하고자 하는 정보를 이해할 수 있음. 짝짓는 방법… Continue Reading →
웹접근성에 요즘 많은 이슈인데요 방송특집으로 웹접근성을 처음 다룬거 같은데요. 웹접근성에 관심이 많은 사람들에게는 좋은 자료라고 생각합니다. [1부] 스마트 세상의 장애인들 http://goo.gl/Sze1Pc [2부] 당신은 접근이 차단됐습니다 http://goo.gl/U6trE6 [3부] 스마트 접근권을 말한다 (토론) http://goo.gl/rp6RoL
모바일에서 회전을 하면 그 페이지 새로고침 하는 스크립트이다. //회전시 새로고침 window.orientationchange = orientationEventHandler; window.addEventListener(‘orientationchange’, orientationEventHandler, false); function orientationEventHandler(){ var orientation = window.orientation; // 회전했을 경우 처리 if(orientation == 90 || orientation == -90){ location.reload(); } else { // 회전하지 않았을… Continue Reading →
모바일 웹에서 회전을 했을경우 새로고침 하는 소스이다. //회전시 새로고침 window.orientationchange = orientationEventHandler; window.addEventListener(‘orientationchange’, orientationEventHandler, false); function orientationEventHandler(){ var orientation = window.orientation; // 회전했을 경우 처리 if(orientation == 90 || orientation == -90){ location.reload(); } else { // 회전하지 않았을 경우… Continue Reading →
ConvertToUTF8 다운을 받거나 Package Control ctrl+shipt+p 에서 바로 설치가 가능하다. ConvertToUTF8를 받아도 혹시 안되는 분들은 아래 클릭해서 다운받아서 설치해보길 바란다. [attachments title=”ConverToUTF8 Master” template=medium include=”611″] 클릭해서 받으면 된다. 압축을 풀고 폴더이름을 ConvertToUTF8로 변경 한다. Sublime Text 2를 실행합니다. 메뉴 > Preferences… Continue Reading →
Sublime Text가 어느 OS환경에서도 지원 되는 막강한에디터이다. 가벼우면서도 기능들이 다양해서 국내에서도 많이 사용하고 있다. 나는 Window에서 사용을 하고 있기때문에 대부분 윈도우 환경에 대해서 설명을 하겠다. 설치전이라면 이전에 Sublime Text 다운받기 및 설명을 보고 오는 것이 좋을 것이다. 자주 쓰는 단축키… Continue Reading →
IE7에서 width를 %로 주고 float를 밀리는 현상 IE7에서는 사이에 따라 div가 밀렸다 안밀렸다 하는 현상이 일어난다고 합니다. 이놈의 IE..아오!! 다음같이 하면됩니다. width:25%; float:left; clear:right; //clear:right으로 하면 IE7에서 밀리는 현상을 막을 수 있다.
OS Window 환경에서만 말씀드리겠습니다. Sublime Text 2 다운은 http://www.sublimetext.com/2 Sublime Text 3 다운은 http://www.sublimetext.com/3 에서 받을 수 있습니다. 서브라임 텍스트 기본 화면입니다. ctrl+p 단축키를 누르면 나오는 화면입니다. 메뉴에서는 Goto -> Goto Anything 을 나옵니다. 검색기능이 뛰어나다. 그래서 몇번의 타이핑으로 원하는… Continue Reading →
var inputFocus = function() { var inputTxt = $(“input[class*=’_input’]”); inputTxt.each(function(){ var $this = $(this), default_value = $this.val(); $this.on(‘focus’, function() { if ($this.val() == default_value) { $this.val(“”); } $this.removeClass(‘filled’); $this.addClass(‘on’); }); $this.on(‘blur’, function() { if($this.val().length == 0) { $this.val(default_value).addClass(‘filled’); $this.removeClass(‘on’); }… Continue Reading →
<!– 먼저 HTML5 재생 시도: XML을 제공할 경우, `controls` to `controls=”controls”` and autoplay 을 확장 –> <!– 경고: 포스터 속성을 이용 할 경우, iOS3에서는 재생이 되지 않는다. iOS4에서는 해결되었다. –> <video width=”640″ height=”360″ controls> <!– MP4 must be first for… Continue Reading →
CSS 아웃라인 제거 방법 이렇게 하면 IE6까지 된다. div { outline:none;selector-dummy:expression(this.hideFocus=true) }
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; }
© 2024 부빠기별 — Powered by WordPress
Theme by Anders Noren — Up ↑