...
블록 레벨 요소 (Block-level Elements)
블록 레벨 요소는 쉽게 해당 요소가 좌, 우 공간을 모두 차지하는 하나의 블록이라고 생각하시면 됩니다.
위 그림과 같이 각 요소들이 좌우 공간을 모두 차지하는 형태이기 때문에
다음 요소를 마크업하게 되면 다음 줄에 출력되는 것을 볼 수 있습니다.
인라인 요소 (Inline Element)
인라인 요소는 블록 레벨 요소와 달리 해당 요소만큼만 공간을 차지합니다.
위 그림과 같이 각 요소들이 해당되는 공간만을 차지하는 형태이기 때문에
다음 요소를 마크업하게 되면 같은 행에 출력되는 것을 볼 수 있습니다.
블록 레벨 요소와 인라인 요소의 특징
블록 레벨 요소와 인라인 요소의 구조를 간단하게 알아보았습니다.
그럼 이러한 구조로 인해 어떠한 특징을 가지게 되는지 알아보겠습니다.
블록 레벨 요소
1. 줄 바꿈이 일어난다.
2. 텍스트와 인라인 요소를 자식 요소로 포함할 수 있다.
3. 블록 레벨 요소를 자식 요소롤 포함할 수 있는 요소와 포함할 수 없는 요소가 있다.
인라인 요소
1. 줄 바꿈이 일어나지 않는다.
2. 텍스트와 인라인 요소를 자식 요소로 포함할 수 있다.
3. 블록 레벨 요소를 자식 요소로 포함할 수 없다.
이상으로 블록 레벨 요소와 인라인 요소를 알아보았습니다 !