[CSS] display 속성 inline, block, inline-block 정리

display

요소가 화면에 출력되는 특성

 

각 요소에 이미 지정되어 있는 display의 속성 2가지

1. inline

• 글자를 만들기 위한 요소
• 요소의 크기만큼 차지한다
• 요소가 수평으로 쌓인다
• width와 height를 가질 수 없다
• margin, padding으로 왼쪽, 오른쪽 공백을 만들 수 있지만 위, 아래 공백을 만들 수 없다
• 인라인 요소 안에 블록 요소를 자식 태그로 가질 수 없다 (인라인 요소는 인라인 요소만 자식 태그로 가질 수 있다)
• <span>, <a>, <img>, <button>, <input>, <label>, <br>, <code>

inline 요소 사용시 주의점

inline 속성을 가진 태그 사이에 공백이 있으면 (요소 사이에 스페이스, 요소 사이에 한줄 띄우기) 화면에 공백이 나타난다

inline 속성을 가진 span 태그를 붙여 사용할 경우 화면에 AB로 출력된다

<span>A</span><span>B</span>

inline 속성을 가진 span 태그를 한칸 띄어 사용할 경우 화면에 A B로 출력된다

<span>A</span> <span>B</span>

inline 속성을 가진 span 태그를 한줄 띄어 사용할 경우 화면에 A B로 출력된다

<span>A</span>
<span>B</span>

 

2. block

• 레이아웃(상자)을 만들기 위한 요소
• 한행을 전부 차지한다
• 요소가 수직으로 쌓인다
• width와 height를 가질 수 있다
• width, height로 가로, 세로 너비를 지정할 수 있다
• margin, padding으로 사방에 공백을 만들 수 있다
• 내부에 인라인 요소, 블록 요소를 자식 태그로 가질 수 있다
• 종류: <div>, <h1>, <p>, <ul>, <ol>, <li>, <article>, <section>, <figure>, <header>, <footer>, <video>

 

inline과 block의 요소를 합친 속성

inline-block

• 베이스는 inline 요소지만 block 요소의 몇가지 특징을 가지고 있는 요소
• 요소가 수평으로 쌓인다 (inline의 특성)
• 태그 사이에 공백이 있으면 (요소 사이에 스페이스, 요소 사이에 한줄 띄우기) 화면에 공백이 나타난다 (inline의 특성)
• width와 height를 가질수 있다 (block의 특성)
• margin, padding으로 사방에 공백을 만들 수 있다 (block의 특성)