1. [HTML/CSS] <div>와 <span> 사용법

국비 수업은 풀스텍이라고 얘기하지만 백엔드 위주의 수업이라 HTML과 CSS는 빠르게 지나갔다.

특히나 강사님이 html과 css를 설명하실 때 table을 만들어 설명하셔서 div와 span은 아예 배우지 못했다.

그러다보니 아직 궁금하고 능숙하지 못한 부분이 많았고 이 부분은 직접 회원가입폼을 여러번 만들어보는 것으로 복습중인데 그러던 중 <div>와 <span>의 사용법이 궁금했다.

 

우선  <div> 와 <span> 태그는 영역을 설정할 때 필요하다. 두 태그 모두 영역을 지정하는 거지만 그 방식에서 작은 차이를 보인다. <div>는 영역을 사각형 박스로 나누지만 <span>은 문장단위로 지정한다. 즉 <div>를 사용하면 테이블에서 1행짜리 한줄을 만드는 것과 같은 효과가 나타난다. 하지만 <span>은 지정되는 범위가 다르기 때문에 테이블과 같은 효과가 나타난다고는 할 수 없다.  이러한 지정영역의 차이는 색을 채운다던가, 줄을 친다던가 하는 효과를 주면 바로 차이가 나타나며 확인 가능하다!

 

또한 <div>는 줄 바꿈이 되지만 <span> 태그는 옆으로 붙는다는 차이도 보인다. 그래서 <span>을 사용하고 줄을 바꾸고 싶다면 <br/>을 반드시 함께 사용해줘야한다.