[HTML/CSS] 노멀라이즈(normalize)

[HTML/CSS] 노멀라이즈(normalize)

 

: 브라우저 간 유저 에이전트 스타일의 오차를 줄이고 HTML 요소의 기본 스타일을 브라우저 별이 아닌 공통으로 일관되게 유지하도록 돕는 CSS 파일이다. 버그만 줄이는 방향으로 스타일을 재지정하는 것.

 

body에는 기본 css가 설정되어 있다.

 

body에는 기본 css가 설정되어 있다. 마진, 패딩의 기본값은 0으로 들어가있으며, width 등이 auto로 설정되어 있다.

태그 별로 문서 시작 전에 노멀라이즈를 해주는 것이 좋다. 공통적으로 그 태그의 형식을 지정해주면 브라우저 별로 다르지 않게 형태가 나올 수 있으니 해주는 것이 좋다.

 

 

 

노멀라이즈 시 CSS 값 설정시 유의할 하나의 정보(노멀라이즈 내용은 아님)

++ auto와 직접 값 설정의 차이점

 

기본 block 형식의 박스는 width를 줄였을 때 다음과 같이 된다. 

 

margin-left: 10px

margin-right: 20px 했을 때, left가 우선적용된다.

margin-right: 20px을 두고, margin-left: auto를 적용했을 때는 오른쪽으로 붙게 된다.

 

‘auto’

 

margin: 0 auto는 인라인 속성에서는 적용되지 않는다. 이런 경우 속성을 block 속성의 태그로 바꾸어 사용하는 것도 방법이다.

span태그를 div로 바꾸거나 CSS 속성으로 display: block;를 넣어준다.