Flexbox 바로 알기(1) - display: block | inline | inline-block | flex;

Display

화면에 렌더링 되는 요소들을 어떻게 보여줄지 결정하는 CSS 속성

 

모든 웹사이트는 Box(영역)로 이루어져 있다!

 

웹사이트를 분할해보면 각 content들의 영역이 나눠지는 것을 볼 수 있는데 이것을 box라고 하고,

각 box는 display 속성값에 따라 화면 상에서 다르게 보여진다.

 

Block

display: block;

가장 기본적인 box는 `<div>` 태그이며, `div`의 기본 display 속성은 `block`이다.

 

Block box 옆에는 어떤 것도 올 수 없다. box가 있는 그 한 줄이 온전히 box의 영역으로 할당되기 때문!

그래서 따로 줄바꿈을 해주지 않더라도 다음 요소가 알아서 아래로 밀려나는 모습을 볼 수 있다.

 

`<div>`뿐만 아니라 `<header>`, `<main>`, `<section>`, `<p>` 등으로 만들어진 box도 마찬가지

⇒ 이렇게 block 속성값을 디폴트로 갖는 요소들을 Blocks라고 부른다.

 

Inline

`display: inline;`을 기본값으로 가지며 옆에 다른 요소가 붙어있을 수 있는 요소들

= Inlines (in the same line, 한 줄에 같이 쓸 수 있다는 의미)

 

inlines은 box가 아닌 element이기 때문에 width와 height를 가질 수 없다.

 

대신 margin과 border, padding 모두 적용 가능!

다만 inline은 그 자체로 높이(상하)가 없기 때문에 margin의 경우 좌우에만 적용된다.

 

대표적인 inlines에는 `<span>`, `<a>`, `<img />` 세 종류가 있고, 나머지는 거의 다 blocks에 해당한다.

 

Inline-block

display: inline-block;

block 속성을 유지하면서 inline처럼 동작하기 위한 display!

요소를 block으로 인식하여 width와 height를 부여하는 동시에(= block 속성) 한 줄에 연달아 출력할 수 있다(= inline 속성).

 

하지만 `inline-block`을 사용하면 정해진 형식이 없어서 각 box들 사이에 default로 공간이 생겨버린다.

(위에서 보이듯이 각 box들 사이에 설정하지 않은 빈 공간이 나타남)

 

게다가 반응형 디자인(responsive design)을 지원하지 않아서 box들을 정렬하고 배치할 때 어려움이 많다는 단점이 있다.

 

Flexbox

display: flex;

기존 display의 문제점을 보완한 display 속성값

⇒ flex!

 

flexbox로 화면 레이아웃을 잡게 되면 box를 원하는 곳에 손쉽게 가져다 놓을 수 있는데,

이는 부모 element를 flex container로 만들어서 자식 element의 위치와 간격 등을 제어하는 방식으로 이루어진다.

 

자식 element (box)에 직접 스타일 속성값을 주는 것이 아니라,
반드시 부모 element에 `display: flex;` 속성을 부여하고 내부 요소들의 배치를 명시해야 함을 잊지 말 것!!