Block 레벨 요소와 Inline 레벨 요소

Block 레벨 요소와 Inline 레벨 요소

div태그와 span태그

• 웹 페이지 영역을 구분할 때 사용하는 태그
• div태그: division의 뜻으로, 주로 분할을 하거나 다른 태그를 담는 container역할을 함
• span태그: container역할이 아닌, 특정 텍스트나 문장영역을 지정하여 스타일링 할 때 사용됨

❗ div태그와 span태그의 차이점
div태그는 컨테이너의 역할로, 안의 content를 박스로 감싼다. → block level요소(display: block)
span태그는 특정 아이템을 꾸미는 역할로, 안의 content의 사이즈만큼만 표시됨 → inline level요소(display: inline)

<div>Hello World!</div>
<span>Hello World!</span>

---

Block Element

• 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 “블록”을 만든다.
• <h1>~<h6> <ol> <ul> <li>
• 화면 구성이나 레이아웃을 짤 때는 블록 레벨 요소를 사용
• 블록 레벨 요소는 한 칸을 모두 차지하기 때문에 세로로 나열됨
• width, height, margin 속성이 적용 → 가로, 세로 크기 조정 가능

---

Inline Element

• 인라인 레벨 요소는 콘텐츠의 흐름을 끊지 않고(줄 바꿈 없음), 요소를 구성하는데 태그에 할당된 공간만 차지한다.
• <a> <em> <img> <span>
• 인라인 레벨 요소는 콘텐츠 영역 만큼 차지하기 때문에 가로로 나열됨
• margin-top, margin-bottom 적용되지 않는다. 대신에 line-height 사용
• width, height 속성이 적용되지 않음 → 가로, 세로 크기 조정 불가능
• 태그가 콘텐츠의 할당 된 공간만 갖고 있기 때문에, text-align과 같은 속성은 사용 불가능