웹 개발 세계는 끊임없이 변화하고 있으며, 우리가 사용하는 기술도 마찬가지입니다. 거의 4년 전, Set Studio의 Andy는 최신의 CSS Reset을 소개했습니다. 그 시점에서는 새롭고 혁신적인 접근이었지만, 시간이 흐르면서 새로운 기술과 방법론이 등장했기 때문에, 이제 그 업데이트된 버전을 공유한다고 합니다. 참고로 Andy는 이 CSS Reset을 자체 프로젝트에 적용하여 검증했다고 합니다.
오늘은 Andy의 원본 CSS Reset의 핵심 가치를 유지하면서, 최신 웹 표준과 실무에 맞게 조정한 새로운 CSS Reset 버전을 소개해드리겠습니다. 우리는 이를 통해 웹 개발의 기본을 재정립하고, 더 깔끔하고 효율적인 코드 작성을 할 수 있을 것입니다.
전체 CSS Reset 코드
웹 페이지의 모든 요소에는 브라우저에서 기본으로 설정된 스타일이 있습니다. 이 기본 스타일은 때때로 우리가 원하는 디자인과 충돌할 수 있습니다. 이를 해결하기 위해, CSS Reset은 이러한 기본 스타일을 '재설정'하여 웹 개발자가 보다 일관된 기반에서 시작할 수 있게 도와줍니다.
/* 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;
}
CSS Reset 코드 분석
웹 개발에서 CSS Reset의 역할은 단순해 보일 수 있지만, 그 중요성은 매우 큽니다. 그래서 이번에는 앞의 전체 CSS Reset의 핵심 정의 요소들을 세부적으로 분석해보겠습니다.
1. box-sizing이 중요한 이유
box-sizing 규칙은 모든 요소와 의사 요소가 border-box를 사용하여 크기를 조정하도록 설정합니다. 이는 요소의 패딩과 테두리가 너비와 높이 계산에 포함되게 만듭니다.
/* box-sizing 규칙을 명시합니다. */
*,
*::before,
*::after {
box-sizing: border-box;
}
이전에는 웹 페이지의 레이아웃을 구성할 때 상대적인 크기 조절에 많은 중점을 두었지만, 현대 웹 개발은 유연한 레이아웃과 유동적인 타입을 선호합니다. 비록 box-sizing 규칙이 예전만큼 중요하지 않을 수 있지만, 명시적인 크기 조정이 필요한 경우가 많기 때문에 CSS Reset에 여전히 포함되는 것이 중요합니다.
2. 모던 웹을 위한 폰트 크기 조정의 중요성
웹 페이지의 가독성과 사용자 경험을 최적화하는 데 있어 폰트 크기의 역할은 무시할 수 없습니다. 특히, CSS Reset에서 폰트 크기 조정은 중요한 부분을 차지합니다.
폰트 크기 팽창 방지의 필요성
CSS Reset에서 중요한 부분 중 하나는 html 태그에 대한 폰트 크기의 팽창을 방지하는 것입니다. 이 규칙은 웹 페이지가 다양한 장치와 브라우저에서 일관된 방식으로 표시되도록 합니다.
/* 폰트 크기의 팽창을 방지합니다. */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
이 규칙의 목적은 폰트 크기가 사용자의 환경에 따라 자동으로 조정되는 것을 방지하는 것입니다. 이는 특히 모바일 장치에서 중요한데, 여기서 브라우저는 종종 가독성을 높이기 위해 폰트 크기를 조정합니다.
접두사의 중요성
-moz-와 -webkit- 같은 접두사가 왜 여전히 필요할까요? 이러한 접두사들은 브라우저 간 호환성을 유지하면서도 최신 기술을 활용할 수 있게 해줍니다. 모든 브라우저가 최신 표준을 완벽하게 지원하는 것은 아니기 때문에, 이러한 접두사는 여전히 중요합니다.
3. 효율적인 레이아웃 구축을 위한 여백 관리
웹 페이지 디자인에서 여백은 요소 간의 공간을 정의하고, 가독성과 시각적 균형을 제공하는 중요한 역할을 합니다. CSS Reset에서 여백 관리는 디자인의 일관성과 정교함을 위해 필수적입니다.
여백 제거의 중요성
CSS Reset의 핵심 요소 중 하나는 기본 여백을 제거하는 것입니다. 이는 웹 페이지의 요소들이 보다 예측 가능하게 배치되도록 합니다.
/* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin-block-end: 0;
}
여백에 대한 사용자 에이전트 스타일을 제거함으로써, 개발자는 흐름과 공간을 보다 정확하게 제어할 수 있습니다. 이전의 CSS Reset에서는 모든 측면의 여백을 제거했지만, 최신 접근 방식에서는 논리적 속성을 사용하여 끝 여백만을 제거합니다. 이는 프로덕션 환경에서도 효과적으로 작동합니다.
레이아웃 디자인에서의 여백 활용
웹 페이지 레이아웃을 설계할 때, 여백은 요소들 사이의 관계를 정의하고, 콘텐츠의 가독성을 높이는 데 중요한 역할을 합니다. 적절한 여백 사용은 웹 페이지의 전체적인 미적 감각을 향상시키며, 사용자에게 보다 쾌적한 브라우징 경험을 제공합니다.
4. 접근성과 디자인의 균형을 위한 목록 스타일 관리
웹 페이지 디자인에서 목록 요소의 스타일링은 정보의 구조화 및 표현 방식에 영향을 미칩니다. CSS Reset에서는 이러한 목록 요소의 기본 스타일을 재정의하여 디자인과 접근성 사이의 균형을 맞추는 것이 중요합니다.
목록 스타일 제거의 중요성
CSS Reset의 주요 부분 중 하나는 ul 및 ol 요소에 대한 기본 목록 스타일을 제거하는 것입니다. 이를 통해 개발자는 목록의 시각적 표현을 자유롭게 커스터마이징할 수 있습니다.
/* 목록 역할이 있는 ul, ol 요소에서 기본 목록 스타일을 제거합니다. */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
