퍼블리싱 하기전에 한번 읽고 환경 만들어놓고 가기

<meta> tag 작성

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-인코딩 언어 선언

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- IE-edge기준으로 가장최신의 호환성으로 자동 렌더링 해주기

<meta name="format-detection" content="telephone=no" />
- 기기가 자동으로 감지하는 포맷 없애기

반응형 제작시 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=medium-dpi" />

크로스브라우징을 위한 js

<!--[if lt IE 9]>

<script type="text/javascript" src="html5.js"></script>

<script type="text/javascript" src="selectivizr-min.js"></script>

<![endif]-->

ie9 미만으로는 html5 태그의 지원과 셀렉터의 지원 문제가 있으므로

상위 js들을 if주석으로 처리

위 2가지 말고도 여러가지 있지만 

많으면 많을수록 느려지므로 최소한의 필수 항목.

> IE8 이하 대응 js 정리된 사이트 <

제이쿼리 버전

IE8까지 지원하는 버전은 1.X버전이므로

프로젝트가 ie8까지 맞춘다면, 또는 주 타겟은 아니지만 충분히 서브타겟으로 

고려를 해야한다면 2.X가 아닌 1.X버전으로 사용해야함

> 제이쿼리 버전별 다운로드 링크 <

밴더 프리픽스(Vendor Prefix)

-webkit- : 구글의 크롬, 애플의 사라파 웹브라우저 적용

-moz- : 모질라(파이어폭스) 적용

-ms- : ms의 인터넷 익스플로러 적용

-o- : 오페라 적용

현재 웬만한 브라우저는 밴프 없이 가능하므로 쓸떼없이 남용 하지 않기

- 지원안되는 구버전 브라우저(ie8 이하, 파폭3.6, 크롬9, ios4용 safari)

는 따로 이슈를 모색 하는걸로.

border-radius / background-orizin,clip,size / box-shadow 밴더 필요없음

gradients, calc(), transitions 는 -webkit-만 사용

 [ prefixfree 라고 자동으로 밴프넣어주는 js가 있음. 굳이 쓸필요가 있을까 싶음 ]

background-size:cover / opacity / raba ie8 이하 대응 정리된 사이트

> https://opentutorials.org/module/2258/13705 <

reset.css

reset.css를 너무 맹신하지말고, 홈페이지를 시작과 동시에 css를 픽스 시켜야 함.

페이지가 적으면 상관없지만, 많으면 많아질수록 reset을 건들기 힘들어짐을 명심.

all 요소인 *을 자제하며

* {font-size:12px} 를 주게되면 h1에 16px를 주었지만 자식요소인 span, strong 등이 안에있으면 그 안에 있는 요소에게 또 font-size를 주어야하기 때문.

title개념의 h1~h6 또는 특정 태그들에게만 지정된 font-size를 주는 것이 좋다.

2017's most popular(아직2017초 인데 어째서 17년도 모스트인거지?)

라는 reset.css를 모아놓은 사이트

> CSSRESET <