[HTML+CSS3] 위치 속성 2

ODaram 2022. 9. 29. 14:12

위치 속성 2

display:none 과 visibility:hidden

      display:none과 visibility:hidden의 공통점 : 요소를 안보이게 한다.
      display:none 과 visibility:hidden의 차이점 :
      display:none는 요소를 제거한다. ///// visibility:hidden는 요소는 그대로 두고 안보이게 한다.

opacity 속성

요소의 투명도를 지정한다. (0 : 완전투명 ~ 1 : 불투명)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>위치속성 </title>
  <style>
    .red{
      position:absolute;
      width:100%; height:100px; left:0; top:0;
      background:red;
      /*가로는 100% */
    }
    .orange{
      position:absolute;
      width:100px; height:100vh; top:0; right:0;
      background:orange;
      /*세로값은 vh*/
    }
    .yellow{
      position:absolute;
      width:100%; height:100px; bottom:0; left:0;
      background:yellow;
    }
    .green{
      position:absolute;
      width:100px; height:100vh; left:0; top:0;
      background:green; 
    }
  </style>
</head>
<body>
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <!-- 부모 요소로 항상 덮어줘야함! -->
</body>
</html>