• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

div / span 차이?

20.09.16 22:26 작성 조회수 411

0

div는 블록 요소, span은 인라인 요소로 이해하고 있는데요, div안에 span을 넣는 경우는 어떻게 이해하면 될까요?

아이디 validation 구현을 위해 div 안에 span을 넣을 때 왜 입력폼 오른쪽(옆)에 구현되는지 궁금합니다.

span이 인라인 요소라면 다음줄에 구현되어야 하는 것 아닌가요? 

질문이 두서 없지만 요약하자면 div와 span 쓰임새 차이가 궁금합니다! 

답변 1

답변을 작성해보세요.

1

삐코빠님의 프로필

삐코빠

2020.09.21

안녕하세요!

우선 결론부터 말씀드리면 사용하기 나름인것 같습니다.
사실 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  님도 자신만의 기준을 정해서 페이지를 구상하시다 보면 어느 정도 확립이 되실 수 있을거애요. 

감사합니다.