레이아웃과 렌더링에 관련된 display, visibility, opacity property

divedeepp·2022년 2월 12일

CSS3

목록 보기

5/21

display property

레이아웃을 정의하는데 자주 사용된다.

property value는 다음의 키워드들이 사용된다.

block : block level element로 지정
inline : inline level element로 지정
inline-block : inline-block level element로 지정
none : 해당 element를 화면에 표시하지 않는다. 공간조차 사라진다.

HTML element는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 default 값을 가지는데, 모든 HTML element는 block 또는 inline 두 가지 특성 중 하나를 갖는다.

아래는 <p> element에 대한 크롬 브라우저의 default CSS이다.

p {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

display property는 상속되지 않는다.

block level element

block 특성을 가지는 element는 다음과 같은 특징을 갖는다.

항상 새로운 줄에서 시작한다.
화면 크기 전체의 가로폭을 차지한다. width: 100%
width, height, margin, padding property 지정이 가능하다.
block level element 내에 inline level element를 포함할 수 있다.
block level element 예시 : <div>, <h1> ~ <h6>, <p>, <ol>, <ul>, <li>, <hr>, <table>, <form>

<!DOCTYPE html>
<html>
<head>
  <style>
    div:nth-of-type(1) {
      background-color: #FFA07A;
      padding: 20px;
    }
    div:nth-of-type(2) {
      background-color: #FF7F50;
      padding: 20px;
      width: 300px;
    }
  </style>
</head>
<body>
  <div>
    <h2>블록 레벨 요소</h2>
    <p>width, height 미지정 → width: 100%; height: auto;</p>
  </div>
  <div>
    <h2>블록 레벨 요소</h2>
    <p>width: 300px → width: 300px; height: auto;</p>
  </div>
</body>
</html>

inline level element

inline 특성을 가지는 element는 아래와 같은 특징을 갖는다.

새로운 줄에서 시작하지 않으며, 문장의 중간에 들어갈 수 있다.
content의 너비만큼 가로폭을 차지한다.
width, height, margin-top, margin-bottom property를 지정할 수 없다. top, bottom 여백은 line-height로 지정한다.
inline level element 뒤에 공백이 있는 경우, 정의하지 않은 공백(4px)가 자동 지정된다.
inline level element 내에 block level element를 포함할 수 없다.
inline level element 예시 : <span>, <a>, <strong>, <img>, <br>, <input>, <select>, <textarea>, <button>

<!DOCTYPE html>
<html>
<head>
  <style>
    span {
      background-color: red;
      color: white;
      padding: 10px;
      /* width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. */
      /* width: 200px; */
      /* margin: 10px; */
      /* 상, 하 여백은 line-height로 지정한다. */
      /* line-height: 50px; */
    }
  </style>
</head>
<body>
  <h1>My <span>Important</span> Heading</h1>
  <span>Inline</span>
  <span>Inline</span><span>Inline</span>
</body>
</html>

inline-block level element

block과 inline level element의 특징을 모두 갖는다.

inline level element처럼 줄을 바꾸지 않고, 다른 element와 함께 한 줄에 위치시킬 수 있다.
block level element처럼 width, height, margin, padding property를 모두 정의할 수 있다. top, bottom 여백을 margin과 line-height 두 가지 property 모두를 통해 제어할 수 있다.
content의 너비만큼 가로폭을 차지한다.
inline-block level element 뒤에 공백이 있는 경우, 정의하지 않은 공백(4px)가 자동 지정된다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .wrapper {
      font-size: 0; /*요소간 간격을 제거*/
    }
    .inline-block {
      display: inline-block;
      vertical-align: middle; /* inline-block 요소 수직 정렬 */
      border: 3px solid #73AD21;
      font-size: 16px;
    }
    .box1 {
      width: 300px;
      height: 70px;
    }
    .box2 {
      width: 300px;
      height: 150px;
    }
  </style>
</head>
<body>
  <div class="inline-block box1">inline-block height 70px</div>
  <div class="inline-block box2">inline-block height 150px</div>

  <div class="wrapper">
    <div class="inline-block box1">inline-block height 70px</div>
    <div class="inline-block box2">inline-block height 150px</div>
  </div>
</body>
</html>

visibility property

element를 보이게 할 것인지, 보이지 않게 할 것인지를 정의한다. 즉, element의 렌더링 여부를 결정한다.

property value가 되는 키워드는 다음과 같다.

visible : 해당 element를 보이게 한다. 기본값
hidden : 해당 element를 보이지 않게 한다. display: none;과 달리 해당 element의 공간은 사라지지 않고, 남아있는다.
collapse : table element에 사용하며, 행이나 열을 보이지 않게 한다.
none : IE와 파이어폭스에서는 table element의 행이나 열을 보이지 않게 한다. 크롬에서는 hidden과 동일하게 동작한다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .visible { visibility: visible; }
    .hidden  { visibility: hidden; }

    table, td { border: 1px solid black; }
    .collapse { visibility: collapse; }
    /* .collapse { visibility: hidden; } */
  </style>
</head>
<body>
  <h1 class="visible">visibility: visible</h1>
  <h1 class="hidden">visibility: hidden</h1>
  <h1 style="display:none">display:none</h1>

  <table>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="collapse">
      <td>C</td>
      <td>D</td>
    </tr>
  </table>
</body>
</html>

opacity property

element의 투명도를 정의하며, 0.0 ~ 1.0의 값을 입력한다.

0.0 : 투명
1.0 : 불투명

<!DOCTYPE html>
<html>
<head>
  <style>
    div, img {
      float: left;
      width: 150px;
      height: 150px;
      margin: 30px;
      background-color: blue;
      color: white;
      opacity: 0.5;
      transition: opacity 1s;
    }
    div:hover, img:hover {
      opacity: 1.0;
    }
  </style>
</head>
<body>
  <div>opacity: 0.5</div>
  <img src="https://poiemaweb.com/img/doug.jpg" alt="doug">
</body>
</html>