CSS reset, CSS normalize

김민성·2023년 6월 27일

목적

CSS Reset과 CSS Normalize의 목표는 모든 브라우저의 기능적, 디자인적 일관성을 실현하는 것이었습니다.
둘의 차이는 브라우저의 내장 스타일 의존 여부입니다.
CSS Reset은 브라우저의 내장 스타일에 전혀 의존하지 않는 반면,
CSS Normalize는 브라우저 내장 스타일을 최대한 따르면서 차이점들만 손 보는 정도라고 볼 수 있습니다.

CSS Reset

CSS Reset은 프로젝트 css작업 전 전체 css 파일에 적용될 css 설정을 미리 설정해두는 것입니다.
공식이 정해져있는 것은 아니므로, 많이 쓰이는 버전들을 참고하여 자신만의 CSS Reset을 만들면 좋을 듯 합니다.
이 글에서는 Andy라는 디자이너분의 버전을 소개해드리려고 합니다.

Andy's CSS Reset

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

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

하나하나 뜯어보겠습니다.

box-sizing: border-box;

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

이는 박스에 기본적으로 설정되어 있는 속성인 content-box를 border-box로 바꾸는 작업입니다.
border-box는 content + border + padding을 전부 고려하여 사이즈를 정하기에 개발자가 디자인하기 편리해집니다.
그리고 pseudo-elements로 경우를 명시적으로 설정해두는 것이 좋다고 생각되어 단순히 *로만 표기하지 않았습니다.

margin: 0;

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

다른 버전의 경우 *로만 margin을 설정하는 경우가 있었는데 Andy의 경우에는 브라우저 설정이 있는 tag들만 margin을 설정합니다.
Andy가 설정하는 방식이 reasonable하다고 판단되어 Andy의 버전이 따르려고 합니다.

scroll-behavior: smooth;

html:focus-within {
  scroll-behavior: smooth;
}

scroll-behavior: smooth;는 스크롤로 작동되는 웹 환경에서 UX를 향상시킬 수 있는 속성이어서 필수라고 생각합니다.
pseudo selector를 사용하지 않는 버전도 있었지만 :focus-within 되었을때만 설정되는 것이 reasonable한 것 같습니다.

body

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

min-height: 100vh

height의 단위로 vh를 추천하지않는 글을 읽은 적이 있습니다.
그 이유는 브라우저의 ui가 존재하기에 개발한 웹페이지의 100vh는 화면에 모두 보이지 않기 때문입니다.
예를 들어 내가 사용중인 아이폰13미니의 높이는 2340px로 되어있는데 사파리의 ui가 300px정도 존재한다면
100vh(2340px)로 설정한 디자인은 일부가 잘린채로 보이게 되기 때문입니다.(2340 - 300)
다만, 브라우저마다 ui의 height가 다르기에 일관성을 위해 Andy는 100vh로 설정했다고 해석했으며 이는 충분히 납득되었습니다.

text-rendering: optimizeSpeed;

이 부분은 찾아봐도 잘 모르겠어서 다음에 다시 공부해 봐야겠습니다.

line-height: 1.5;

Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia.

기본 설정은 1.2로 되어있는데, 1.5 이상의 수치를 설정해야 읽는데 어려움이 없다고 합니다.

list-style: none;

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

여기서 중요한 부분은 [role='list']인 경우에 list-style: none;을 적용하는 것입니다.
그 이유는 navigation bar를 주로 list로 만드는데 디자인을 위해 list-style: none;을 설정하게 되면 VoiceOver가 list의 sementic한 요소를 읽지 못하게 됩니다. 이를 개선하기 위해 상위 요소인 ul이나 ol에 role='list'속성을 주게 되면 VoiceOver가 list의 sementic 요소를 읽을 수 있게 되는 것입니다.

text-decoration-skip-ink: auto;

a:not([class]) {
  text-decoration-skip-ink: auto;
}

이는 globally하게 link에 설정되어있지만 Andy가 불편함을 느꼈던 적이 있어 설정한 경우라고 합니다. 이는 굳이 작성하지 않아도 될 듯 합니다.

img

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

max-width: 100%는 이미지가 viewport에서 짤리게 되면 의미가 없기에 그 안으로 설정해놓는 것인듯하여 reasonable 합니다.
display: block은 이미지는 inline 태그이기에 다른 inline 태그들과 섞이게되면 가독성이 떨어질 수 있다고 생각하여 reasonable합니다.
다만, 이 속성은 단순 img만 국한될 필요없이 모든 미디어에 적용되면 좋을 듯 합니다.(picture, video, canvas, svg 등)

font: inherit;

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

위 설정된 태그들은 기본 설정된 글꼴이 존재합니다. 그렇기에 웹페이지 글꼴과 일치하지 않으면 이질감을 줄 것입니다.
이에 글꼴을 상속하여 통일시킨다면 일관성을 줄 수 있고 UX적으로도 불편하지 않을 듯 합니다.

@media (prefers-reduced-motion: reduce)

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

이 분은 prefers-reduced-motion: reduce와 !important의 활용법이 머리에 들어오지 않아서 우선은 적용하지 않으려고 합니다. 이후 관련 문법이 이해가 된다면 다시 해석하고 적용해보겠습니다.

CSS Normalize

CSS Normalize는 공통으로 사용되는 파일이 존재해서 다운 후 적용하면 될 듯합니다.
그러나 개인적으로 이해없이 다운하여 적용하는 것을 좋아하지 않아서 CSS Reset을 우선 적용하다가 필요를 느끼게된다면 다시 공부 후적용해보겠습니다.

느낀점

CSS도 공부할 게 엄청 많고 깊다는 것을 깨달았습니다.
CSS도 쉽게 볼 것이 아니라 분석하고 사용이유를 알고 사용하겠습니다.

참고사이트

김민성

'WHY'를 묻고 reason을 공부하는 개발외ㅓ인

이전 포스트

CRA 후에 git clone은 왜 안되지?

다음 포스트