2021.03.08) HTML/CSS - div, span/선택자, margin, padding

block, inline style tag

• div 태그 (block style)
  블록 스타일은 한 줄 전체 영역을 차지한다
  style 적용 시 style은 설정한 크기만큼만 차지하지만 영역은 한 줄 전체를 차지한다
  css에서 display: inline으로 설정 시 span태그와 동일하게 적용된다
  inline-block으로 설정 시 div태그를 유지하면서 inline처럼 사용 가능하다

• span 태그 (inline style)
  인라인 스타일은 텍스트의 크기 만큼의 영역만 차지한다
  style 적용 시 적용되지 않는 경우가 있음

css에서 float: left; 를 사용하면 span이나 div의 block에 빈공간 없이 출력된다
    -> 비어있는 영역을 강제로 삭제

• margin
  바깥쪽 간격을 띄울 때 margin 사용
  top right bottm left 순서로 적용
  auto를 사용하면 가운데 정렬됨

• padding
  padding을 작성하면 내부 영역이 넓어지고 text는 원래 위치에 출력됨

• css 선택자
  id는 중복된 값이 없을 때(layout 등), class는 반복 사용이 있을 때 사용