reset CSS 작성하기

기본적으로 브라우저에 입혀져있는 스타일링 요소를 CSS작업 전에 처리해주지 않으면 작업 중 오류가 발생하거나, 내가 먹인 속성대로 나오지 않을 때가 있다.

이때 reset CSS를 작성해주면, 각 요소별 적용되는 브라우저의 기본 스타일링을 초기화 시켜준다. 그럼 우리는 편안해진 마음으로 CSS작성을 하면 된다.

마크업만 완료한 상태이다.
알 수 없는 마진, a태그의 기본 스타일링, ul,ol,li태그의 기본 스타일링,버튼의 보더,
배경의 기본 스타일링이 먹여져있다. 그리고 textarea와 input태그는 focuse되었을 때 보더에 파란색 선이 생긴다. 이 또한 CSS작업을 방해하는 기본 스타일링이므로 없애줘야 한다.

이를 위한 CSS 코드는 다음과 같이 짤 수 있다.

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: "Inter", sans-serif;
}

button {
  border: none;
  background: transparent;
}

button:focus,
button:active,
textarea:focus,
textarea:active,
input:focus,
input:active {
  box-shadow: none;
  outline: none;
}

ul,
ol,
li {
  list-style-type: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

마진도 사라지고, 각 태그들의 기본 스타일도 사라진 것을 볼 수 있다.
a태그의 기본 설정인 파란색 폰트 색상은 inherit을 사용하여 부모요소의 컬러를 상속받도록 했다.

지금 폰트 스타일도 설정해준 상태인데, 여기서 button, input, textarea 요소들은 body에 먹인 폰트 스타일이 먹지 않은 것을 볼 수 있다. 이 요소들은 개별적으로 다시 선언해줘야 한다.

button,
textarea,
input {
  font-family: "Inter", sans-serif;
}

잘바뀐 것을 확인할 수 있다.😊

사용하는 요소들 중 기본 스타일을 수정할 필요가 있다면, 미리 reset CSS를 작성하고 작업을 시작하자. 중간에 스타일링이 안먹거나 이상하게 먹어서 혼란스러워할 필요도 없다.

(이 내용은 김버그님의 강의를 듣고 복습하면서 정리한 내용임)