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 줄 바꿈 없고 문장 중간에 들어갈 수 있음

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

  - 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에 대한 이해.



출처: http://mobicon.tistory.com/158 [Mobile Convergence]

출처: http://mobicon.tistory.com/158 [Mobile Convergence]

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
74 jQuery 스타일 & 속성 다루기 file 졸리운_곰 2018.07.29 792
73 Force redraw on an element (jQuery) 졸리운_곰 2018.07.28 639
72 HTML DIV tag : 영역 밖과 안쪽에 여백주기 - 마진과 패딩 Margin / Padding 졸리운_곰 2018.07.12 538
71 자바스크립트 Base64 인코딩, 디코딩 졸리운_곰 2018.06.18 594
70 Get Query String Parameters with JavaScript 졸리운_곰 2018.06.08 477
69 Get request parameters using Javascript 졸리운_곰 2018.06.08 455
68 json 배열 합치기(merge) 및 소팅하기 졸리운_곰 2018.06.08 683
67 Object.assign 두 개의 Object 를 하나로 병합하기 How to merge different object in javascript 졸리운_곰 2018.06.08 552
66 jQuery.extend(), 두개 이상의 객체를 합치기(Merge) file 졸리운_곰 2018.06.08 512
65 자바스크립트에서 변수에 문자열이 있는지 체크 하는 방법 졸리운_곰 2018.06.05 778
64 [jQuery] ajax 콜백함수에서 파라메터 패싱 : Pass variable to function in jquery AJAX success callback 졸리운_곰 2018.06.05 444
63 JQUERY – ON 을 알아보자 졸리운_곰 2018.06.04 450
62 동적으로 생성된 button의 값 가져오기! 졸리운_곰 2018.06.04 786
61 TextArea 가로 자동 크기 조절 졸리운_곰 2018.06.04 542
» [HTML5] span과 div의 차이 file 졸리운_곰 2018.06.04 800
59 jQuery 원하는 요소에 벨류(value) 값 넣기 졸리운_곰 2018.05.30 372
58 [jQuery] 요소(Element) 존재 여부 확인 졸리운_곰 2018.05.29 664
57 [제이쿼리/jQuery] 요소 갯수 구하기 .length file 졸리운_곰 2018.05.25 409
56 [삽잡이::javascript] JSON Array를 만들어보자 file 졸리운_곰 2018.05.25 194
55 jQuery each (jQuery 반복문) 졸리운_곰 2018.05.24 554
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED