목차
- 블럭 (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)