[html, css] 4. 반응형 width & box-sizing

div 박스 만들 때 주의점

div 박스의 width를 주게 되면 padding, border를 고려하지 않는다. 따라서 padding 안쪽 부분만 실제 width로 설정한다.

파란색 부분만 실제 width

그래서 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만클 늘어날 수 있다.

 

박스의 폭을 border까지 설정할 수 있는 속성

.box {
  box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
  box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다(기본 설정)*/
}

 

css 파일 작성시 기본으로 쓰면 좋은 속성들

div {
  box-sizing : border-box;
}
body {
  margin : 0;
}
html {
  line-height : 1.15; /*기본 행간 높이*/
}

 

css normalize

브라우저간 통일된 스타일을 주기 위해 특정 스타일을 미리 적는다.

css normalize 링크: https://github.com/necolas/normalize.css/blob/master/normalize.css

normalize.css/normalize.css at master · necolas/normalize.css