[intro] HTML - block요소 vs inline요소 ★★★★★ - (블락요소/블럭요소/블록요소 vs 인라인요소) 구별 차이점 비교 (= HTML 요소 성질/특성 종류)

1. 블럭 (block) 요소
2. 인라인 (inline) 요소
3. 인라인블럭 (inline-block) 요소
4. 예제: block 요소 vs. inline 요소
5. (블럭요소/인라인요소)간 속성변경/중앙정렬

※ 외래어표기법 상, 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-107 

 

(블럭요소 + 인라인요소 ) 중앙정렬

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)