웹 전반, 브라우저/HTML, CSS
reset.css과 box-sizing 등 css 환경 설정
DarrenKwonDev
2020. 3. 4. 22:03
reset.css는 각 태그들이 기본적으로 가지고 있는 크기, 패딩, 마진 등의 속성을 0으로 만들어 페이지를 꾸미기 쉽게 만들어주는 css이다. css 파일에 넣은 뒤 import하자.
https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
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를 이용하자. 수명이 늘어나고 행복이 상승한다
Font Awesome
fontawesome.com