개인공부/HTML5&CSS3 블록 레벨 인라인 레벨 요소 - | 블록 레벨 요소 및 인라인 레벨 요소(Block Level Element) 블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소입니다. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻합니다. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 줄넘김이 됩니다. 블록 레벨은 다음과 같은 특징이 있습니다. margin, width, height 속성을 정의하면 모두 적용됩니다. 이런 특성 때문에 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용할 수 있습니다. | 인라인 레벨 요소(Inline Level Element) 인라인 레벨(inline-level) : 줄을 차지하지 않는 요소입니다. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다. 따라서 한 줄에 여러 개의 인라인 레벨 요소를 표시하는 것이 가능합니다. 인라인 레벨은 다음과 같은 특징이 있습니다. 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않습니다. 상, 하 여백은 margin이 아니라 line-height 속성에 의해 발생됩니다. 너비(width)와 높이(height) 속성이 적용되지 않습니다. 인라인 요소의 너비 및 높이는 태그가 품고 있는 내부 요소 부피에 맞춰집니다. 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우 최소한의 간격을 유지하기 위해 좌, 우에 약 5px 가량의 외부 여백이 자동으로 발생합니다. <pre" class="brush:css"> 다음은 블록 레벨, 인라인 레벨인 태그들의 목록입니다.</pre"> 블록 레벨 <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address> 인라인 레벨 <a>, <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button> 공유하기 URL 복사카카오톡 공유페이스북 공유엑스 공유 게시글 관리 구독하기'기'발하고 '창'의적인 블로그 Contents 당신이 좋아할만한 콘텐츠 JS 계산기 2022.09.13 CSS - Position 속성 정리 2022.09.09 HTML 특수 문자 표현 2022.09.07 Ajax 2022.09.07 댓글 0 + 이전 댓글 더보기