[번역] 최신 Reset CSS

기존 Reset CSS가 아닌 최신 Reset CSS가 나왔다고 번역이 된 글을 발견해서 학습을 진행했습니다.

---

/* box-sizing 규칙을 명시합니다. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 폰트 크기의 팽창을 방지합니다. */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* list를 role값으로 갖는 ul, ol 요소의 기본 목록 스타일을 제거합니다. */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* 핵심 body의 기본값을 설정합니다. */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* 제목 요소와 상호작용하는 요소에 대해 line-height를 더 짧게 설정합니다. */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* 제목에 대한 text-wrap을 balance로 설정합니다. */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* 클래스가 없는 기본 a 태그 요소는 기본 스타일을 가져옵니다. */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* 이미지 관련 작업을 더 쉽게 합니다. */
img,
picture {
  max-width: 100%;
  display: block;
}

/* input 및 button 항목들이 글꼴을 상속하도록 합니다. */
input,
button,
textarea,
select {
  font: inherit;
}

/* 행 속성이 없는 textarea가 너무 작지 않도록 합니다. */
textarea:not([rows]) {
  min-height: 10em;
}

/* 고정된 모든 항목에는 여분의 스크롤 여백이 있어야 합니다. */
:target {
  scroll-margin-block: 5ex;
}

 

---

 

분석

/* box-sizing 규칙을 명시합니다. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

 

사진출처: https://planflow.dev/blog/what-is-box-sizing-in-css-how-does-it-work

 

- content-box : width를 Box Model 기준 content 영역만의 width로 설정

- boreder-box : width를 Box Model 기준 padding과 border의 영역까지 포함하여 설정

 

content-box를 사용하게 되면 500px width에서 border, padding이 추가된다고 하면 500px안에 padding, border값이 포함되는 것이다. 따라서 content 값은 예측할 수 없는 크기로 줄어들게 된다. 

 

/* 폰트 크기의 팽창을 방지합니다. */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

 

위는 웹 페이지의 텍스트 크기를 사용자가 조정할 수 없게 만드는 것이 목표입니다. 일부 모바일 브라우저에서 사용자의 가독성을 향상시키기 위해 기본적으로 텍스트 크기를 조정할 수 있지만 이를 방지합니다.

 

1. -moz-text-size-adjust : Firefox와 같은 Mozilla 기반 브라우저에서 텍스트 크기 조정을 방지하는 속성입니다.

2. -webkit-text-size-adjust : Chrome, Safari 등 WebKit 렌더링 엔진을 사용하는 브라우저에서 텍스트 크기 조정을 방지하는 속성입니다.

3. text-size-adjust : 표준 CSS 속성으로, 모든 브라우저에서 텍스트 크기 조정을 방지하는 속성입니다.

 

이 속성들에게 none 값을 주면, 브라우저가 텍스트 크기를 자동으로 조정하는 것이 방지됩니다. 

이를 통해서 레이아웃이 예상대로 동작하도록 할 수 있습니다.

 

 

/* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

기본 여백이 브라우저마다 다를 수 있으니 기본 여백을 제거하는 것입니다. 페이지 레이아웃을 더 정확하게 제어하고, 브라우저 간 일관성을 유지하기 위해 사용합니다.

 

/* 목록 역할이 있는 ul, ol 요소에서 기본 목록 스타일을 제거합니다. */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

 

기본 목록 스타일을 제거합니다.

Safari에서는 목록 스타일이 제거되면 해당 요소가 보이스 오버(시각장애인들을 위한 스크린 리더 기능)에서 '목록'으로 인식되지 않는 문제가 있습니다. 따라서 role='list' 속성을 추가해서 해당 요소가 '목록'임을 명시적으로 나타냅니다. 

 

/* 핵심 body의 기본값을 설정합니다. */
body {
  min-height: 100vh;
  line-height: 1.5;
}

 

- min-height : 100vh; => 최소 높이를 설정하는 것입니다. body의 높이가 화면높이보다 작더라도 화면 전체를 채우게 됩니다. 

- line-height : 1.5; => 텍스트 줄간격을 현재 글꼴 크기의 1.5배로 설정하겠다라는 뜻입니다. 가독성을 향상시키는 데 도움이 됩니다. 

 

추가적으로 dvh, svh에 대한 설명도 있는데 vh로도 충분하다라는 내용입니다. 

dvh, svh는 새로운 뷰포트 단위입니다. 

이미지 출처  : https://blanche-toile.com/web/large-small-and-dynamic-viewport-units

 

