15. block태그, inline태그

block태그는 쉽게말해 박스형식으로 차곡차곡 쌓는 태그,
inline태그는 한줄로 쭉- 늘어놓은 태그입니다.

일단 block태그의 대표 div와 inline태그의 대표 span의 표시법을 봅시다.
여타 다른 태그들과 다를바 없는 짝궁을 달고 다니는 태그입니다.

<div></div>
<span></span>
 

block태그

앞에서 말했듯이 block태그는 박스형태의 태그를 뜻합니다.
자신의 자리를 차지하고 나면 자신의 크기를 뺀 여백이 남는데 이 여백의 크기에 상관 없이 block태그는 무조건 줄이 바뀝니다.
한마디로 자동으로 단락이 나누어집니다.
또한 block태그는 크기지정이 가능합니다. 여백도 마음대로 지정가능합니다.
block태그에는 div, h태그, p, form, list태그 등이 있습니다.
눈으로 확인하면 더 이해하기 쉽습니다.
(뒤에 붙는 style은 빠른 이해를 위해 넣은 태그로, 뒤에 css에서 설명하므로 그냥 치고 넘어가시면 됩니다.)

<div style="width:600px;background:skyblue">
   <h1 style="width:400px;background:tomato;">block태그 예시입니다.</h1>
   <div style="width:100px;height:100px;background:springgreen;">크기도 지정이 가능해요!</div>
   <p style="width:300px;background:coral">block태그는 자동으로 줄이 바뀌죠!편리하죠!</p>
</div>
 

block태그 예시입니다.

크기도 지정이 가능해요!

block태그는 자동으로 줄이 바뀌죠!편리하죠!

inline태그

inline태그는 한줄로 나열된 태그입니다.
inline은 block과는 달리 여백이 남는만큼 일렬로 나열됩니다.
즉 여백이 다 찰때까지 줄바꿈이 일어나지 않습니다.
inline태그는 크기지정이 불가능하며 여백도 지정이 안됩니다.
물론 이러한 inline태그도 나중에 css를 사용하여 크기, 여백을 줄 수 있습니다.
inline태그에는 sapn, a, img, input 등이 있습니다.

<div style="width:600px;background:skyblue">
   <span style="background:tomato;">inline태그 예시입니다.</span>
   <a href="#" style="width:300px;height:100px;background:springgreen;">크기 지정이 안먹어요.</a>
   <input type="text" value="inline">
   <input type="file">
</div>
 

inline태그 예시입니다. 여백을 다 쓸때까지 줄이 안바뀌죠

block과 inline 사용여부

웹표준에 의하면 block태그 안에는 block태그와 inline태그 둘다 사용가능하나, inline태그 안에는 inline태그만 사용 가능합니다.
inline태그 안에 block태그를 넣으면 눈으로는 가능하나 웹표준에 어긋납니다.

벗, html5에 한해서는 inline태그인 a태그 안에 block태그 사용을 허용합니다.
doctype이 html5인 경우 사용이 가능하겠네요.

* 개인적인 공부를 정리하는 블로그입니다.