Reset css 정리해보기

-reset.css 파해쳐보기

다른 브라우저의 스타일을 하나로 통일해야 하는 선행작업을 reset.css라고 보면 된다.

*{margin:0;padding:0;font:inherit;color:inherit;}
*, :after, :before {box-sizing:border-box;flex-shrink:0;}
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4}
html, body {height:100%;}
img, picture, video, canvas, svg {display: block;max-width:100%;}
button {background:none;border:0;cursor:pointer;}
a {text-decoration:none}
table {border-collapse:collapse;border-spacing:0}

이제 위에 있는 문장들을 하나하나씩 쪼개어 설명해보려한다.

*{margin:0; padding:0; font:inherit; color:inherit;}

*(모든요소를 지칭) 모든요소에 대해서 margin(여백)과 padding(패딩)을 0으로 설정하고,
폰트와 색상을 상위 요소에서 상속받게 설정한다.

-font:inherit는 버튼이나 Input등의 글자가 고유의 시스템 글자로 되는 문제가 있어 현재 글자와 동일하게 보이기 위해 사용
-color:inherit의 경우 a나 input, textarea의 글자색을 그대로 쓸 수 있게 하기 위해서 사용

*, :after, :before {box-sizing:border-box;flex-shrink:0;}

box-sizing:border-box로 설정하여 박스 모델 계산이 테두리를 포함하게 하고,
flex-shrink:0으로 설정하여 디바이스 크기에 따라 flex요소가 자동으로 축소되지 않게 한다.
(가급적 원본의 컨텐츠가 잘리지 않고 크기대로 나와줘야 더 좋음)

:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4}

:root 는 일반적으로 문서의 루트 요소를 나타냅니다 (일반적으로 요소를 가리킴)

① -webkit-tap-highlight-color: transparent;
사용자가 터치 디바이스에서 요소를 탭할 때의 강조 효과 색상을 제어한다. transparent 값을 설정하면 탭 강조 색상이 없음

② -webkit-text-size-adjust: 100%;
WebKit 브라우저(Safari)에만 적용됨
사용자가 브라우저 설정에서 폰트 크기를 조정할 때 텍스트 크기 조정 동작을 제어한다. 100% 값을 설정하면 텍스 트 크기가 브라우저의 기본 폰트 크기에 맞게 조정된다.

③ text-size-adjust: 100%;
-webkit-text-size-adjust 속성과 유사하지만 다른 브라우저에서 지원된다. 브라우저의 기본 폰트 크기에 맞게 텍스트 크기 조정을 설정한다.

④ cursor: default;
루트 요소의 기본 커서 유형을 설정한다. (일반적으로 화살표 포인터)

⑤ line-height: 1.5;
루트 요소 내의 텍스트의 줄 높이를 설정한다. 1.5 값은 줄 높이가 폰트 크기의 1.5배가 됨을 의미
배수가 아니게 사용하려면 px단위를 사용

⑥ overflow-wrap: break-word;
루트 요소 내에서 단어의 오버플로우(넘침)을 어떻게 처리할지 지정한다. break-word 값을 설정하면 단어가 컨 테이너를 넘치는 것을 방지하기 위해 임의의 지점에서 단어를 분리할 수 있다.

⑦ -moz-tab-size: 4;
모질라 파이어폭스(Firefox)에서만 적용됨. 탭 문자의 너비를 4 스페이스로 설정함.

⑧ tab-size: 4;
표준 tab-size 속성을 지원하는 브라우저에서 탭 문자의 너비를 4 스페이스로 설정함.

html, body {height:100%;}

html과 body 요소의 높이를 100%로 설정

img, picture, video, canvas, svg {display: block;max-width:100%;}

이미지나 비디오가 inline요소로 되어있어 외부에서 엘리먼트를 감싸다 보면 하단에 4px의 여백이 생겨서 block요소를 사용하여 여백이나 너비를 주게끔 설정한다.
max-width:100% 는 css가 삐져나가지 않도록 최대너비를 100%로 설정해줌

button {background:none;border:0;cursor:pointer;}

버튼요소에 대한 스타일을 설정 - background:none (배경없음),border:0 (테두리없음), cursor:pointer (마우스커서는 포인터 모양)으로 설정

a {text-decoration:none}

a(링크 요소)의 텍스트 스타일을 밑줄이 없도록 설정

table {border-collapse:collapse;border-spacing:0}

table(테이블 요소)에 셀간의 테두리르 어떻게 처리할지를 지정함

-border-collapse:collapse는 테두리 병합 (인접한 셀을 합쳐 깔끔한 레이아웃을 만들 수있음, 셀 테두리가 겹치지 않고 하나의 테두리로 보여짐)
-border-spacing:0 는 테두리 간격을 0으로 설정

여기에 ul,ol{list-style:none}도 추가되면 더 좋음!