Web(Front) - HTML 공간 분할 태그

📒 공간 분할 태그

1️⃣ Block VS inline Element

• Block 형식
  • 사용하는 element가 한 줄을 모두 사용
• inline 형식
  • contents의 크기만큼만 공간 사용

2️⃣ Block & inline 형식 태그

Blcok 태그 및 Inline 태그 비교

3️⃣ div & span

• div
  • block 형식으로 공간 분할
  • 레이아웃 만들 때 주로 사용
• span
  • inline 형식으로 공간 분할
  • <div>와 <p> 태그와 함께 웹페이지 일부분 스타일을 적용시키기 위해 사용

4️⃣ div & span 차이점

• 여러 개를 나란히 나열했을 때
  • div : 자동 줄 바꿈, 세로로 나열
  • span : 줄 바꿈 X, 가로로 나열
• 동일한 문장을 감쌌을 때
  • div : 박스 형태로 영역 설정, 그 안에 정렬
  • span : 줄 단위로 영역 설정, 텍스트가 노출되는 영역만 포함
• margin
  • div : 4방향 모두 적용
  • span : 양옆만 적용