Layout (display 속성)_CSS

🚨 Caution 🚨

해당 내용은 wecode에서 학습하며 정리한 내용입니다.
필자가 이해한 부분을 바탕으로 작성한 글이기 때문에 실제 내용들과 다소 차이가 있을 수 있습니다.
이 점 유의해서 읽어 주시면 감사하겠습니다.

내용에 대한 친절한 피드백은 언제나 감사합니다.

💡 display 속성

이번에는 display 속성에 대해서 알아보도록 하겠다.
display는 inline 과 block 에 대해서 알아두면 금세 풀리는 개념이다.

일상생활과 비교해서 해당 개념들을 이해해 본다면 영화관 좌석과 비교해 볼 수 있겠다.보통의 영화관객들이라고 한다면 한 사람이 한 좌석을 예매해서 영화를 관람한다.
하지만 최근 영화관 민폐 유형 중 양옆 좌석을 예매한 뒤에 자리를 잡고
상영 전에 양 옆 좌석을 취소해 넓은 자리에서 영화를 관람하는 경우가 있다고 한다.

이런 상황에서 관객 유형과 해당 개념을 비교해 보자면
일반적인 관객들은 inline 의 속성을 가지고 있고,
민폐 관객은 block 의 속성을 가지고 있다고 생각하면 이해가 빠를 것 같다.
(그렇다고 block 속성이 나쁜 친구는 아닙니다..)

inline 의 경우는 자신에게 할당된 영역만 차지하기 때문에
그 영역 옆에도 공간이 허락한다면 다른 영역을 채울 수 있고,
block 의 경우는 자신에게 할당된 영역 이외에도 그 영역이 속한 전체 줄을 차지하는 속성이다.

거기에 inline-block 라는 속성까지 더해져 display 에서는 3가지 속성을 알아보도록 하겠다.

▪️ 각 속성별 차이

해당 속성들의 비교를 위해서 간단한 코드를 짜봤다

.inline {
  background-color: yellow;
  display: inline;
  width: 200px;
}

.inline-block {
  background-color: green;
  display: inline-block;
  width: 200px;
}

.block {
  background-color: blue;
  display: block;
  color: white;
}

일단 inline 과 block 를 비교해서 본다고 하면
inline 은 글자가 들어간 영역만 차지하고 있고,
200px 의 넓이를 할당해줘도, 글자가 있는 영역까지만 차지하고 있는 것을 볼 수 있다.
block 은 글자가 있는 영역 외에도, 전체 영역 끝까지 공간을 차지하고 있다.
물론 차지할 영역을 지정해 준다면 그만큼 영역을 차지하지만
그 옆으로 다른 개체가 들어올 수 없다.

이렇게 둘의 성향 차이가 확실한데, 이 둘을 섞어 놓은데 inline-block 이다.
inline-block 은 inline 처럼 자신이 차지한 공간 외에 다른 개체가 들어올 수 있고,
block 처럼 영역의 범위를 지정해 줄 수 있다.

간단하게 표로 정리해 봤다.

▪️ 각 태그별 display 속성

각 태그마다 inline 혹은 block 의 속성을 갖고 있는 것들이 있다.
너무 많기 때문에 하나하나 설명하기는 어렵지만
내가 사용할 태그의 display 속성을 알아둔다면 Layout 작업에서
보다 효율적으로 시간을 활용 할 수 있을 것으로 예상 된다.

inline 요소 - MDN
block 요소 - MDN

▪️ 요약하자면..

1. display 속성에는 inline block inlin-block 등이 있다.
2. 각 태그 별로 갖고 있는 display 속성이 있다.