[CSS]Reset CSS

CSS 작업을 하기 전 환경 세팅은 생산성에 큰 영향을 줍니다.

환경 세팅 작업 중 하나인 Reset CSS는 브라우저에서 제공하는 못생긴 요소들을 reset 시켜 주는 작업입니다.

a, button, input, textarea, list 와 같이 기본적으로 스타일이 좀 붙어있는 것들을 주로 손보게 됩니다.

 

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

위 사이트의 reset을 그대로 가져다 써도 무방하지만

본인 프로젝트에 맞는 최적의 reset을 해주는 것이 더 도움이 됩니다.

 

/* Reset CSS */
a {
  color: inherit;
  text-decoration: none;
}

button, 
input,
textarea {
  font-family: '_-_-_-_', sans-serif;
  font-size: 16px;
}

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

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

p {
  font-size: 16px;
  line-height: 1.5;
  color: #2b292d;
  letter-spacing: -0.01em;
}

/* >= 768px (Desktop)*/
@media screen and (min-width:768px) {
  /* Reset CSS*/
  p {
    font-size: 22px;
    line-height: 1.3636363636;
  }
}