[HTML] inline, block, inline-block 완전 정복하기

박스는 웹 브라우저 화면에 출력되는 형태에 따라

inline, block, inline-block으로 나뉜다.

---

(1) inline

 

- 줄바꿈 없이 한 줄(inline)로 쓸 수 있는 태그를 포함한다.

- inline 예시: <a> 태그, <span> 태그

 

<a> 태그나 <span> 태그를 사용하면 줄바꿈이 이뤄지지 않는다.

 

줄바꿈이 잘 와닿지 않는다면 h1태그를 생각해보자.

 

<h1> hihi </h1>

<h1> lulu </h1>

 

를 작성하면 웹 페이지상에

hihi가 입력되고 그 다음에 Enter키를 누른 것처럼 줄바꿈이 이루어진 뒤

lulu가 나온다.

 

즉

 

hihi lulu가 아니라

 

hihi

lulu

 

이렇게 나타날 것이다.

하지만 a태그나 span태그는 이런 줄바꿈이 이루어지지 않는다.

 

 

- inline 태그 사용시 주의점

 

(1) inline 태그(a태그나, span 태그)는 width와 height속성

그리고 margin-top, margin-bottom 속성을 지정하면 웹 브라우저는 이를 무시한다. 

(2) inline 태그는 marging-left와 margin-right 처럼 오른쪽과 왼쪽 간격만 적용되고

위와 아래 간격은 반영을 하지 않는다.

 

---

(2) block

 

- 줄바꿈이 이루어지는 태그들을 말한다.

- ex) <h1>, <h2>, <h3>, <p>, <div> 태그

- 위의 태그들을 사용하면 위에서 봤던

  hihi

  lulu

  처럼 줄바꿈이 이루어진다.

---

(3) inline-block

 

위에서 inline은 width, height같은 속성은 주지 못한다고 했었다.

그런데 이거 너무 불편하지 않은가?

그래서 사람들이 inline에서 안됐던 속성들을 적용가능하도록 만든 것이 inline-block이다.

 

- inline-block는 inline처럼 줄바꿈이 이루어지지 않음과 동시에

inline에선 불가능했던 width, height, margin-top, margin-bottom 적용이 가능하도록 만든 거다.

 

즉 inline 업그레이드 버전 같은 거다. 

 

- inline-block 예시) <img>, <select>, <button>, <input>

 

---