개발 R.I.P.
5/17 Dev.Feedback(CSS : Box)
편행
2021. 5. 17. 21:34
반응형
Box의 개념에 대해서 정리한다.
Block
=> Block은 줄바꿈이 되는 박스이다.
=> 대표적인 예는 <h1>과 <div>와 <p> 태그를 생각하면 된다.
Inline
=>Inline, Inline-block은 옆으로 붙는 박스이다.
=> 대표적인 예시로는 <span>태그를 생각하면 된다.
=> Inline 박스는 width, height 속성이 적용되지 않는다.
Inline-block
=>inline-block 박스는 inline 박스처럼 다른 요소의 옆으로 붙으면서, 자체적으로 고유의 크기를 가진다.
위의 세가지 경우를 표로 정리해보면 이렇다.
Flex
=> flex 박스는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다.
Flexbox에 대한 부분은 방대한 내용이기에, 관련한 내용을 매우 정확히 정리한 링크를 첨부한다.
반응형