display

별초롱언니 2025. 3. 13. 17:51

▣ display

속성값	의미
block	블록 요소 ( <div> 등 )
inline	인라인 요소 ( <span> 등 )
inline-block	인라인 블록요소 ( <input> 등 )
기타	table, table-cell, flex등
none	요소의 박스 타입이 없음 (요소가 사라짐)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      display: block;
      background-color: yellow;
      width: 200px;
      height: 200px;
    }
    
  </style>
</head>
<body>
  <span></span>
</body>
</html>

인라인 요소는 기본적으로 너비와 높이를 가지지 못하며 텍스트를 다루는데 특화 되어있다.

하지만 디스플레이를 사용하여 블록으로 변경하면 너비 높이를 사용가능하게

바꿔지므로 블록의 특성을 사용할 수 있게 되었다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      display: inline-block;
      width: 100px;
      height: 20px;
      margin: 50px 0;
      padding: 20px 0;
      border: 1px solid pink;
      background-color: pink;
    }
    input:nth-child(2) {
      display: none;
    }
  </style>
</head>
<body>
  <input type="text" value="1">
  <input type="text" value="2">
  <input type="text" value="3">
</body>
</html>

<input> 태그가 옆으로 쌓이므로 기본적으로 인라인 요소이다.

하지만 블록요소의 기능도 가지므로 너비와 높이를 가질 수 있고 패딩과 마진 또한 설정 가능하다. display를 none으로 설정하면 화면에서 보이지 않는 것이 아니라 아예 사라진다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    div.hide {
      display: none;
    }
  </style>
</head>
<body>
  <button>Toggle</button>
  <div>요소</div>

  <script>
    const el = document.querySelector('div');
    const btn = document.querySelector('button');
    btn.addEventListener('click',function() {
      if(el.classList.contains('hide')) {
        el.classList.remove('hide');
      }
      else {
        el.classList.add('hide');
      }
    });
  </script>
</body>
</html>

display : none은 다음과 같이 토글 버튼을 클릭하면 div요소가 사라지는 기능으로 응용 가능하다.

▣ overflow

요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어하는 기능

속성값	의미
visible	넘친 부분을 자르지 않고 그대로 보여준다
hidden	넘친 부분을잘라내고, 보이지 않도록 함
scroll	넘친 부분을 잘라내고, 스크롤바를 이용하여 볼 수 있도록 한다.
auto	넘친 부분이 있는 경우만 잘라내고 스크롤바를 이용하여 볼 수 있도록 한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent {
      width: 300px;
      height: 250px;
      border: 4px solid;
      overflow: visible;
    }
    .parent .child {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
      border: 4px solid lightcoral;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
</body>
</html>

▣ opacity

· 요소의 투명도를 지정하는 기능 (opacity를 0으로 한것과 display:none으로 한것은 다르다)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 250px;
      background-color: red;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <div>안녕하세용~</div>
</body>
</html>