[ CSS ] display 속성의 요소들 이해 (block, inline, inline-block)

2024. 4. 28. 14:40· FRONT-END/└ CSS

 

 

 

[ display 속성 이해 ]

  •  `display` 속성은 요소를 화면에 어떻게 표시할지 결정하는 데 사용
  •  요소의 레이아웃 박스 유형을 결정하는 중요 속성
  •  요소로는 `block`, `inline`, `inline-block`, `flex`, `grid`, `none` 값이 있다

 

 

 

1. display: none;

  • 화면에 보이지 않도록 해주는 기능
  • visibility: hidden과 다르게 요소가 차지하는 공간조차 없애버리는 특징을 가짐

 

2. display: flex;

  • 유연한 박스 모델로, flex 컨테이너 내의 아이템들의 가로, 세로 축을 기준으로 유연하게 배치할 수 있다.
                                                                                  └ 자식 요소들의 다양한 방향과 순서로 정렬할 수 있게 해줌

3. display: grid;

  • 2차원 레이아웃 시스템 제공
  • 행과 열의 형태로 공간을 분할하여 요소를 배치할 수 있음 (복잡한 레이아웃을 구현할 때 매우 유용)
  • grid-template-columns, grid-template-rows, grid-gap 등의 속성이 있음 (세밀한 레이아웃 조정 가능)

 

4. display: block;

  • `block` 속성을 갖는 요소는 항상 새로운 블록 상자를 만든
  • 요소의 너비는 사용 가능한(부모 요소의) 전체 너비를 차지, 다음에 오는 요소는 항상 다음 줄에 위치한다
  • block 요소는 어지간한 속성을 다 적용할 수 있다!
  • .block-example { display: block; width: 200px; height: 100px; background-color: #3498db; }
  • block 요소를 나란히 배치하기 위해선 float나 flex, grid 등의 레이아웃 기법을 사용해야 한다
  • <div>, <p>, <h1>등 대부분의 HTML 요소는 기본적으로 block 요소이다
  • 기본적으로 width 가 자신의 컨테이너의 100%. 즉, 가로 한 줄을 다 차지하게 된다

 

5. display: inline;

  • `inline` 속성을 갖는 요소는 새로운 줄을 시작하지 않고 문장 내에서 위치한다 (텍스트와 같이 줄 안에서 표시됨)
  • 너비와 높이 속성이 적용되지 않으며, 컨텐츠 크기만큼만 차지한다
  • 적용되지 않는 속성이 많음..
           └ (padding은 적용되나, 레이아웃에 영향을 주지 않음)
           └ width, height, margin-top, margin-bottom 적용 불가 (속성 적용을 원하면 다른 요소를 택해야함.)
  • <span>, <a>, <img> 등이 inline 요소이다
  • .inline-example { display: inline; background-color: #2ecc71; }

 

 

6. display: inline-block;

  • `inline-block` 속성을 갖는 요소는 `inline`처럼 줄 바꿈을 하지 않으면서, `block`처럼 너비와 높이 속성이 적용됨.
    (장점만 가짐;;)
  • 인라인처럼 옆으로 나열되면서 블록 속성을 가진다
  • 텍스트의 기준선에 맞춰 정렬되므로 주의 필요(vertical-align 속성 활용)
  • <button>, <input>등이 inline-block 요소다
  • .inline-block-example { display: inline-block; width: 150px; height: 75px; background-color: #e74c3c; }

 

 

 

 

 

개인 공부 기록용입니다:)

참고 : https://waymond.tistory.com/219, https://programming119.tistory.com/97

728x90