5/17 Dev.Feedback(CSS : Box)

Box의 개념에 대해서 정리한다.

 

Block

=> Block은 줄바꿈이 되는 박스이다.

=> 대표적인 예는 <h1>과 <div>와 <p> 태그를 생각하면 된다.

 

Inline

=>Inline, Inline-block은 옆으로 붙는 박스이다.

=> 대표적인 예시로는 <span>태그를 생각하면 된다.

=> Inline 박스는 width, height 속성이 적용되지 않는다.

 

Inline-block

=>inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가진다.

위의 세가지 경우를 표로 정리해보면 이렇다. 

Flex

=> flex 박스는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다.

 

Flexbox에 대한 부분은 방대한 내용이기에, 관련한 내용을 매우 정확히 정리한 링크를 첨부한다.

 

https://heropy.blog/2018/11/24/css-flexible-box/