<span>과 <div> 태그의 차이점은 무엇입니까?


15

궁금합니다. span 태그가 div와 동일하게 작동하는 것 같습니다.

답변:


22

가장 큰 차이점은 <span>태그는 인라인 요소이고 <div>태그는 블록 레벨 요소라는 것입니다.

두 개의 블록 레벨 요소 (div)는 서로 수직으로 표시되고 두 개의 인라인 요소 (스팬)는 서로 수평으로 표시됩니다.

시각적 용어의 차이점을 이해하려면 <span>요소를 단어로, <div>요소를 단락 으로 생각하면 도움이 될 수 있습니다 . div는 일반적으로 콘텐츠 블록을 배치하는 데 사용됩니다. 스팬은 일반적으로 해당 콘텐츠 내에서 단어 그룹을 강조 표시하는 데 사용됩니다.


11

Nick과 Toby는 귀하의 질문에 훌륭하게 대답했지만 한 단계 더 발전시킵니다.

기본적으로 <div>s는 블록 요소이고 <span>s는 인라인 요소입니다. 이들은 단순한 블록 또는 인라인 컨테이너를 제공하는 일반 태그입니다. 실제로 CSS를 통해 디스플레이 CSS 속성을 'block', 'inline'또는 'inline-block'(다른 것들 중에서)으로 설정하여 상호 교환 가능하도록 트위스트 할 수 있습니다.

그러나 서로 동작하도록 구부리는 것은 권장되지 않습니다. HTML에는 실제로 다른 요소 (대부분 <a>태그 와 같은 인라인 요소) 내에서 블록 수준 요소를 사용하지 못하게하는 규칙이 있으므로 올바른 위치에 올바른 태그를 사용하고 적절한 경우에만 동작을 재정의해야합니다 꼭 필요한.

그것들을 의미 적 요소로 생각하십시오. 를 사용하여 <span>텍스트 블록의 내부에 사용되는 태그의 콘텐츠를 할 때, 예를 들어 사용을 위해 <div>당신이 페이지 자체에 특별한 구조를 추가해야 할 경우의.

HTML5에는 이러한 의미 론적 요소가 많으므로 이러한 일반 태그 중 하나를 사용해야 할 필요성이 크게 줄어 듭니다. 많은 양의 div와 범위를 추가하는 것보다 의미 태그를 사용하는 것이 좋습니다.

행운을 빕니다!


5

가장 큰 차이점은 divs블록 요소이며 spans인라인 요소입니다.

둘 다 CSS를 사용하여 스타일을 지정할 수 있지만 원하는대로 작동하지만 일반적으로 spans작은 인라인 나누기와 divs큰 블록에 사용합니다.

일부 요소는 인라인에 영향을 미치며 요소에 다른 요소를 차단할 수 있습니다. 예를 들어 span요소에 높이를 넣을 수 없습니다 .


블록과 인라인 요소는 무엇을 의미합니까?

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.