[html] inline 태그, block 태그

inline 태그와 block 태그는 비슷하지만 다르다.

이 두 태그의 차이점에 대해서 알아보자.

 

 

inline 태그

• 사용자 정의 영역을 표현
• block 태그와는 달리 여백이 남는만큼 일렬로 나열된다. 즉, 여백이 다 찰때까지 줄바꿈이 일어나지 않는다.
• 크기 지정 불가, 여백 지정 불가
• 대표적인 inline 태그 : <span>, <a>, <b>, <i>, <img>, <button>

 

 

inline 태그 5개를 일렬로 나열하면 어떻게 될까?

<span>inline tag</span><span>inline tag</span><span>inline tag</span><span>inline tag</span><span>inline tag</span>

inline taginline taginline taginline taginline tag

 

다음 태그를 달 때 줄이 바뀌지 않고, 옆에 작성된다.

 

 

inline 태그를 block태그로 바꾸는 방법

 /* css */
i {
  display: block; /* <i> 태그를 block으로 바꾸기 */
}

<!-- html -->
My <i>name</i> is Young!

css에서 display: block;을 사용하면 inline 태그를  block 태그로 바꿀 수 있다.

 

 

block 태그

• 다음 태그가 생기면 자동으로 줄바꿈이 발생한다.
• 크기 지정 가능, 여백 지정 가능
• 대표적인 block 태그 : <div>, <h1>~<h6>, <p>, <nav>, <ul>, <li>

 

 

block 태그 5개를 일렬로 나열하면 어떻게 될까?

<div>block tag</div><div>block tag</div><div>block tag</div><div>block tag</div><div>block tag</div>

block tag

block tag

block tag

block tag

block tag

 

다음 태그를 달 때 줄바꿈이 발생하여 다음줄에 작성된다.

 

 

block 태그를 inline 태그로 바꾸는 방법

/* css */
p {
  display: inline; /* <p> 태그를 inline으로 바꾸기 */
}

<!-- html -->
<p class="p">Hello World!</p>

css에서 display: inline;을 사용하면 block 태그를 inline 태그로 바꿀 수 있다.

 

 

inline-block 태그

inline 태그와 같이 같은줄에 머무르면서도 크기 지정을 해주고 싶을 때 사용하는 태그이다.

/* css */
i {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: green;
}

<!-- html -->
My <i>name</i> is Young!

css에서 display: inline-block;을 사용한 후, 원하는 크기값을 지정해주면 된다.