<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card">
<figure>
<div class="play-button">
<img src="" alt="이미지1">
</div>
</figure>
<div class="text-wrap">
<h1>Lorem, ipsum dolor.</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, cum!
</p>
</div>
</div>
</body>
</html>
위와 같은 HTML 문서를 만들었다고 생각해보자. 그러면 아래와 같은 형태의 HTML 문서가 완성되는데 보다시피 외부스타일이나 내부스타일이나 그 어떤 스타일들이 적용되지 않고 있다.
하지만 h1의 글자굵기와 크기가 일반적인 p태그와 다르게 설정되어있는 것이 보이고 margin값도 들어가있는게 보인다. 개발자도구를 확인해보면 figure 태그에 아무런 스타일값을 주지 않았음에도 기본적인 스타일값이 적용되어 있는 것을 볼 수 있다.
그 옆에 자세히 보면 user agent stylesheet라는 항목이 보이는데 바로 브라우저에서 기본적으로 설정되어있는 스타일값이다. 이는 h1태그에서도 확인할 수 있다.
이 user agent stylesheet는 각 브라우저(크롬, 사파리 등)마다 차이가 있을 수 있기 때문에 Normalizing이나 Resetting 으로 스타일을 초기화하거나 표준화하여 어떤 환경(브라우저)에서도 유저가 생각했던 그 스타일에 변함이 없도록 한다.
Normalizing과 Resetting에 대해 더 자세하게 알고 싶다면 아래의 글을 참고하길 바란다.
https://sosol1016.tistory.com/121
Normalizing(normalize) & Resetting CSS 초기화
CSS 초기화? 웹브라우저마다 각자의 HTML 요소에 기본 스타일들(user agent stylesheet)을 가지고 있다. CSS스타일링을 적용할 때 이러한 기본값이 설정된 스타일링은 방해가 되고 브라우저마다 다르게
sosol1016.tistory.com
