HTML, CSS
CSS - 노멀라이즈 / 리셋
- -
비교
| 특징 | CSS 리셋 (Reset) | CSS 노멀라이즈 (Normalize) |
|---|---|---|
| 기본 스타일 처리 | 브라우저 기본 스타일을 모두 제거하여 모든 요소를 초기화합니다. | 브라우저 간 기본 스타일 차이를 보완하면서 유용한 기본 스타일은 그대로 유지합니다. |
| 접근 방식 | 모든 요소의 스타일을 제거한 후, 개발자가 전부 직접 스타일을 정의합니다. | 기본 스타일의 일관성을 높여 브라우저 차이를 줄이고 접근성을 개선합니다. |
| 대표 라이브러리 | Elad Shechter’s CSS Reset | normalize.css |
| 장점 | - 초기 상태에서 스타일링을 시작하여 예측 가능성이 높습니다. - 모든 요소를 동일한 상태로 만듭니다. | - 기본 스타일의 장점을 유지하면서 일관성을 제공합니다. - 접근성과 사용성을 개선합니다. |
| 단점 | - 기본 스타일을 모두 제거하므로 추가적인 스타일 설정이 필요합니다. | - 모든 브라우저 차이를 완벽하게 없애지는 못할 수 있습니다. |
후기
복잡하게 생각하지 말고 그냥 reset.css 파일 하나 추가하는게 제일 간단할 것 같다.
reset.css
/***
The new CSS reset - version 1.11.3 (last updated 25.08.2024)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Fix mobile Safari increase font-size on landscape mode */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu, summary {
list-style: none;
}
/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
ol {
counter-reset: revert;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
box-sizing: border-box;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
box-sizing: border-box;
}
/* Remove details summary webkit styles */
::-webkit-details-marker {
display: none;
}반응형
Contents
소중한 공감 감사합니다