reset.css과 box-sizing 등 css 환경 설정

reset.css는 각 태그들이 기본적으로 가지고 있는 크기, 패딩, 마진 등의 속성을 0으로 만들어 페이지를 꾸미기 쉽게 만들어주는 css이다. css 파일에 넣은 뒤 import하자.

 

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

CSS Tools: Reset CSS

box-sizing은 padding값에 따라 box가 확장하지 않게 해준다. 혼동을 피하기 위해 border-box로 설정해주자

 

body의 높이는 상황에 따라 다르겠지만 우선 반응형을 위해 min-height:100vh로 주자. 

@import "./reset.css"; //reset.css에 위 사이트의 css를 저장 후 import
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap&subset=vietnamese");

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh; /*그냥 height를 주면 고정된다. 반응형을 위해 min-height를 사용하자*/
  background-color: white;
  color: "#2c2c2c";
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  /* background-image: linear-gradient(#fc6767, #ec008c); */
}

 

 

tip) 

google font와 fontawesome를 이용하자. 수명이 늘어나고 행복이 상승한다

 

https://fontawesome.com/

Font Awesome