[2026.02.13] rest.css

문제

에디터 작업을 하는 중,

h1 태그와 p태그를 넣어도 모두 똑같은 사이즈로 나오는 것을 확인하게 되었다. 

분명 초기에 작업했을때에는 이렇게 태그를 무시하지 않았는데

무슨 코드 때문에 이렇게 작용되고 있는지

그리고 무슨 이유로 팀원이 이걸 넣었는지 파악하기 위해서 조사하기 시작했다. 

 

원인 코드

reset.css

*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
header,
nav,
main,
article,
section,
aside,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
span,
ul,
ol,
fieldset,
legend,
label,
form,
input,
button,
select,
option,
textarea,
pre {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font: inherit;
  vertical-align: baseline;
}

input,
textarea,
keygen,
select,
button {
  letter-spacing: inherit;
  line-height: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

a,
abbr {
  color: inherit;
  text-decoration: none;
}

button {
  outline: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

 

조사

요새 Modern React 프로젝트들은 reset.css같은

브라우저의 디폴트 헤딩 스타일을 없애는 작업을 해준다고 한다. 

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

 

예시를 보니

우리의 코드에서 font:inherit가 이 작업을 하고 있는것 같다.

(나머지는 브라우저에서 자동 border와 margin을 생성하는 것 억제)

 

1. 이런걸 적용하는 이유

To remove inconsistent browser defaults and gain full design control

결론은 브라우저마다 서로 다른 built-in stylesheet (User Agent Stylesheet)가 존재하기 때문이다

 

• Chrome, Safari, Firefox can differ slightly
• Default margins often break layouts
• Headings may not match your design system

2. inherit의 뜻

Take the font-size from your parent element instead of using your default

 

CSS has priority rules:

1. Browser default styles (lowest priority)
2. Your CSS files (higher priority)

그래서 CSS 파일에 직접 inherit하라고 적으면

브라우저의 디폴트 2em을 무시하고 부모 태그나 이 태그에 적용된 스타일링부터 적용하는 것이다.