브라우저마다 제공하는 user agent style이라는게 존재하는데, 말 그대로 브라우저별 스타일 기본값이다.
브라우저별로 이런 스타일 기본값이 다르기 때문에 우리는 reset.css와 normalize.css를 사용하게 된다.
1. Reset.css
reset.css란, 이름 그대로 모든 브라우저의 형태에서 기본으로 제공되는 스타일을 전부 없애버리는 초기화 기법이다.
가장 유명한 기법이었는데, 마지막 업데이트가 2011년도인 것을 보아 오래된 기법이고, 유용한 스타일까지도 초기화해서 비효율적인 부분도 있다.
-
장점:
익숙한 방법, 흰 도화지에 원하는대로 그림그리기 -
단점:
표준화된 방법이 없고 브라우저 업데이트에 맞춰 고쳐야한다.
모든게 날아가서 원래 스타일을 까먹기도 한다.
https://cdnjs.com/libraries/meyer-reset
2. Normalize.css
normalize.css란, reset.css와 달리 모든 브라우저의 스타일을 동일하게 유지하는 스타일 기법이다.
여러 브라우저에서도 일관되어 보이게 할 수 있고 스타일을 굳이 다 삭제하지 않고 변형을 하고 싶은 일부만 수정하여 사용할 수 있어 reset.css보다 비교적 최근까지도 업데이트 중이다.
-
장점:
정규화 필요한 스타일만 수정하면되고 친절한 주석을 보며 커스터마이징도 가능하다. -
단점:
초기화에 익숙해져 있다면 적응하는데 시간이 필요하다.
지속적인 업데이트가 되지만 어쨋든 브라우저에 맞춰 업데이트하는 것이 필요하다.
https://cdnjs.com/libraries/normalize
이 외에도
- 브라우저가 웹 페이지에서 렌더링 되는 과정은?(예를 들어 주소창에 네이버를 입력하게 되면?!)
- margin 겹친 현상
- 박스 모델(Box Model)
- URL과 URN을 포함하는 URI
- 비동기 vs 동기
관련된 점을 공부해봐야겠다.
[참고 자료]
백엔드 코린이😁