1. div, p, span

1) div, p와 span의 차이점은 block요소와 Inline요소

• block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻
• inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻
  
  -> 문자 정보를 줄바꿈하여 작성해야할 경우 div, p태그 사용.

2) span > p, div?

• 인라인 요소인 <span> 태그는 블록 요소인 <div>, <p> 태그를 하위 태그로 포함시킬 수 없다. (반대는 가능)
• <p>는 <div>를 포함할 수 없으나, 반대는 가능하다.
  -> <div> 태그는 <p> 태그 처럼 문자 정보를 입력할 수 있지만, 실제 용도는 HTML 문서의 영역별 구분입. 따라서 각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있다.

2. html작성시에 block요소와 Inline요소를 고려하면서 태그 선택?

• 물론 대부분 inline, block 성질에 의해 태그가 결정되지만,아무 태그나 사용해도 결국은 CSS를 통해 얼마든지 성질을 바꿀 수 있다.
• inline 성질을 갖도록 하는 CSS property는 display 와 float 이 있다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

-> 해당 property에 위와 같은 값을 부여하면, 요소 옆에 요소가 위치하는 inline 성질로 변하게 된다.

• 반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있다.

.block-span {
  display: block;
}

-> 위의 CSS로 <span> 은 <p> 태그와 똑같은 성질을 갖게 되었다.