html5 썸네일형 리스트형 CSS3 애니메이션을 편하게 적용할 수 있도록 도와주는 Animate.css CSS3 애니메이션 모듈화 파일을 제공해 주는 사이트입니다. 애니메이션 적용을 위해 매번 css파일을 복잡하게 건들지 않고 클래스만 삽입시켜 간단하게 애니메이션 효과를 볼 수 있다는 장점이 있겠습니다. http://daneden.github.io/animate.css/ 더보기 ie9 이하에서 css3 transition 사용하기 css3 transition은 ie10이상의 환경에서만 구동되도록 되어있습니다. ie9이하에서 사용할 수 없을까 하는 생각으로 검색해보니 역시나 jquery 를 활용한 방법이 있었네요~ 사이트 주소는 아래와 같습니다. http://louisremi.github.io/jquery.transition.js/test/index.html http://playground.benbarnett.net/jquery-animate-enhanced/ 더보기 브라우저별 설정 브라우저별 명칭 - webkit / safari, chrome - o / opera - moz / firefox - ms / explorer -webkit-tap-highlight-color포커스가 될 떼의 색상을 결정한다. 아이폰에서는 사각형 박스형태로 표시되며 색상, 알파값이 제대로 적용이 된다. 안드로이드에서는 알파값이 0이 아니라면 두꺼운 주황색테두리로 표시가 된다. 사용예) -webkit-tap-highlight-color:rgba(255,255,255,255) 처럼 사용할 수 있다. -webkit-text-size-adjust:none;텍스트 비율을 조정한다. 속성 : auto(기본값) | none -webkit-border-radius:2px;인풋 요소의 라운딩을 조절 -webkit-appe.. 더보기 메타 태그(meta tag)를 이용한 브라우저 렌더링 설정 문서타입(DTD)를 제대로 선언했음에도 불구하고 페이지 호환성 보기로 렌더링되는 경우가 발생한다. 메타태그를 사용하여 이 문제를 해결할 수 있다. ie9 이상의 브라우저가 설치되어 있는 상태에서 ie9의 렌더링 모드로 보여진다. ie10으로 렌더링해서 보여준다. 실패시 쿼크모드로 렌더링해서 보여진다. 현재 설치되어있는 브라우저의 버젼에 맞도록 렌더링되어 보여진다. ie의 최신버전으로 렌더링되어 보여지고 크롬이 설치되어 있으면 크롬의 엔진으로 렌더링되어 보여진다. 더보기 [HTML5] html5에서의 < col >사용 1 2 3 4 5 6 7 colgroup을 사용하면서 에 width값이나 align값을 삽입하면서 코딩을 해보았지만 HTML5에서는 col의 인라인 속성을 대부분 지원하지 않는다고 나온다.. HTML5 작성시에는 style을 따로 입히거나 css를 이용하여 작업하면 해결된다. 1 2 3 4 5 6 7 더보기 box-sizing ??? 이전부터 해오던 스타일도 있고, 크로스브라우징 때문에 사용하지 못했던 css가 바로 box-sizing 입니다. 보통 width값을 정해놓아도 padding이나 border값에 의해 너비값이 변경되는 구조였다면, box-sizing을 지정하면 padding과 border의 영향을 받지 않고 너비를 고정시킬 수 있습니다. 해당 css는 IE8 이상부터 지원됩니다. 1 2 3 4 5 6 7 8 designsharp.tistory.com designsharp.tistory.com 1 2 3* {padding:0;margin:0} .cnt {width:400px;padding:30px;margin:20px;background:#f5f5f5;border:1px solid #d1d1d1} .cnt1 {padding.. 더보기 [CSS3] css를 활용한 기본 애니메이션 더보기 [html5] <hgroup> 태그 제목 요소들을 묶어줄 때 태그를 사용한다. ~ 요소들을 묶어서 레벨 단위로 표시한다. 1 2 3 4 5 6 Welcome to my WWF For a living planet The rest of the content... 더보기 이전 1 2 다음
