[CSS] display 속성

SuKong·2021년 4월 7일
3
post-thumbnail

display 속성이란?

  • 요소를 어떻게 보여줄지 레이아웃을 결정하는 속성
  • 디폴트는 inline
  • 모든 elements에 적용 가능하다.

1. display : none

: 요소를 렌더링하지 않도록 설정하고 visibility 속성을 hidden으로 설정한 것과 달리 영역도 차지하지 않는다.

예제

<style>
.display-none{ display: none }
.invisible{ visibility: hidden }
</style>

<div class="display-none">1</div>
<div>2</div>

<div class="invisible">3</div>
<div>4</div>

출력결과

2

4

2. display : inline

span태그, a태그, b태그, i태그, img태그 등이 해당한다.

block과 달리 줄 바꿈이 되지 않고, width와 height, 여백을 지정할 수 없다. 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있다.

3. display : block

div태그, p태그, h태그, li태그, form태그 등이 해당한다.

가로 영역을 모두 차지하며 항상 줄 바꿈이 되어 새로운 라인에서 시작한다. 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락이다.
width와 height 속성을 지정할 수 있다.

4. display : inline-block

요소 자체는 inline요소처럼 동작하지만 (줄바꿈이 되지 않음)
해당 요소 내부에서는 블록 요소처럼 동작한다. (크기나 여백을 지정할 수 있음)

5. display : flex

아이템들을 가로 방향 혹은 세로 방향으로(1차원 배치) 배치할 수 있는 방식으로 요소의 크기가 불분명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다.
Flex의 속성은 컨테이너에 적용되는 속성, 아이템에 적용되는 속성으로 나뉜다.
Flex에 관련한 포스트는 여기에서 자세하게 볼 수 있고, FlexboxFroggy 게임에서 실습을 하며 속성을 익힐 수 있다.

6. display : grid

Flex와는 다르게 2차원으로 배치하는 방식으로 column과 row의 비율이나 크기를 지정한다.
grid-template-rows는 가로에 배치할 셀들의 비율이나 크기를 지정하는 속성이고
grid-template-columns는 세로로 배치할 셀들의 비율이나 크기를 나타낸다.

grid-template-rows나 grid-template-columns에 입력할 수 있는 단위는 px, fr이 있는데 fr은 fraction으로 숫자 비율대로 트랙의 크기를 나누는 것이다.
즉 grid-template-columns : 1fr 1fr 1fr 은 1:1:1로 나누는 것이고
grid-template-columns : 100px 3fr 1fr 은 첫번째 셀은 100px, 두번째 셀과 세번째 셀은 남은 부분을 3:1로 나누어 차지한다.

다음은 grid-template-rows와 grid-template-columns를 모두 적용한 예시이다.

<style>
    .wrapper {
      display: grid;
      grid-template-rows: 20px 40px;
      grid-template-columns: 30px 35px;
    }

    .item {
      border: 1px solid blue;
    }
  </style>

<body>
  <div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>

7. display : table

레이아웃을 table로 표현할 수 있는 속성이다.

display : table // table 요소처럼 표현하기
display : table-row // tr 요소처럼 표현하기
display : table-column // col 요소처럼 표현하기
display : table-cell // td 요소처럼 표현하기
display : table-caption // caption요소처럼 표현하기

profile
안녕하세요 🤗

0개의 댓글