div / span 차이?

Question

div는 블록 요소, span은 인라인 요소로 이해하고 있는데요, div안에 span을 넣는 경우는 어떻게 이해하면 될까요? 아이디 validation 구현을 위해 div 안에 span을 넣을 때 왜 입력폼 오른쪽(옆)에 구현되는지 궁금합니다. span이 인라인 요소라면 다음줄에 구현되어야 하는 것 아닌가요?  질문이 두서 없지만 요약하자면 div와 span 쓰임새 차이 가 궁금합니다!

긴장한 나비 · Answer

안녕하세요! 우선 결론부터 말씀드리면 사용하기 나름인것 같습니다. 사실 div 와 span 은 html 에서 정한 CSS 속성이 미리 정의되어 있는 태그라고 저는 생각하는데요. 예를 들면 div 같은 경우 기본적으로 display: block 이 적용되어 있는 태그 이고, 사용자가 임의로 css를  display: inline 으로 수정하게 되면 span 과 동일한 효과를 내기 때문이에요. 저는 개인적으로 저만의 기준을 사용하고 있는데요 div를 사용하는 경우 1. 해당 컴포넌트가 페이지 width 100% 를 차지할때 2. 100%를 차지하지 않지만 어떤 컴포넌트를 구성할때 가장 큰 개념인 경우 (인프런을 예로들면 강의 카드를 말합니다 :) ) 3. 2번에서 정의한 컴포넌트 내에서 width 100% 를 차지할때 span 을 사용하는 경우 1. div 를 사용하지 않으면서 별다른 의미론적인 태그를 사용하지 않을 때 Minkyung K  님도 자신만의 기준을 정해서 페이지를 구상하시다 보면 어느 정도 확립이 되실 수 있을거애요.  감사합니다.