참고) 대부분의 HTML 요소는 block 요소이다.
1. inline
- 한 줄 전체를 차지하는 것이 아닌 다른 요소와 같은 줄에 위치할 수 있다. 태그 안의 text 길이만큼 공간을 차지한다.
- inline 요소는 요소끼리 바로 옆에 위치할 수 있다.
- width, height 속성으로 사이즈 조절이 불가능하다.
- inline이 default인 대표적인 태그는
<span>,<a>,<img>,<em>,<i>,<strong>이 있다.
display: inline;2. inline-block
- inline처럼 다른 요소와 같은 줄에 위치할 수 있다.
- width, height 속성으로 사이즈 조절이 가능하다.
- inline-block이 default인 태그에는
<button>,<input>,<select>,<textarea>이 있다.
display: inline-block;3. block
- block 요소는 한 줄(가로)을 차지하기 때문에 다른 요소와 같은 줄에 존재할 수 없다.
- 해당 요소 바로 옆에 다른 요소를 붙일 수 없다.
- block이 default인 태그에는
<header>,<footer>,<section>,<p>,<li>,<table>,<div>,<h1>이 있다.
display: block;한 줄 요약
inline은 다른 요소와 나란히 나열 가능, 넓이 조절 불가능
inline-block도 다른 요소와 나란히 나열 가능, 넓이 조절 가능
block은 다른 요소와 나란히 나열 불가능
