뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (8) - 스타일 링크

HTML5, CSS 강의 33강 ~ 34강 학습 중 메모

 

• 33강, 스타일 링크하기
• 34강, 스타일 리셋/평준화/현대화

#1. reset.css

 : style.css 파일을 만들었습니다. 무엇부터 해야 할까요? 
html 은 기본 스타일이 있습니다. 그런데 마음에 들지 않아 몽땅 새로 디자인하여 사용하고 싶은 경우,
html 의 스타일을 모두 없애버리는 reset.css 사용하는 방식을 사용할 수 있습니다.

#2. normalize.css

 : 또는 normalize.css 스타일을 사용하여, 브라우저마다 기본 스타일이 다르기 때문에 브라우저의 기본스타일, 디자인을 모두 맞춰주는, 평준화 시켜주는 normalize.css 를 사용할 것인지 선택하면 됩니다.
 우리는 이 두 가지 중 선택하면 됩니다.
 요즘은 reset.css 를 사용하여 새로 만듭니다.

#3. 구 버전의 브라우저 지원하기

 : HTML5Shiv 란 것이 있습니다.
 만약 HTML5 를 인식 못하는 브라우저에서 웹 문서를 기동하게 된다면 동작하지 못하겠죠. 선택자 등을 찾지 못해요.
 이것을 어떻게 해결할까.. 하다가
 누군가 블로그에, 브라우저에서 지원하지 않더라도 document.createElement("article"); 코드를 입력하면 article을 인식하더라 라는 내용을 게시한 적이 있었고, 이에 관심과 집중도가 높아지면서 엘리먼트, 네비, 섹션 등.. 여러 태그들을 인식하기 위한 create 파일을 공개하여 쓰게 됩니다.
 그 파일이 바로 HTML5Shiv 입니다.
 추가적으로, HTLM5 에 등장하는 태그들은 위와 같은 태그 뿐만 아니라, 기능을 가지고 있는 태그들이 있습니다.
 그래서 그 기능들이 모 브라우저에서 정상적으로 동작하는지 체크하는 함수 스크립트! "Check enabled"를 제공하는 스크립트 파일을 제공하는 Modernizr 이 있습니다.
 만약 내가 Canvas 를 사용하려고 하는데 현재 브라우저에서 사용이 가능한지 확인하려면 모더나이저에서 확인 가능!