- svh : 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져옵니다. 주소 표시줄이 없어져도 기존 표시줄의 높이를 뺀 나머지 값을 가져옵니다. 

- lvh : svh와 반대로 사용자 화면 기준으로 가장 긴 뷰포트 값을 가져옵니다. 주소 표시줄이 있더라도 주소 표시줄이 없을 때의 총 화면의 길이를 가져온다.

- dvh : 주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되고 있건 상관 없이 현재 보여지는 뷰포트 높이를 동적으로 가져옵니다. 

 

/* 제목 요소와 상호작용하는 요소에 대해 line-height를 더 짧게 설정합니다. */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

 

위와 동일하게 제목과 버튼도 line-height를 설정해줍니다. 대신에 1.5보다는 짧은 1.1로 설정합니다. 

 

/* 제목에 대한 text-wrap을 balance로 설정합니다. */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

 

텍스트의 줄 바꿈 방식을 균형있게 조절하는 속성입니다. 박스 내부에 글이 있다고 가정하고 박스 크기가 줄어들 때 단어별로 개행을 해줍니다.

제목의 텍스트가 여러 줄로 나누어질 때, 각 줄의 텍스트 길이를 가능한 한 균등하게 만드는 것입니다. 

[참고] https://developer.chrome.com/blog/css-text-wrap-balance?hl=ko

 

 

/* 클래스가 없는 기본 a 태그 요소는 기본 스타일을 가져옵니다. */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

 

클래스 속성이 없는 <a> 태그에 대해 특정 스타일을 설정해줍니다. 

 

- text-decoration-skip-ink: auto  => 텍스트 장식의 글자 ascenders(b, d, h, k, l 등과 같이 위로 향하는 부분) 및 descenders (p, q, y 등과 같이 아래로 향하는 부분)를 건너뛰도록 합니다. 이렇게 하면 텍스트 장식이 글자를 가리는 것을 방지해 가독성을 향상 시킬 수 있습니다. 'auto'값은 브라우저가 필요에 따라 이를 결정하도록 합니다.

 

- color : currentColor -> <a> 태그의 텍스트 색상을 설정합니다. 

 

/* input 및 button 항목들이 글꼴을 상속하도록 합니다. */
input,
button,
textarea,
select {
  font: inherit;
}

 

부모 요소로부터 상속을 받도록 하는 단축속성입니다. 부모 요소의 글꼴 스타일을 상속받아 웹 사이트의 전체적인 디자인과 일관성을 유지할 수 있게 됩니다. 

 

 

/* 행 속성이 없는 textarea가 너무 작지 않도록 합니다. */
textarea:not([rows]) {
  min-height: 10em;
}

 

rows 속성이 없는 <textarea> 태그에 최소 높이를 설정하는 역할을 합니다. rows 속성이 없는 <textarea> 태그가 너무 작아지지 않도록 그 최소 높이를 10em으로 설정하는 것입니다. 

 

/* 고정된 모든 항목에는 여분의 스크롤 여백이 있어야 합니다. */
:target {
  scroll-margin-block: 5ex;
}

 

:target은 URL의 해시(#)에 의해 참조된 요소를 선택합니다. 

 

- scroll-margin-block: 5ex -> CSS 스크롤 스냅핑 관련 속성으로, 스크롤이 스냅될 때 해당 요소의 상단과 하단에 추가로 남겨질 여백을 지정합니다. 5ex는 해당 요소의 글꼴 높이의 5배만큼의 크기를 의미합니다.

 

웹페이지에서 특정 섹션으로 바로 이동할 때 (예 : example.com/#section1), 그 섹션은 화면 상단에 위치하게 됩니다. 

scroll-margin-block속성이 지정된 경우, 그 섹션의 상단과 하단에는 지정된 여백만큼의 공간이 추가로 남게됩니다. 이는 해당 섹션의 내용이 화면 상단에 바로 붙지 않고 적절한 여백을 가지도록 하여 가독성을 높입니다.

즉, URL의 해시에 의해 참조된 요소가 화면 상단에 바로 붙지 않고, 적절한 여백을 가지도록 합니다. 

[MDN] https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-start

 

 

---

 

 

[원본] https://andy-bell.co.uk/a-more-modern-css-reset/

A (more) Modern CSS Reset - Andy Bell

[번역] https://ykss.netlify.app/translation/a_more_modern_css_reset/?utm_source=substack&utm_medium=email

(번역) (더) 최신의 CSS Reset