◆ dispaly
inline, inline-block, block은 CSS에서 요소의 박스 모델과 레이아웃을 결정하는 데 중요한 역할을 합니다.
이 세 가지는 각각 요소가 어떻게 화면에 보여지는지 결정합니다.
◆ inline
- 요소가 텍스트 흐름 안에 놓이며, 요소의 너비와 높이가 텍스트의 크기에 따라 결정됩니다.
- 여러 inline 요소들은 가로 방향으로 나열되며, 요소 사이에 공백이 생길 수 있습니다.
- inline 요소는 margin-top, margin-bottom, padding-top, padding-bottom 속성의 적용이 불가능합니다.
- 텍스트와 같이 가로 방향으로 한 줄 나열되어야 할 때 사용합니다.
◆ inline-block
- 요소는 inline처럼 가로 방향으로 나열되지만, block처럼 너비와 높이를 지정할 수 있습니다.
- inline과는 달리 여러 inline-block 요소들은 공백 없이 나란히 배치됩니다.
- inline과 달리 margin과 padding이 적용 가능합니다.
- inline과 같은 가로 방향으로 나란히 배치가 필요하면서도 너비와 높이를 조절해야 할 때 사용합니다.
◆ block
- 요소가 화면에서 세로 방향으로 나열 하며, 너비는 부모 요소의 너비를 기본값으로 설정합니다.
- 높이는 내용의 길이와 상관없이 요소가 차지하는 공간에 따라 결정됩니다.
- block 요소는 margin과 padding 속성을 사용하여 요소 주위의 여백을 조절할 수 있습니다.
Backend Developer