css box-sizing 관련 질문

Question

안녕하세요! 열심히 잘 듣고 있는데 궁굼한게 있어서요! css > "box-sizing: border-box;"를 reset.css에 주지 않고 각각 필요할 때만 쓰는 이유가 있나요? 예를 들면 , 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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;} 여기에 주지 않고 .work ul{display: flex; padding: 3% 30%; box-sizing: border-box;} 이렇게 따로 주는데 혹시 이유가 있나해서요!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 사라오님 box-sizing: border-box 는 요소의 width 와 height 에 padding 과 border 를 포함할지 결정하는 속성입니다. 이를 reset.css 에서 전체 요소에 적용하면 모든 요소가 동일한 박스 계산 방식을 사용하게 됩니다. *, *::before, *::after { box-sizing: border-box; } 반면 강의처럼 특정 요소에만 적용하는 방식은 해당 요소에서만 패딩과 너비를 함께 계산하면 될 때 사용할 수 있습니다. 즉, 반드시 전체에 적용해야 하는 것은 아니며 프로젝트의 CSS 작성 방식과 필요한 범위에 따라 선택할 수 있습니다. 관련 답변을 참고해 주세요. 질문 - .wrap 과 box-sizing: border-box 적용 범위 해당 답변에서도 box-sizing: border-box 를 reset에 전체적으로 적용해도 괜찮고, 특정 요소에만 적용해도 무방하다고 안내하고 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.