본문 바로가기

전체 글229

HTML5 크로스브라우징 HTML5 크로스브라우징 html5shiv, ie9.js, ie7.js, modernizr, and css3pie(출처) * html5shivHTML5 요소를 지원하지 않는 브라우저에서 해당 요소를 지원할 수 있게 해주는 라이브러리. * ie9.js, ie7.jsIE를 사람답게(...) 만들어 주는 라이브러리. 구버전의 Internet Explorer에 있는 HTML 및 CSS issue들을 fix함. 투명 png에 대한 부분에 대해 처리.단순히 head 부분에 위 구문을 집어넣으면 된다. * ModernizrHTML5 & CSS3을 지원하는지를 체크해 줌.html5shiv를 포함하고 있음. 그리고 많은 일을 하지만, 딱히 html5의 많은 요소들을 쓰는 것이 아니라면 사용하지 말 것. 왜냐하면 페이지 .. 2014. 2. 18.
HTML5 예제 : 이미지와 설명텍스트 코딩 HTML5 예제 : 이미지와 설명텍스트 코딩간단한 이미지와 설명이 되있는사이트를 html5로 코딩해보자 실험할 사이트는 Pinterest이다 http://pinterest.com/사이트중 이걸 코딩 해보도록한다.첫번째로 원래 있던걸 보자 .가 너무 많이쓰이다보니 뭐가뭔지 햇갈 린다. html5에서는 우리가 익숙하지않아서 그렇지 좀더 명확화 할수있다. Repin Like Comment Awesome cat description. 25 likes 2 comments 100 repins Me onto here 1. 첫번째로 , , 를 사용한방법이다 Repin Like Comment Awesome cat description. 25 likes 2 comments 100 repins Me onto here 2. .. 2013. 1. 23.
CSS3 트랜지션 (transition) 효과 CSS3 트랜지션 (transition) 효과 트랜지션은화면의 변화나 움직을 보여주고 싶을때 쓸수있다. 사용방법은 다음과 같다 transition: property(변화시키고자 하는요소, 배경생 폰트컬러 등) duration(액션이 진행될 시간) timing-function(액션의 방법) delay(지연시간); div{ transition: color 2.5s ease-in 0;} 위는 간단한예. 브라우저마다 -moz-,-webkit-,-o-를 붙여야된다(귀찮아서 생략). 물론 IE는 지원하지 않는다. 2012. 3. 5.
CSS3 Transforms 소스 변환, 추출기 CSS3 Transforms 소스 변환,추출기 이것저것 바쁘고 빨랑사용해야 할때 쓰는 것. 각도,크기, 이동을 입력하면 각브라우저 버전에 맞게 소스가 나온나 IE도 가능하다 IE's CSS3 Transforms Translator http://www.useragentman.com/IETransformsTranslator/ 2012. 3. 5.
CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용 CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용 매트릭스를 이용해 3D변화는 무궁무진하다. 하지만 2D에 비해 좀 어여운게 사실. 삼각함수 회전 정도는 이해한다는 가정에 포스팅한다.매트릭스를 바로 체험 해볼수 있도록 링크를 걸어두었다. (웹킷기반 브라우저만 지원) http://sianasiatiger.cafe24.com/study/matrix3dexplorer/matrix3dexplorer.html 스크롤바를 조절하여 결과를 볼 수 있을 것이다. 이제 하나하나 살펴보자. 4열 은 투시도법이다. 그외 것은 아래설명 1. 디폴트 : 아무변화 없는 그대로다. 단위 행렬이다. [1,0,0,0], [0,1,0,0], [0,0,1,0], [0,0,0,1], 2. 크기변환 : 대각선의 S값을 변.. 2012. 3. 5.
CSS3 엘리먼트 변형 3D (Transform 3D) CSS3 엘리먼트 변형 3D (Transform 3D) 3D엘리먼트를 둘러보자 먼저 믿기지않을 정도의 예제를 보자. IE, 오페라는 지원하지 않는다. 변형을 이용한 CSS3만으로 만들어진 애니메이션 http://sianasiatiger.cafe24.com/study/css3butterfly/butterfly.html Function Description matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines a 3D transformation, using a 4x4 matrix of 16 values translate3d(x,y,z) Defines a 3D translation translateX(x) Defines a 3D translation, using only .. 2012. 3. 5.
CSS3 엘리먼트 변형2D (transform) CSS3 엘리먼트 변형2D (transform) 엘리먼트를 포토샵에서 편집하지않고 마음대로 바꿀수 있다는건 참 편리한 점이다.CSS3부터 적이 가능하다.3D도 있다. 여기선 2D를 둘러본다 IE는9부터 지원한다. 기본적으로 transform 을 사용하다.그 뒤의 값으로는 ratate,scale,skew,traslate,martix가 있다. 각 브라우저마다 앞쪽에 접두사를 붙여야된다(그림 참조). 이 그림처럼 여러변형이 가능하다예제는 첫번째만 붙이고 나머지는 포스팅 편의상 간략히 transform 만 해줬다. 소스는 다음과 같다.matrix는 크기,이동,회전등 한번에 다 표현 할 수 있는것으로 조금 복잡하기만 할뿐 크게 어렵지 않다. 매트릭스를 테스트 해볼 툴도 있으니 가보자 http://sianasiat.. 2012. 3. 5.
CSS3 투명도(opacity) 그림자(shadow) 설정 CSS3 투명도(opacity) 그림자(shadow) 설정초창기 부터 주목되었던 투명도와 그림자에 대해 알아본다 투명도(opacity) 투명도를 설정함으로서 뒤의 z-inex설정에서 뒤에 엘리먼트라던가 겹친 엘리먼트를 보이게하는 등의 모습을 구현 할 수 있다.브라우저는 역시 IE가 예외 IE9는 지원한다. 단 IE8이하버전은 필터를 사용해야한다. box1 opctical 50% box2 opctical 30% 포지션은 겹치게 했다. div{ width:300px; height:150px; position:relative;} .box1{ left:100px; top:30px; background-color:#F00; opacity:.5; } .box2{ left:150px; top:-50px; backgr.. 2012. 3. 4.
CSS3 border-image 테두리 이미지 CSS3 border-image 테두리 이미지라운드 박스를 만들 수 있을 뿐만 아니라 이제는 이미지 까지 가능하다. 일단 필요한 것은 정사각형 이미지 이 이미지의 귀퉁이가 꾸며줄것이고 가운데는 각 변을 반복할 것이다. 이 그림 사이즈는 90px X 90px이다 html은 생략 h2엘리먼트에 아무글이나 쓰자. 그리고 CSS는 다음과 같다. 브라우저 마다 다르므로 모질라,웹킷속성도 지정했다. 좀더 참조할려면 여기 http://www.w3schools.com/cssref/css3_pr_border-image.asp h2{ width:200px; border-width:30px; -moz-border-image:url(../images/flower.jpg) 30 round; -webkit-border-image.. 2012. 3. 4.