목차
블럭 (block) 요소 인라인 (inline) 요소 인라인블럭 (inline-block) 요소 예제: block 요소 vs. inline 요소 (블럭요소/인라인요소)간 속성변경/중앙정렬
※ 외래어표기법 상, block은 "블록"이 맞음.
블럭 (block) 요소
요소 안 내용 길이에 상관없이 요소 자체가 한 줄 전체를 차지하는 요소
[블럭요소군]
인라인 (inline) 요소
요소 안 내용 길이에 좌우, 해당 요소 안 내용 길이 만큼만 너비 차지하는 요소.
width, height 값을 줘도 안 먹힘. display:inline-block 속성 줘야 먹힘.
[인라인 요소군]
<b> <big>
<i>
<small>
<tt>
<abbr>
<acronym> <cite> <code> <acronym> <cite> <code> <dfn>
<em> <kbd> <em> <kbd> <strong> <samp> <var> <a> <bdo>
<br>
<map>
<object>
<q>
<script> < span > <sub>
<sup>
<label>
인라인블럭 (inline-block) 요소
inline 특징 (= 옆으로 나열) + block 특징 (= 너비높이지정 가능)
<button> <img> <iframe>
<input> <select> <textarea>
예제: block 요소 vs. inline 요소
<style>
* {color:white; margin:10px;}
div {background:red; width:300px; height:100px;}
span {background:blue; width:300px; height:100px;}
</style>
<div>block 요소1: 홈짱닷컴 Homzzang.com</div>
<div>block 요소2: 홈짱닷컴 Homzzang.com</div>
<span>inline 요소1 : 홈짱닷컴 Homzzang.com</sapn>
<span>inline 요소2 : 홈짱닷컴 Homzzang.com</sapn>
결과보기
(블럭요소/인라인요소)간 속성변경/중앙정렬
블럭요소, 인라인요소 간 속성변경
(블럭요소 + 인라인요소 ) 중앙정렬
https://homzzang.com/b/css-282
박스요소 + 아이템요소
https://homzzang.com/b/html-1
HTML5 경우, 인라인요소가 블럭요소를 포함 불가 .
(예)
<h2><a href="//homzzang.com">홈짱닷컴</a></h2> (O)
<a href="//homzzang.com"><h2>홈짱닷컴</h2></a> (X)
