Category HTML&CSS
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 →
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 →
CSS sprites는 페이지의 첫 로딩 속도를 줄여주는 여러 방법중, 서버로의 요청 횟수를 최소화 하는 것은 최적화요소 중에서도 중요하며, 실제 적용하기에도 아주 손쉬운 방법중에 하나이다. 아이콘, 버튼같은 자주 쓰는 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지파일로 통합한 후… Continue Reading →
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 →
IE7에서 width를 %로 주고 float를 밀리는 현상 IE7에서는 사이에 따라 div가 밀렸다 안밀렸다 하는 현상이 일어난다고 합니다. 이놈의 IE..아오!! 다음같이 하면됩니다. width:25%; float:left; clear:right; //clear:right으로 하면 IE7에서 밀리는 현상을 막을 수 있다.
<!– 먼저 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; }
1. Hexadecimal Colors Hex 색상 값은 모든 주요 브라우저에서 지원된다. Hex 컬러는 #RRGGBB로 명시한다. – RR(Red – 빨강), GG(Green – 녹색), (Blue- 파랑) 16진수 색상으로 명시한다.모든 값은 0 ~ FF 사이여야 한다. 예를 들면, #0000ff 값은 파랑색으로 렌더링 된다. 그… Continue Reading →
시맨틱 마크업(Semantic Markup) : 컴퓨터가 웹 정보자원의 의미를 이해할 수 있도록 문서의 논리적인 구조를 묘사하는 것. 시맨틱 마크업을 통해 얻을 수 있는 장점 – 접근성이 좋아짐 – SEO(Search Engine Optimization) – 수정이 용이해짐 – 코드 가독성이 좋아짐 – 코드와… Continue Reading →
IE6 마우스 롤오버시 혹은 클릭이벤트로 이미지를 바꾼다거나 백그라운드 포지션이 변경이 될때 깜빡거리는 현상이 일어나는데.. CSS 나 javascript로 방지할 수 있다. CSS <style type=”text/css”> html { filter: expression(document.execCommand(“BackgroundImageCache”, false, true));} </style> Javascript *추천 <script type=”text/javascript”> try {document.execCommand(“BackgroundImageCache”,false,true);}catch(e){} </script>
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 →
1) HTML 2.0 표준 문서 형식 < !DOCTYPE html PUBLIC "=//IETF//DTD HTML 2.0//EN"> 2) HTML 3.2 표준 문서 형식 < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 3) HTML 4.01 표준 문서 형식 < !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"... Continue Reading →
CSS 코드에서 미디쿼리 선언하기 @media Rules @media only all and (조건문) {실행문} @media: 미디터쿼리의 선언문이다. @media only, all, and (조건문) 사이에 공백은 필수 이다. Media Type는 특정 미디어를 위해 특별히 제작 된 것이다. 예를 들어, “voice-family” 속성은 청각 사용자를 위해 설계된… Continue Reading →