user agent stylesheet란? (css가 제대로 동작하지 않을때, 체크해볼것)

css가 정상적으로 작동하지 않아서, 개발자도구를 켜보니 내가 주지 않은 css가 적용되고 있었다.

 

 

img에 적용되고 있는user agent stylesheet

나는 img에 이런 css를 주지 않았는데 왜 이런 값이 적용되고 있는걸까?

자세히 보니 img옆에 user agent stylesheet이라고 적혀있는 것이 보여서 찾아보았다.

 

 

🔍 원인

내가 아무런 값을 지정해주지 않았을때, user agent stylesheet가 적용될 수 있다.

 

이를 이해하기 위해서 user agent stylesheet이 무엇인지, 자세하게 공부하였다.

 

🔫 user agent stylesheet이란?

(=  사용자 에이전트 스타일시트)

사용자 에이전트 / 브라우저에서 기본스타일을 제공하는 기본 스타일시트.

모든 문서에는 이러한 user agent stylesheet가 있다.

 

✔️  작성자 스타일 > 사용자 에이전트 스타일시트보다 우선한다.

 

(css에는 캐스케이드라는 것이 존재한다. 그래서 우선적으로 사용되는 스타일시트가 있다)

 

 

✅ 해결

1. 아직 css를 많이 적용하지 않았을때

➡️ reset.css나 normalize.css와 같이 css 재설정 스타일시트를 사용한다.

(공통 속성 값을 특정 요구사항에 맞게 변경하기 전에 모든 브라우저에 대해 알려진 상태로 설정해준다)

 

2. 이미 css를 많이 적용했을때

➡️ 문제가 생긴 부분에만 작성자 스타일시트를 적용한다.

( reset 나중에 시켜주면 이미 적용된 css들이 깨질수가 있으므로)

 

 

위에도 적었듯이 작성자 스타일은 사용자 스타일(user agent)보다 우선한다.

그래서 user agent대신 내가 적용하고 싶은 css를 적용한다.

 

 

 

🤔 나의 경우, 이미 css를 많이 만들어 준 상태라서 reset를 해주기 어렵다고 판단했다.

그래서 문제가 발생한 부분의 css만 수정하는 방법을 택했다.

img에 user agent stylesheet이 적용되어 문제가 발생한 것이기 때문에

img에 적용하고 싶은 값을 넣어주었다.

img {
  width: 50px;
}

위와 같이 적용하고 싶은 css를 적어주면 된다.

 

 

👍 이렇게 하면 이제 img에 내가 적용하고 싶은 css가 잘적용되는것을 개발자도구에서도 확인할 수 있다.

 

 

 

 

🕵️‍♀️ 느낀점

일반적인 이론을 공부하기 보다, 이렇게 에러를 겪으면서 공부하는 것이 성장하는데 많은 도움이 될것같다는 생각이 들었다.

 user agent stylesheet이 무엇인지 뿐만 아니라, 구체적으로 그것이 어떤 계단식구조을 가지고 있는지도 더 와닿았다. 

cascade를 알기는 알았지만 이렇게 구체적으로 적용해보면서 배우니까 더 좋았다.

원리를 이해하면서 오류를 해결하니까 단순히 하나의 해결법만 있는것이 아니라 다양한 선택지중에 더 좋은 방법을 고를수있다는것도 좋다.

 

mdn의 공식문서를 보면서 공부했는데 많은 도움이 되었다. 

 

 

 

참고자료

Introducing the CSS Cascade - CSS: Cascading Style Sheets | MDN