trycode

FOUC(Flash Of Unstyled Content) 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다. 이 현상은 스타일이 적용되지 않은 웹 페이지가 스타일이 적용된 웹 페이지로 변화하는 것이다. 웹 브라우저가 웹 페이지에 스타일 정의를 부르고 적용할 때 보여지는 부분을 최대한 빨리 수정하지만, 이 변화는 짧지 않은 시간 동안 나타나므로 사용자는 페이지에 오류가 있다는 생각을 하게된다. "FOUC는 CSS와 HTML의 버전 변화와는 관계가 없으며, 이것은 브라우저의 문제로 보인다." 하지만 이 문제는 브라우저에서 큰 문제가 아닌 것으로 보이는데, 브라우저 내에 프로그램된 우선 사항들이 페이지를 보여줄 때 아래와 같은 방식으로 처리하기 때문이다. 브라우저는 웹 ..

CSS 100%로 채우기 화면에 100%로 채우기 css .target{ max-width:none; max-height: 100%; min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translateX(-50%) translateY(-50%); /* 만약에 다른곳에서 상속되어 width/height가 설정된다면 아래처럼 덮어씌우자. width:auto; height:auto; */ } /*16:9의 비율로 와이드 화면이 된다면 아래처럼 미디어쿼리로 값변경*/ @media (min-aspect-ratio: 16/9){ .targ..

-webkit-text-size-adjust:n% 지정된 사이즈로 변경 -webkit-text-size-adjust:auto 텍스트크기 자동 -webkit-text-size-adjust:none 폰트사이즈 고정 아이폰 input라운드 초기화 border-radius:0px 0px; form요소의 디바이스 기반 스타일 초기화 -webkit-appearance:none; 스크롤영역 부분만 따로 스크롤 지정 -webkit-overflow-scrolling:touch; overflow-wrap: normal; /* 기본 */ overflow-wrap: break-word; /* 오버플로우가 일어나면 단어를 쪼개서 줄바꿈 */

zen conding 키워드 zen-coding 태그#아이디명 ====> 아이디 이름을 가진 태그 생성 ex) div#container 태그.클래스명 ====> 클래스 이름을 가진 태그 생성 ex) div.container +태그명 ==> 형제 노드 생성 ex) div.container+div.btn 태그 > 태그 ====> 상하 종속 태그 생성 ex) div.container>ul>li *숫자입력 ==> 생성 태그 갯수 ex) div.container>ul>li*10 클래스명 or 아이디명 or 텍스트 노드$ ===> 순차적(내림차순) 번호 붙임 ex) div.container>ul>li.list$*10 ex) div.container>ul>li.list${menu$}*10 그룹핑 ex) (div>dl..

http://css3please.com/ http://css3generator.com/ http://www.westciv.com/tools/gradients/ http://www.css3factory.com/linear-gradients/ http://css3pie.com/ https://code.google.com/p/ie7-js/ http://desandro.github.io/3dtransforms/ ( css3 애니메이션 참조용으로 좋음 )