HTML [HTML5] span과 div의 차이

2018.06.04 17:10

졸리운_곰 조회 수:800

[HTML5] span과 div의 차이

Query를 통하여 DOM 조작을 할때 HTML안에 span 또는 div의 id 또는 class의 조작을 하면 편하게 할 수 있다. 이때 span과 div는 어떤 차이가 있을까 알아보자.

1) Span & Div 차이점

- div 가로폭을 전부 차지함. span 태그안의 내용만 차지함

- div 폭과 넓이 지정가능, span 못함

- div 필연적으로 줄 바꿈을 동반, span 줄 바꿈 없고 문장 중간에 들어갈 수 있음

- table 태그 대신 div와 span 태그로 더욱 간결한 html을 구성할 수 있다.

<참조>

- http://chatii.tistory.com/45 : div와 span 태그의 차이점 비교

- http://ccoma.tistory.com/746 : table 태그를 대신하여 div 와 span 태그를 사용하여 화면 구성을 어떻게 하는가?

- http://yongja.tistory.com/15 : div/span 과 id/class에 대한 이해.

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

번호	제목	글쓴이	날짜	조회 수
34	[javascript] React - Apache에 배포하기	졸리운_곰	2026.01.25	444
33	Python으로 GraphQL 서버 구현	졸리운_곰	2019.12.17	541
32	처음 만나는 GraphQL	졸리운_곰	2019.12.17	372
31	웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [2]	졸리운_곰	2019.11.08	581
30	웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1]	졸리운_곰	2019.11.08	411
29	PHP 로 css/js 보호하기	졸리운_곰	2019.11.08	438
28	Three.js를 이용한 WebGL: 기본	졸리운_곰	2019.11.08	495
27	underscore.js로 편해지자	졸리운_곰	2018.10.16	545
26	자바스크립트로 각종 값넘기는방법	졸리운_곰	2018.01.24	518
25	form 데이터 주고 받기	졸리운_곰	2018.01.24	489
24	Node.js & WebSocket — Simple chat tutorial	졸리운_곰	2017.12.08	612
23	JavaScript 모듈화 도구, webpack	졸리운_곰	2017.10.30	538
22	웹팩이란?	졸리운_곰	2017.10.30	531
21	이해하기 쉬운 Webpack 가이드	졸리운_곰	2017.10.30	853
20	[jquery] Ajax를 품은 jQuery	졸리운_곰	2017.04.25	466
19	Create Your First Mobile App with AngularJS and Ionic	졸리운_곰	2016.11.20	1269
18	Single Page Application using AngularJs Tutorial	졸리운_곰	2016.11.20	458
17	AngularJS Tutorial - Building a Web App in 5 minutes	졸리운_곰	2016.11.20	460
16	자바스크립트의 'this' 키워드 이해하기	졸리운_곰	2016.11.17	634
15	jQuery 핵심 - 노드 다루기	졸리운_곰	2016.11.17	775

첫 페이지 1 2 끝 페이지

쓰기