웹 개발을 쉽게 해주는 CSS 기본 설정

브라우저마다 기본 스타일이 지정되어 있습니다.

같은 태그라도 브라우저마다 조금씩 다르게 보일 수 있다는 점을 최소화 시키기 위해

기본적으로 아래와 같은 CSS 속성을 설정 하고 시작하면 좋습니다.

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

html {
  font-size: ??px;
}

태그가 기본적으로 가지고 있는 마진, 패딩 값을 0으로 적용합니다.

요소의 너비와 높이를 설정할 때 기본적으로 border를 기준으로 설정하게끔 box-sizing 설정을 border-box로 해줍니다.

기본적으로 사이즈 단위 중 rem 단위는, html에 달려있는 폰트사이즈를 추종합니다.

html에 font-size: 10px를 설정해주면 1rem = 10px이 되는 구조입니다.

Project Box