본문 바로가기
CSS

[CSS] display 에 대해

by 이Dino 2024. 6. 26.

display :  요소를 보여주는 방식을 지정하는 속성

 

1 . display: none 

아래 큰 박스 안에서 두 번째 빨간 박스에만 display: none을 적용 시키면 요소가 사라진다. 

이 때, 빨간 박스의 영역도 사라져서, 옆의 요소인 파란 박스가 그 위치를 차지한다. 

- 영역은 그대로 유지하고, 요소가 눈에 안 보이게 하는 visibility: hidden과 다른 점이다.

 

* 아래 코드는 밑의 그림을 표현하기 위한 전체 코드가 아닌, 특징만 표현한 코드 입니다.

<div>
    <div>빨간 박스</div>
    <div>파란 박스</div>
</div>
<div>
    <div style="display: none;">빨간 박스</div>
    <div>파란 박스</div>
</div>

    

 
 
 
 

 

 

2 . display: block

아래 큰 박스 안의 빨간, 파란 박스들은 display: block을 적용 시킨 요소들이다.

이 요소들에 양 옆에는 다른 요소들이 올 수 없고, 줄바꿈이 된다. 

width, height를 지정할 수 있고, 지정하지 않으면, width는 부모, height는 내부 컨텐츠의 영향을 받게 된다.

기본적으로 block의 속성을 가진 html 태그는 <header>, <div>, <h1> ~ <h6>, <section>, <p> 등이 있다.

 

* 아래 코드는 밑의 그림을 표현하기 위한 전체 코드가 아닌, 특징만 표현한 코드 입니다.

<div>
    <div style="display: block; height: 50px;">빨간 박스</div>
    <div style="display: block; height: 30px;">파란 박스</div>
</div>
<div>
    <div style="display: block; width: 300px; height: 50px;">빨간 박스</div>
    <div style="display: block; width: 300px;">파란 박스</div>
</div>
width 지정 안 함 / height 50px
width 지정 안 함 / height 30px
width 300px / height 50px
width 300px / height 지정 안 함

 

 

 

3. display: inline

아래 박스는 위의 박스들의 display를 display: inline으로만 바꾼 요소들이다.

이 요소들에 양 옆에는 다른 요소들이 올 수 있고, 줄바꿈이 되지 않는다. 

width, height를 지정할 수 없고, 지정한다고 해도, 내부 컨텐츠에 맞게 끔 영역이 잡힌다.

기본적으로 inline의 속성을 가진 html 태그는 <a>, <span> 등이 있다.

 

* 아래 코드는 밑의 그림을 표현하기 위한 전체 코드가 아닌, 특징만 표현한 코드 입니다.

<div>
    <div style="display: inline; height: 50px;">빨간 박스</div>
    <div style="display: inline; height: 30px;">파란 박스</div>
</div>
<div>
    <div style="display: inline; width: 300px; height: 50px;">빨간 박스</div>
    <div style="display: inline; width: 300px;">파란 박스</div>
</div>
width 지정 안 함 / height 50px
width 지정 안 함 / height 30px
width 300px / height 50px
width 300px / height 지정 안 함

 

 

4. display: inline-block

아래 박스는 위의 박스들의 display를 display: inline-block으로만 바꾼요소들이다.

이 요소들에 양 옆에는 다른 요소들이 올 수 있고, 줄바꿈이 된 다. 위의 inline과 block을 합친  것이다.

width, height도 지정이 가능하다.

 

* 아래 코드는 밑의 그림을 표현하기 위한 전체 코드가 아닌, 특징만 표현한 코드 입니다.

<div>
    <div style="display: inline-block; height: 50px;">빨간 박스</div>
    <div style="display: inline-block; height: 30px;">파란 박스</div>
</div>
<div>
    <div style="display: inline-block; width: 300px; height: 50px;">빨간 박스</div>
    <div style="display: inline-block; width: 300px;">파란 박스</div>
</div>
width 지정 안 함 / height 50px
width 지정 안 함 / height 30px
width 300px / height 50px
width 300px / height 지정 안 함

 

 

추가적으로, flex 와 grid 같이 자주 사용되는 스타일도 있지만, 이건 내용도 많아서 다음에 따로 다루도록..

 

 

티스토리툴바