lty's Blog

box-sizing : 웹 페이지의 박스모델을 제어하는 데 사용되는 css 속성 속성값은 2가지 속성으로 설정된다. 1. content-box : 기본값으로 설정되며 박스 모델에서 요소의 크기를 콘텐츠 영역 만을 기준으로 계산한다. .box_style{ box-sizing:content-box; } 2. border-box : 박스 모델에서 요소의 크기를 테두리, padding, margin의 크기를 모두 포함하여 계산한다. .box_style{ box-sizing:border-box; } 예시로 2가지 속성과 width:200px , height:200px, padding:10px 속성을 적용한 div를 비교해 보면 1번 속성은 padding + content 크기 (200* 200)을 합쳐진 넓이로 ..

1. css 초기화를 진행하는 이유? 웹 개발에서 브라우저 간 스타일의 차이가 있어 초기화를 진행하지 않으면 같은 css 코드라도 브라우저에서 다르게 보일 수 있기 때문에 개발하기 전 css 코드를 초기화하여 웹 개발을 준비하는 단계로 필수는 아니지만 브라우저 호환성을 위해 권장한다. 초기화 코드 /* 기본 margin, padding , border 속성 없애고, 수직 정렬을 기본 기준선에 맞춤 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, s..