[부트스트랩] 반응형과 IE지원관련

WEB/HTML & CSS 2014. 9. 22. 14:12

http://libsora.so/posts/ie7-responsive-web-framework/

 

 

그리드 샘플

http://www.996grid.com/demo.html

[HTML]IE 관련 if IE

WEB/HTML & CSS 2014. 8. 19. 10:17


<!--[if IE 8]> <link rel='stylesheet' href='ie8.css' type=text/css><![endif]-->

<!--[if IE 7]> <link rel='stylesheet' href='ie7.css' type=text/css><![endif]-->

<!--[if IE 6]> <link rel='stylesheet' href='ie6.css' type=text/css><![endif]-->

if IE 사용법


<!--[if !IE]> <![endif]-->ie브라우저가 아닐 경우

<!--[if IE]> <![endif]--> ie브라우저일 경우

<!--[if IE 8]> <![endif]-->ie8 브라우저

<!--[if IE 7]> <![endif]--> ie7 브라우저

<!--[if IE 6]> <![endif]--> ie6 브라우저

<!--[if lt IE 8]> <![endif]--> ie8미만 브라우저

<!--[if lte IE 8]> <![endif]--> ie8이하 브라우저

<!--[if gt IE 8]> <![endif]--> ie8초과 브라우저

<!--[if gteIE 8]> <![endif]--> ie8이상 브라우저



[CSS]div 위치 가운데

WEB/HTML & CSS 2014. 8. 19. 06:13

<DIV style="POSITION: absolute; WIDTH: 125px; TOP: 165px; margin-left:166px; LEFT: 50%; background-color:#FFF; display:none;border:4px solid; border-color:#f3f3f3;font-size:14px; font-weight:bold; " id='GNB_menu' align="center"><div>

[HTML] CSS_ 나눔웹폰트 적용

WEB/HTML & CSS 2014. 8. 1. 10:37

익스플로러8 까지는 eot 를 지원하고, 익스플로러9부터는 eot, woff 를 지원

크롬, 파이어폭스, 사파리, 오페라 등은 예전부터 woff 를 지원


 즉, eot 와 woff 2가지만 적용하면 거의 모든 브라우저에서 볼 수 있다






구글 웹폰트 서비스를 활용한 웹폰트 적용


@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');



적용은

font-family:'Nanum Gothic'




자신의 서버를 활용한 웹폰트 적용


@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.woff')}

@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.eot')}




최적화된 웹폰트 적용


@font-face{

font-family:"Nanum Gothic";

src:url('/fonts/NanumGothic.eot');

src:url('/fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),

url('/fonts/NanumGothic.woff') format('woff'),

url('/fonts/NanumGothic.ttf') format('truetype');

url('/fonts/NanumGothic.svg#NanumGothic') format('svg')

src:local(※), url('/fonts/NanumGothic.woff') format('woff');

}




[HTML] '140708_ 초기 세팅하기 (웹개발 관련)

WEB/HTML & CSS 2014. 7. 8. 14:50

 

 

웹 개발 관련 추천 툴

 

- sublime text ----

 

- sublime 플러그민 패키지 설치

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

 

- 플러그인 emmet ->> 단축기 설정

http://docs.emmet.io/

 

 

 

- Firefox 활용 -> firefox 플러그인

      https://getfirebug.com

 

- http://opentutorials.org/course/1029/5536