css초기화 - modern-css-reset

reset css로 배웠는데
요즘 실무에서는 modern-css-reset를 많이 쓴다고..?
알아두자

✅ 1. Modern CSS Reset이 뭐야?

• Andy Bell 이 만든 현대적인 최소화된 reset
• normalize.css보다 가볍고, 실제 필요한 요소만 잘 초기화
• 접근성(A11y), 가독성, 개발자 UX까지 고려

✅ 2. 적용 방법 (진짜 간단!)

📌 방법 1: 복붙해서 직접 쓰기

/* modern-css-reset: https://github.com/hankchizljaw/modern-css-reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: system-ui, sans-serif;
}

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

input, button, textarea, select {
  font: inherit;
}

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

#root, #__next {
  isolation: isolate;
}

🔗 원본 출처: modern-css-reset GitHub

📁 reset.css 같은 파일로 만들어서 맨 위에 @import "./reset.css"; 해도 OK!

📌 방법 2: CDN으로 불러오기 (비추)

• 따로 CDN 호스팅은 없지만, 직접 복붙해서 사용하는 방식이 주류야.
• normalize처럼 NPM으로 설치하는 방식도 있으나, 이건 큰 프로젝트에서만 사용.

✅ 적용 예시 (너 프로젝트에 넣기)

@import url("https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap");

/* modern reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  font-family: "Kaushan Script", cursive, sans-serif;
}

/* 나머지 CSS 변수들, 스타일 넣기 */
:root {
  --primary-color-1: hsl(21, 81%, 29%);
  /* ... */
}

🔥 정리