본문 바로가기

Web

어떻게 사이트에서 구글 폰트를 빠르게 로드할 수 있을까? 원문 : 7 Tips to Load Google Web Fonts Faster어떻게 사이트에서 구글 폰트를 빠르게 로드할 수 있을까? 스타일되지 않거나 다른 기본 폰트가 로드된 다음에 번쩍거리며 구글 웹 폰트로 대치되는 경우를 보는 것은 그리 드문 현상이 아니다. 이것은 방문자에게 초기 몇 초 동안이라도 당신의 웹사이트 디자인 경험을 망치고 방문자들을 괴롭힌다. 그러므로 웹폰트를 더 빠르고 정확한 방법으로 보여줄 필요가 있다.표제에서는 Oswald, 본문에서는 Open Sans를 예로 설명한다.Load Google Fonts First구글 임포트 코드를 HEAD 태그의 가장 첫번째 - CSS 화일보다 더 앞 - 에 위치시킨다. 이렇게 하면 CSS보다 먼저 폰트를 로드한다.Use Link Format구글 .. 더보기
각 목록요소에 숫자가 순차적으로 붙는 클래스 삽입하기 contentcontentcontentcontentcontent각각의 리스트에 순차적으로 붙는 클래스명을 넣고자 할때가 있습니다.단순 html 코딩으로만 구현하는 것이면 위와 같이 에 class="item01"이란 식으로 클래스를 삽입하면 되겠지만 개발언어를 통해 구현하게 되면 스크립트를 이용해 구현해야합니다.$(document).ready(function(){ $('#list li').each(function(index) { $(this).addClass('item' + index); })});$(document).ready(function(){ $('#list li').each(function(index){ $(this).attr('class', 'item' + index); });}); 더보기
\(원) 표시를 모바일에서도 제대로 보여지게 하려면 단순 키보드의 \키 입력으로는 윈도우 외 안드로이드,ios에서 제대로 보여지지 않습니다. 이 경우 유니코드를 사용하여 간단히 해결 할 수 있습니다. 금액 단위 유니코드 sign 10진수(decimal) 16진수(hex) \(원) ￦ ￦ ￦ ￦ $(달러) $ $ $ $ £(파운드) £ £ £ £ ¥(옌) ¥ ¥ ¥ ¥ 관련 사이트 : http://www.fileformat.info/index.htm 더보기
본고딕(Source Han Sans) 소개: 오픈 소스 한중일 통합 서체 어도비와 구글에서 한중일 통합 서체인 본고딕을 출시하였습니다. 세가지 언어를 지원하니 작업할 때 당연히 편리하고 오픈소스이기에 상업적으로도 이용 가능합니다. 글꼴 디자인의 저작권은 어도비에 있으며 누구나 제한 없이 쓸 수 있도록 아파치 2.0 라이선스가 적용되어있습니다. 좀더 자세한 내용은 Google Developers Korea와 Adobe Typekit Blog를 통해 확인 할 수 잇습니다. http://googledevkr.blogspot.kr/2014/07/cjkfont.html http://googledevkr.blogspot.kr/2014/07/cjkfont.html 전 Creative Cloud 서비스 "Typekit에서 글꼴 추가"를 통해 본고딕을 설치했습니다. 사용해보니 정말 좋습니다... 더보기
브라우저별 조건부 주석 사용 및 활용하기 국내 웹 환경을 고려해보면 아직까지도 익스플로러를 무시할 수 없기 때문에 웹페이지를 제작함에 있어서 브라우저에 따라 혹은 브라우저 버젼별로 조건부 주석이 필요한 경우가 많다. 브라우저의 호환성에 따른 문구를 제시하거나 여러가지 용도로 사용할 수 있는 조건부 주석은 아래와 같다. - IE 9 버전에서 표시할 내용 - IE 9 이상 버전에서 표시할 내용 - IE 9 초과 버전에만 표시할 내용 - IE 9 이하 버전에만 표시할 내용 - IE9 미만 버전에만 표시할 내용 활용 1. (* html5shiv 응용) html5를 지원하지 않는 구버전의 브라우저에서도 html5 스타일을 지원할 수 있도록 해주는 html5shiv 스크립트를 조건부 주석으로 넣어줄 수 있다. 사이트 링크 : https://code.goo.. 더보기
script를 이용해 페이지 타이틀명 임의로 바꾸기 자동으로 페이지 타이틀명을 뿌려지게 잡아놨는데 특정 페이지의 타이틀명을 바꿔줘야 할 경우 그냥 간단히 해결할 수 있는 방법이다. 더보기
Creative Commons Lisence (CCL) CCL(Creative Commons License)를 사용하는 이유는 자신의 저작물을 보호하기 위함인데개인 블로그를 하면서도 CCL에 대해서 잘 모르고 있기 때문에 이 기회에 좀 알아보고자 한다. 이미 인터넷에서 검색해보면 많은 자료들이 나와있지만 어떻게 사용해야 하는지 좀 정리해본다. http://creative.cckorea.org/xe/?mid=cclCCL에 대해서 잘 설명이 되어있는 사이트이니 참고해도 좋을 듯 하다. 더보기
[vimeo] 비메오 동영상 관련 설정 웹상에서 동영상을 보여줘야 하는데 공간,플레이어 디자인, 사용자 설정, 썸네일 등 여러가지 상황을 잘 커버해줄 수 있는 플레이어가 있다면 유투브와 비메오가 아닌가 싶다. 개인적으로는 vimeo plus 를 구입해서 사용하고 있는데 아주 만족하고 있다. 일단 광고도 없고 여러가지 설정을 내 마음데로 지정할 수 있기 때문인다. 비메오 플러스 비고 요금 년 60,000원 환율에 따라 차이가 있음 용량 주마다 5GB 제공 트래픽 무제한 플레이어 내에서 여러가지 요소들을 보이거나 가릴 수 있고 영상이 끝나면 나오는 썸네일이나 광고같은 것도 내 마음대로 설정이 가능하다. 더보기

티스토리툴바