프론트엔드/css

[Front-End] display 정리 ( CSS 문법 )

Shong Studio 2024. 9. 29. 17:32
728x90
반응형

CSS에서 display 속성은 요소가 웹 페이지 내에서 어떻게 배치되고 표시될지 결정하는 데 사용됩니다.

여러 종류의 display 값들이 있으며, 가장 많이 사용되는 값들의 특징과 활용 예시는 다음과 같습니다.

1. block

  • 특징:
    • 요소가 "블록"처럼 작동하여, 가로 전체를 차지합니다.
    • 다음 요소는 새로운 줄에서 시작됩니다.
    • 대표적인 블록 요소: <div>, <h1>, <p> 등.
  • 예시:
    <div style="display: block; background-color: lightblue;">Block 요소</div>
<div style="display: block; background-color: lightcoral;">새로운 줄에 표시되는 블록 요소</div>

2. inline

  • 특징:
    • 요소가 "인라인"으로 작동하여, 내용물만큼의 가로 너비를 차지합니다.
    • 다른 요소들과 한 줄에 배치됩니다.
    • 대표적인 인라인 요소: <span>, <a>, <strong> 등.
  • 예시:
    <span style="display: inline; background-color: yellow;">Inline 요소</span>
<span style="display: inline; background-color: pink;">옆에 붙어있는 또 다른 인라인 요소</span>

3. inline-block

  • 특징:
    • inline과 block의 특성을 모두 가지고 있습니다.
    • 요소가 인라인처럼 한 줄에 배치되지만, 블록처럼 가로/세로 크기를 조정할 수 있습니다.
  • 예시:
    <div style="display: inline-block; width: 100px; height: 100px; background-color: lightgreen;">Inline-Block 1</div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: orange;">Inline-Block 2</div>

4. flex

  • 특징:
    • 플렉스 컨테이너를 만들어 요소들을 효율적으로 정렬, 배치 및 크기 조정할 수 있게 합니다.
    • 주로 수평 또는 수직 정렬을 쉽게 할 때 사용됩니다.
  • 예시:
    <div style="display: flex; gap: 10px;">
  <div style="background-color: lightblue; padding: 10px;">Flex Item 1</div>
  <div style="background-color: lightcoral; padding: 10px;">Flex Item 2</div>
  <div style="background-color: lightgreen; padding: 10px;">Flex Item 3</div>
</div>

5. grid

  • 특징:
    • 그리드 컨테이너를 만들어 행과 열을 기반으로 요소를 배치합니다.
    • 복잡한 레이아웃을 만들 때 강력한 도구입니다.
  • 예시:
    <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 10px;">
  <div style="background-color: lightblue; padding: 10px;">Grid Item 1</div>
  <div style="background-color: lightcoral; padding: 10px;">Grid Item 2 (2배의 너비)</div>
</div>

6. none

  • 특징:
    • 요소를 화면에서 보이지 않게 합니다.
    • DOM에는 존재하지만 렌더링되지 않습니다.
  • 예시:
    <div style="display: none;">이 요소는 보이지 않습니다.</div>
<div style="background-color: lightblue;">이 요소만 표시됩니다.</div>

7. table

  • 특징:
    • 요소를 표처럼 배치하도록 설정합니다.
    • <table> 요소를 디자인할 때 주로 사용됩니다.
  • 예시:
    <div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell; padding: 10px; background-color: lightblue;">셀 1</div>
    <div style="display: table-cell; padding: 10px; background-color: lightcoral;">셀 2</div>
  </div>
</div>

8. table-row

  • 특징:
    • 요소를 표의 행처럼 만듭니다.
  • 예시:
    <div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell; padding: 10px; background-color: lightgreen;">첫 행의 셀 1</div>
    <div style="display: table-cell; padding: 10px; background-color: yellow;">첫 행의 셀 2</div>
  </div>
  <div style="display: table-row;">
    <div style="display: table-cell; padding: 10px; background-color: orange;">두 번째 행의 셀 1</div>
    <div style="display: table-cell; padding: 10px; background-color: pink;">두 번째 행의 셀 2</div>
  </div>
</div>

9. table-cell

  • 특징:
    • 요소를 표의 셀처럼 만듭니다.
  • 예시:
    <div style="display: table;">
  <div style="display: table-row;">
    <div style="display: table-cell; padding: 10px; background-color: lightblue;">셀 1</div>
    <div style="display: table-cell; padding: 10px; background-color: lightcoral;">셀 2</div>
  </div>
</div>

이러한 display 속성 값들을 사용하면 레이아웃을 다양하고 유연하게 만들 수 있습니다. block과 inline을 사용해 요소의 기본적인 배치를 설정하고, flex와 grid를 활용해 더 복잡한 레이아웃을 만들 수 있습니다. table, table-row, table-cell은 표 형식의 레이아웃을 만들 때 유용하며, none은 요소를 보이지 않게 할 때 사용됩니다.

728x90
반응형