- 실습 사이트 예제: https://python-lecture-example-1.netlify.com/
- 코드: https://github.com/tinytinystone/python-lecture-example/tree/3_09_reset_vs_normalize
브라우저마다 제공하는 유저 에이전트 스타일이 있습니다. ul에 정의한 크롬 유저 에이전트 스타일을 한번 볼까요. 기본적으로 margin과 list-style, display, padding 등의 속성이 적용되어 있는 것을 볼 수 있습니다.
이러한 기본 스타일이 유용할 때도 있지만, 해당 값을 원하지 않아서 매번 새롭게 선언해줘야 할 때도 있습니다. 또, 브라우저들이 모두 일관된 스타일을 제공하지 않는 경우도 있어 예측하기에도 쉽지 않습니다. 그래서 모든 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 초기화하는 방식이 생겨났는데요. 이를 CSS Reset이라고 부릅니다.
CSS reset에는 여러 가지 종류가 있는데요. Eric Meyer의 CSS reset이 유명한 편입니다. https://cdnjs.com/libraries/meyer-reset 다만 마지막 업데이트가 2011년에 있었던 만큼 오래된 자료이기도 하고, 유용한 스타일까지도 초기화를 하여 비효율을 초래할 수도 있다는 비판이 있습니다. 그래서 최근에는 필요한 부분만 초기화를 하여 사용하기도 하고, CSS Normalize라는 기법을 사용하기도 합니다.
normalize.css는 브라우저 에이전트 스타일의 오차를 줄이고, 브라우저가 가지고 있는 버그를 최소화하는 스타일을 재지정하는 방식의 오픈소스 프로젝트입니다. CSS Reset과는 다르게 기본값들을 최대한 보존하고 수정을 최소화했습니다. 또 코드를 보시면 주석이 달려 있기 때문에 필요한 크로스 브라우징 상황에서 해당 코드만 가져다가 사용할 수도 있습니다. normalize.css 코드를 파일로 저장해 HTML에 연결하여 사용할 수 있습니다.
저희는 실습을 할 때에 CSS reset과 normalize를 적절히 적용해볼 예정인데요. 전체 문서에서 스타일 초기화가 필요한 부분은 초기화를 하고, 크로스 브라우징 시에 오류를 잡기 위해서는 normalize.css를 적용해볼 예정입니다. 각각의 브라우저는 고유한 렌더링 방식을 가지고 있기 때문에, CSS Reset을 사용하거나 normalize를 적용하더라도 필연적으로 다르게 보이는 부분이 발생하게 됩니다. 이를 이해한 상태에서, 사용자가 불편함을 느끼지 않는 선에서 디자인의 통일성을 줄 수 있는 방향을 고민해보는 것이 옳을 것입니다.