CSS가 이상하게 적용될 때, user agent stylesheet체크!!
작업하다가 보니,
button과 input이 이상하게 스타일링이 되는 것을 볼 수 있었다.
짜부된 부분을 developer tool로 확인하니,
(특히 COMPUTED탭으로 보면, 결국에 어떤 stylesheet이 최종적으로 영향을 미쳤는 지 볼 수 있다!)
padding-top과 padding-bottom이 고작!!!!! 1px로 지정된 것을 볼 수 있었고,
이는 user agent stylesheet에서 비롯됐음을 확인할 수 있었다.
user agent stylesheet이 뭔데요?
stackoverflow.com/questions/12582624/what-is-a-user-agent-stylesheet
What is a user agent stylesheet?
I'm working on a web page in Google Chrome. It displays correctly with the following styles. table { display: table; border-collapse: separate; border-spacing: 2px; border-color: g...
stackoverflow.com
한 마디로 하면 "각 브라우저마다 정해놓은 CSS 기본 규칙" 이라고 할 수 있다!
html파일에서 <!DOCTYPE html>을 써주지 않아 html의 최신 버전을 알려주지 않거나,
user agent stylesheet에서 명시하는 속성을, 내가 직접 override하지 않으면 그 기본 규칙이 적용될 수 있다.
이를 미연에 방지하는 법은, 브라우저의 모든 기본 CSS 규칙을 초기화하기 위해
CSS Reset (meyerweb.com/eric/tools/css/reset/)을 해주는 것이 있겠다.
내 앱의 경우에는, padding을 명시해주니, user agent stylesheet에서 설정한 기본 padding값이 덮어쓰여
바라던 모양대로 디자인이 적용됐다!!
