인프런 커뮤니티 질문&답변
작성한 질문수
div / span 차이?
작성
·
537
0
div는 블록 요소, span은 인라인 요소로 이해하고 있는데요, div안에 span을 넣는 경우는 어떻게 이해하면 될까요?
아이디 validation 구현을 위해 div 안에 span을 넣을 때 왜 입력폼 오른쪽(옆)에 구현되는지 궁금합니다.
span이 인라인 요소라면 다음줄에 구현되어야 하는 것 아닌가요?
질문이 두서 없지만 요약하자면 div와 span 쓰임새 차이가 궁금합니다!
답변 1
1
안녕하세요!
우선 결론부터 말씀드리면 사용하기 나름인것 같습니다.
사실 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 님도 자신만의 기준을 정해서 페이지를 구상하시다 보면 어느 정도 확립이 되실 수 있을거애요.
감사합니다.