Build a conference landing site with Vue.js.
Made a ‘Electronic display’ section to show sponsor list,
and show session detail information like a sports player with animation.
*.woff 이다.*.eot(O) *.woff(X)*.eot(O) *.woff(O)*.eot(X) *.woff (O)결국 모든 브라우저를 지원하기 위해
*.eot와*.woff를 모두 준비해야 한다.
표준과 비표준 글꼴을 모두 지원하기 위해 @font-face규칙을 두 번 사용하는 경우 IE 6~9는 두개 형식 모두 내려받아 성능에 좋지 않겠지.
/* Not recommended */
@font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
@font-face{font-family:ngeot; src:url(NanumGothic.eot)}
body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}
위 코드는 더 나은 성능을 위하여 다음과 같이 개선할 수 있습니다. Paul Irish가 제안한 방탄 코드 입니다.
/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’);
}
body{font-family:나눔고딕, NanumGothic, ng}
eot형식과 woff를 순차저긍로 참조.local(※)※는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정format(‘woff’)를 명시적으로 지정하면 이 형식을 지원하는 브라우저만 글꼴 내려받음.
/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
}
보고 공부한 링크
1. 구글 임포트 코드를 HEAD태그의 가장 첫번째(CSS보다 앞)에 위치
2. link로 로드해라
– 구글 웹폰트 로딩 방법은 @import, 참조링크, js세가지.
– 참조링크 이용해서 HTML최상에 코드넣어라.
– <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
3. 적은 폰트 갯수
– 표제를 위한 볼드타입 / 가시를 위한 가독성 좋은 폰트 최대2개 폰트 선정
4. 코드 한줄에 여러 폰트 로드
– <link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>
5. 쓸것만 로드: 폰트 weight옵션 쓸것만 로드한다
6. Load faster fonts: 폰트마다 로딩 시간 다르니 빠른걸로 골라라
7. 정말 확실히 로드해야한다면 Web Font Loader를 써라.
– 사이트 나머지 로드되기 전에 로드하고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실히 피해준다.
웹 폰트 문제 해결. @font-face troubleshooting
구글 웹폰트를 빠르게 로드하는 팁 7가지
한글 웹 폰트 경량화해 사용하기
https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/
https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/
이번에 새로운 프로젝트 개발을 하면서, 신박한 익스텐션을 발견했습니다.
바로 Web Developer인데요(이름이 참 정직^^;;)
이름에 걸맞게 웹개발자에게 유용한 플러그인들을 개발한(혹은 모아둔) 확장 프로그램입니다. 크롬/파이어폭스/오페라 모두 지원하네요.
2014년 5월 23일이 마지막 업데이트 날짜지만 여전히 쓰기 좋습니다.
원하는 페이지에서 익스텐션을 실행시켜 ‘Outline block level elements’를 누르면
이렇게 border: 1px solid red를 일일이 타이핑한것과 같은 화면을 보여줍니다.
혹은 ‘Display Id&Class Details’를 누르면 아이디/클래스 정보들이 옆에 뜨네요.
포토샵 Ruler처럼 가이드라인을 넣거나, 영역을 지정해서 크기, start position등을 알 수도 있습니다.(퐁이 기여엇!)
이외의 좋은 기능들은
세션 쿠키 지우기
Check/Uncheck all checkboxes
Display div orders
CSS Validation
등등이 있습니다.
(로컬에서 돌리면 항상 되지만, 몇몇 안먹는 외부 사이트들도 있습니다.)
그럼 함께 더 행복하고 쾌적한 프론트엔드 개발을 해보아요!
(그리고 그 툴을 적용한 우리의 적나라한 CSS)
HTML5 boilerplate는 빠르고, 튼튼하며, 유연한 웹사이트 제작을 도와주는 템플릿이다.
html5웹을 만드는 첫 단계 뼈대를 제공해준다.
다운을 받아 index.html을 보면
– html5에 최적화된 뼈대
– 간단한 ie대응
– 파비콘
– jQuery
– normalize.css (기본 CSS리셋)
– modernizr (HTML5의 새로운 태그들을 IE8이하에서 인식시키기)
– google analytics 코드스니펫
과 같이 웹 frontend 제작에 널리 쓰이는 라이브러리들이 모아져있다.
블로그 이사갔어요! https://milooy.github.io/ 