퍼블리싱/CSS/CSS3 썸네일형 리스트형 웹폰트 @font-face 웹폰트적용하는 방법 1. 태그에 넣기 2. CSS파일안에 import하기@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); 3. 직접 서버에 올려서 사용하기@font-face { font-family:"NGR"; src:url(../font/NanumGothic.eot); src:local(※), url(../font/NanumGothic.eot) format("embedded-opentype"), url(../font/NanumGothic.woff) format("woff"), url(../font/NanumGothic.ttf) format("truetype");} - 참고 : eot(IE8이하 버전 적용), woff(I.. 더보기 유용한 CSS3 Generator 사이트 css3를 사용하다보면 이런걸 어떻게 만들지 싶은게 있다.그럴때 사용하는게 다음과 같은 제너레이터사이트들이다. 1. Box-Shadow http://www.cssmatic.com/box-shadow 2. Gradienthttp://www.colorzilla.com/gradient-editor/ 3. table stylehttp://www.csstablegenerator.com/백그라운드에 그라이언트 넣는 것 까지 만들수있다. 4. CSS3 Generatorhttp://css3generator.com/ 대표적인 css3 속성들(border-radius, box-shadow, text-shadow 등)을 만들어주는 사이트이다. 더보기 띄어쓰기없는 텍스트로 늘어난 테이블 레이아웃깨짐현상 해결하기 띄어쓰기가 없는 텍스트,예를 들면 URL(https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#newwindow=1&q=puseudo+class) 이나, 영문이 쭈욱 이어져있을경우 텍스트가 정해진 영역을 벗어나 테이블 레이아웃이 깨지는 경우가 발생한다. HTML, CSS table {width:300px;height:50px;border-collapse:separate;border:1px solid #000;box-sizing:border-box;} td:first-child {width:200px;border-right:1px solid #000;} td:last-child {width:100px;} aa.. 더보기 CSS를 이용해서 checkbox 크기 조정하고 이미지처럼 꾸미기 모바일, 태블릿 프로젝트를 하다보니, 변수가 이만저만이 아니다. 안드로이드, IOS 디바이스마다 맞춰주는 것이 여간 피곤한게 아니다. 이럴때보면 오히려 크로스브라우징이 그나마 나은 거구나 하는 생각이 들 정도다. 모바일에서는 체크박스나 라디오버튼의 디폴트 사이즈가 작아 터치하는데 애로사항이 있다. 그냥 width="15px";height="15px" 이렇게 css에 박아주면? 일단 갤럭시 S3에선 통과! 그런데 문제는 먹는 디바이스가 있고, 안먹는 디바이스가 있는 것이다. 한마디로 일관되게 적용되지 않는 다는 것! 그래서 보통 선택 전 이미지와 선택 후 이미지로 대체해서 퍼블리싱을 하는 경우가 많다. 대표적인 예로 다음 모바일의 로그인 페이지이다. Daum 이용약관 동의, 개인정보 수집 및 이용 동의 체.. 더보기 이전 1 2 3 다음
