[CSS] Display : block, inline, none

HTML과 인터넷

[CSS] Display : block, inline, none

츔 2022. 8. 4. 23:26

CSS : Display

선택된 태그에 대한 가장 큰 틀의 디자인 규범을 결정하는 속성

display:

block

화면 전체를 사용한다.(한줄을 다 사용한다)
속성으로 width, height, margin, padding 속성을 사용할 수 있다.
요소 태그 : <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <form>, <hr>, <table>, <address>
display: block; <- 해당 요소를 block으로 지정한다.
block 요소가 다른 block이나 inline 요소를 감쌀 수 있다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:#E7E9EB;
}
    #myDIV {
      width:500px;
      height:150px;
      background-color:#FFFFFF;
    }
    #myDIV span {
      background:skyblue;
      display:block;
    }
    </style>
    </head>
    <body>

    <h1>The direction property</h1>

    <div id="myDIV">
    <p>A demonstration of how to set the display value for an element:</p>

    <p>Inside this paragraph, we have placed a <span>little blue SPAN</span> element.</p>
    </div>

</body>
</html>

inline

콘텐츠 크기 만큼의 부피를 갖습니다. (한 줄을 다 차지하지 않는다)
height, width 속성이 무시 됩니다.
요소 태그 : <img>, <br>, <a>, <span>, <input>, <button>, <label>
display: inline; <- 해당 요소를 inline으로 지정한다.
inline 요소 안에 inline 요소를 포함할 수 있으나 block요소는 포함할 수 없다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:#E7E9EB;
}
#myDIV {
  width:500px;
  height:150px;
  background-color:#FFFFFF;
}
#myDIV span {
  background:skyblue;
  display:inline;
}
</style>
</head>
<body>

<h1>The direction property</h1>

<div id="myDIV">
<p>A demonstration of how to set the display value for an element:</p>

<p>Inside this paragraph, we have placed a <span>little blue SPAN</span> element.</p>
</div>

</body>
</html>

none

해당 요소를 화면에 표시하지 않는다.
visibility : hidden도 같은 역할을 하는데 visibility 속성은 화면에서 감추기만 할 뿐 그대로 공간은 유지핟나.
display: none은 공간 자체가 없어진다.
반응형 웹을 제작할 때 PC용에서는 표시하지만 태블릿, 모바일에서는 감춤 처리를 할 때 사용한다.