Normalize CSS 적용

개요

어느날 들어온 퍼블리셔가 갑자기 CSS 파일 제일 상단에 아래와 같이 코딩을 했다.

div,p,a,table,th,td,span,strong,em,header,footer,nav,aside,article,secion,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,select,textarea{box-sizing:border-box;font-family:'나눔고딕',"Nanum Gothic", Roboto !important;}

font-family에 !important를 먹여 버렸다.
덕분에 폰트 기반 아이콘은 전부 깨진다.
이거 말고도 그 아래에도 초기화 CSS 줄지어 있었다.

대체 왜 이런 삽질을 하는걸까??

Normalize CSS 적용

잘 모르면 조금만 인터넷을 뒤져봐도 나오는 정보인데 이걸 저 삽질을 해놓으니... (아님 복붙)
Normalize CSS는 모든 브라우저 호환성을 고려하여 CSS를 일관되게 작성할 수 있게 도와주는
CSS 초기화 파일이다.

여기 들어가서 다운로드 받자.
https://github.com/necolas/normalize.css

다운로드 받고 Minify 시키면 더 깔끔하다. (min.css 생성)
https://cssminifier.com/

적용 후

이걸 적용하고 나면 CSS 작성이 정말 깔끔해진다.
Font는 제일 상단(html,body)에 한번만 선언하면 전체에 알아서 먹는다.
없을 땐 곳곳에 user agent style이 먹어서 관리하기가 힘들다. (Chrome 기준)

여담 (웹스퀘어)

여담이지만 역시 웹스퀘어는 쓰레기다.

나름 웹 플랫폼이라는 녀석이 normalize와 비슷한 기능도 없다.
그래서 Normalize CSS 적용이 필수다.

한두푼짜리도 아닌데 참 무책임한 플랫폼이다.