본문 바로가기
Front End/HTML & CSS

[CSS] 김버그의 HTML&CSS는 재밌다 | CSS RESET

by 옐 FE 2021. 5. 1.

본격적인 작업 전에, 작업을 수월하게 할 수 있도록 Setting / 생산성을 높이는 작업

  ・ 디자인 시안을 보고 사용해야 하는 폰트의 종류와 개수를 파악해서 link:css

  ・ Bootstrap이 제공하는 Grid System link (한 번도 안 써본 사람은 있어도, 한 번 쓰고 안 쓰는 사람이 없다고 언급)

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

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

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

button,
input,
textarea {
  font-family: "DM Sans", 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;
  letter-spacing: -0.05em;
  color: #2B292D;
}

/* min-width: 768px */
@media screen and (min-width: 768px){
  p {
  font-size: 22px;
  line-height: 1.4545454545;
  }
}

깨끗한 도화지를 만드는 것처럼 이 정도의 기본적인 작업을 해주고

더 필요한 게 있으면 순간 순간마다 더 적어준다.

댓글