“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
블록 레벨 요소 (Block-level Elements)
블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스여서 한 줄을 모두 차지하는데 이 때 한 줄을 차지한다는 말은 너비가 100%라는 얘기입니다. 따라서 왼쪽과 오른쪽에 붙을 공간이 없어 자연스러운 줄넘김이 가능합니다.
블록 속성을 가진 요소들 중에는 <h1,>, <h2>, <p> 요소들과 <withd>, <margin>, <heigh>이 있습니다. 주로 화면구성과 레이아웃을 만들 때 사용 됩니다.
따라서 블록 레벨 요소는 한 묶음으로 이루어져 오롯이 하나의 존재로 이루어져 있는 요소로 그 안이 비어져 있습니다. 텍스트와 인라인 요소를 자식 요소로 포함 하여 집어 넣을 수 있습니다. 블록레벨 요소 중에는 블록레벨 요소를 자식으로 포함할 수 있는 요소와 없는 요소가 있습니다.
인라인 요소 (Inline Elements)
인라인 요소는 블록 요소와 다르게 마크업을 할 때 가로로 정렬이 되며 행이 바뀌지 않고 줄로 출력 됩니다. 따라서 인라인 요소는 텍스트 라고 생각하면 됩니다. 즉 화면에 표시된 만큼만 존재하는 요소로 나머지 공간이 존재하여 다른 요소가 존재할 수 있습니다.
따라서 한 줄에 여러개 인라인 요소를 표시할 수 있습니다. 인라인 속성을 가진 요소는 <img> , <obj>, <span> 등이 있으며 이처럼 인라인 요소는 하나의 단어로 이루어져 있으며 그것들이 합쳐져 하나의 문장을 만들 수 있는 요소입니다.
인라인 요소는 박스 형태로 이루어진 블록요소를 안에다 넣는 형식의 자식 요소로 포함 할 수 없습니다.
블록 레벨 요소와 인라인 요소 태그
| 블록 레벨 요소 태그 | <h1>~<h6>, <p>, <withd>, <margin>, <heigh>, <tabe>, <heigt>, <ul>, <ol>, <div> |
| 인라인 요소 태그 | <img> , <obj>, <span>, <br>, <label>, <sup>, <sup>, <input>, <button>, <textarea> |