본문 바로가기

전체 글231

HTML5 전역속성 (Global Attributes) HTML5 전역속성 (Global Attributes) 굵고 빨간건 HTML5부터 적용된것 Attribute Description accesskey 키보드 단축키 명시하고 그 페이지에서 엘리먼트를 선택 할 수 있도록한다. class 다수 선택자,엘리먼트 분류 contenteditable ture 설정으로 사용자들이 텍스트변경가능 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_contenteditable contextmenu 엘리먼트의 콘텍스트 메뉴들을 정의할 수 있도록한다. 이메뉴들은 사용자가 트리거시 팝업된다. (현재는와 함께 지원되는브라우저없슴) data-* HTML 태그 안에서 사용자 데이타 저장한다 http://www.w3sch.. 2014. 2. 24.
CSS3 :first-line and :first-letter 문장 첫글자크게하기 CSS3 :first-line and :first-letter 문장 첫글자크게하기 문장의 첫글자를크게하는방법으로 :first-line 와 :first-letter를 사용할것이다.먼저 :first-letter를 이용하여 첫글자를 크게 p:first-letter { font-size: 50px; } 다음은 첫번째 줄을 굵게 p:first-line { font-weight: bold; } 그런데 두 문단이라면 이 두문단의 첫글짜가모두 커져버릴 것이다. 우리목표는 단첫번째껏만 선택, 적용하는 것이다.:first-child를 이용하자 p:first-child:first-letter { font-size: 50px; } p:first-child:first-line { font-weight: bold; } 제대로 된.. 2014. 2. 18.
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.

티스토리툴바