평소에 DIV만 사용했던터라 SPAN과 DIV의 차이점에 대해 정립되지 않은 것 같아 아래와 같이 정리를 해보았다.
DIV와 SPAN
<div> 와 <span> 태그는 보통 id나 class 속성을 써서 스타일 시트와 함께 자주 사용한다 .
1. div란
div태그는 Block레벨 요소로서 한 문단에 스타일을 적용시킨다. 또한 <br>을 한 것같이 줄을 바꿔준다.
* block 레벨 요소는 <div>나 <p>,<h1>과 같은 요소들을 의미한다.
블록레벨 요소의 특징은
1) <br>같은 요소를 쓰지 않아도 스스로 줄바꿈된다는데 의미가 있다.
2) 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐른다.
3) 주변에 일정량의 공간을 만들어 너비를 지정해주지 않으면 풀 사이즈가 되어 가로로 가득찬다.
block레벨 요소는 가로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저 마다 조금씩 다르다.
2. div 예제
<div>나정이</div><div>월드</div>
출력값
나정이
월드
3. span 란
span태그는 Inline레벨 요소로서 한 줄에 스타일을 적용시킨다.
Inline 레벨 요소는 <img>,<span>,<strong>과 같은 요소들을 의미한다.
인라인 요소의 특징은
1) 줄 바꿈 태그를 사용하지 않는다.
2) block태그안에 단독으로 포함되지 않는 이상 가로로 쭉 나열된다.
3) 이 요소의 주변에는 공간이 생기지 않는다.
4. span 예제
<span>나정이</span><span>월드</span>
출력값
나정이월드