div & span

div & span

division의 의미를 갖는 div라는 element는 block-level element를 표현하기 위해서 사용되며, span element는 inline-level element를 표현하기 위해서 사용된다.  또한 이 2개의 element는 이미지에서 다루었듯이 이미지맵을 위한 map element와 같이 id, class라는 attribute로 이름을 지정할 수 있다.

<div>와 <span>은 <table>태그를 대신할 수 있고 <table>태그를 사용하는 것보다 파일의 크기를 줄일 수 있을 뿐만이 아니라 웹의 속도도 올려줄 수가 있는 태그입니다.

1. div element

div는 웹페이지의 elements들을 논리적으로 그룹으로 묶을 수 있으며, 이것에 이름을 붙여서 컨트롤 할 수 있다.  

<div> 태그는 무조건 한줄의 공간을 준비한다.(table의 tr과 비슷)

<div>로 시작해서 </div>로 끝나야 한다.

<div>를 사용하면 위아래로 줄바꿈이 생긴다.

테두리, 정렬, 문단모양등 필요한 기능들은 style을 이용하여 지정한다.

2. span element

span도 div와 같은 효과를 갖지만 inline element이므로 줄구분(line break)이 없다는 차이가 있다.

입력하는 내용만큼 공간을 준비한다. (table의 td와 비슷)

<span>태그로 시작해서 </span>으로 끝내야 한다.

줄바꿈이 생기지 않아 앞뒤 내용이 이어진다.

div와 마찬가지로 style 속성이 같이 활용이 되며 사용방법도 <div>와 똑 같다.

3.div 와 span 의 차이점

1) <div>는 한줄을 차지하는데 <span> 태그는 입력되는 내용만큼 공간을 준비(차지)한다.

2) <div>는 앞뒤로 줄바꿈을 하는데 <span> 태그는 줄바꿈을 하지 않는다.

3) <div>는 css에서 가로와 세로만큼 박스가 형성되고 <span>은 가로, 세로가 먹히지 않음.

4) <span> 태그도 display: block 을 넣어주면 <div>의 block 가 똑같이 표시됩니다.

5) <div>를 inline 속성을 넣어서 <span> 처럼 사용할수있다.

6)  <span>에 inline 과 block 의 장점만 결합시킨 display : inline-block 은 기본 성질은 inline 이면서 width 와 height 를 인식한다.

4. Block level elements

Block level elements 는 HTML문서의 body 영역에 사용됩니다.

Block level elements 는 다른 Block level element 와 Inline element를 포함 할 수 있습니다.

Block level elements 는 하나의 라인에 하나만 들어오며, 복수로 들어올 수 없습니다.

Block level elements 는 width와 height 값을 가질 수 있습니다.

Block level elements 는 margin과 padding 값을 가질 수 있습니다.

Block level elements 는 vertical-align 속성이 무시됩니다.

5. Inline elements

Inline elements 는 HTML문서의 body 영역에 사용됩니다.

Inline elements 는 다른 Inline element를 포함할 수 있지만 Block level element를 포함할 수는 없습니다.

Inline elements 는 기본적으로 하나의 라인에 중복하여 사용할 수 있으나, 줄바꿈이 일어나지는 않습니다.

Inline elements 는 width와 height 값을 가질 수 없습니다.

Inline elements 는 상/하 margin과 padding 값을 가질 수 없습니다.

Inline elements 는 vertical-align 속성이 적용될 수 있습니다.