차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_display [2021/03/15 10:44]
emblim98
+++ wiki:css:css_note:css_display [2023/01/13 18:44] (현재)
@@ 줄 21: / 줄 21: @@
 블록 레벨 요소는 항상 새로운 줄에서 시작하고 사용 가능한 화면의 전체 너비를 차지합니다.\\
 \\
-블록 레벨 값을 가지는 요소들
+블록 레벨 값을 가지는 요소들\\
-  * <div>
+  * %%<div>%%
-  * <h1> ~ <h6>
+  * %%<h1> ~ <h6>%%
-  * <p>
+  * %%<p>%%
-  * <form>
+  * %%<form>%%
-  * <header>
+  * %%<header>%%
-  * <footer>
+  * %%<footer>%%
-  * <section>
+  * %%<section>%%
 \\
 ======Inline Elements======
@@ 줄 58: / 줄 58: @@
     <style>
         li {
-            display: inline;
+            display: inline;   /* <li>는 블록요소이나 이 속성이 인라인요소로 변경해준다.*/
-            /* <li>는 블록요소이나 이 속성이 인라인요소로 변경해준다.*/
+        }                      /* 인라인 요소로 변경되어 한 라인에 링크 3개가 나타난다 */
-        }
-        /* 인라인 요소로 변경되어 한 라인에 링크 3개가 나타난다 */
     </style>
 </head>
@@ 줄 83: / 줄 80: @@
 Note: 한 요소의 디스플레이 속성을 설정하면 요소의 종류가 아니라 **해당 요소의 표시 방법**만 변경됩니다.\\
 따라서 ''display: block''속성을 가진 인라인 요소는 내부에 다른 블럭 요소를 가질 수 없습니다.\\
-아래의 예제는 블럭 요소로서의 <span>요소들을 표시합니다.\\
+아래의 예제는 블럭 요소로서의 %%<span>%%요소들을 표시합니다.\\
 \\
+====예제====
+<code html>
+<!DOCTYPE html>
+<html lang="en">
-<file html>
+<head>
-<style>
+    <meta charset="UTF-8">
-%%span%% {
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  display: block;
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-}
+    <title>inline element changed as block element</title>
-</style>
+    <style>
+        span {
+            display: block;  /* 인라인 요소 span을 블럭 요소로 변경하여 두 줄로 표시된다.*/
+        }
+    </style>
+</head>
+<body>
+    <span>A display property with a value of "block" results in</span><span>a line break between the two elements</span>
+</body>
+</html>
 </code>
 \\
-====예제====
+<code html>
-<file html>
 <!DOCTYPE html>
 <html lang="en">
@@ 줄 103: / 줄 116: @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>inline element changed as block element</title>
+    <title>Display links as block elements</title>
     <style>
-        %%span%% {
+        a {
             display: block;
+            /* 인라인요소 <a>를 블록 속성으로 변경하여 3줄로 표시 */
         }
     </style>
@@ 줄 113: / 줄 127: @@
 <body>
-    %%<span>A display property with a value of "block" results in</span><span>a line break between the two elements</span>%%
+    <p>Display links s block elements</p>
+    <a href="https://www.w3schools.com/html/default.asp">HTML</a>
+    <a href="https://www.w3schools.com/css/default.asp">CSS</a>
+    <a href="https://www.w3schools.com/js/default.asp">Javascript</a>
 </body>
 </html>
-</file>
+</code>
+\\
+\\
+======Hide an Element -display:none or visibility:hidden?======
+''display''속성을 ''none''으로 설정하여 한 요소를 숨길 수 있습니다. 해당 요소는 숨겨질 것이고, 해당 웹페이지는 마치 해당 요소가 그곳에 없는 것처럼 표시될 것입니다.\\
+====예제====
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<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>visible heading</title>
+    <style>
+        h1.hidden {
+            display: none;   /* hidden 클래스의 h1이 사라지고, 공간도 사라진다. */
+        }
+    </style>
+</head>
+<body>
+    <h1>This is a visible heading</h1>
+    <h1 class="hidden">This is a hidden heading</h1>
+    <p>Notice tht the h1 element with display: none; does not take up any space.</p>
+</body>
+</html>
+</code>
+\\
+''visibility:hidden;''도 요소를 숨깁니다.\\
+\\
+하지만, 해당 요소는 여전히 예전처럼 동일한 공간을 차지할 것입니다. 해당 요소는 숨겨지지만 여전히 레이아웃에 영향을 줍니다.\\
+\\
+====예제====
+<code html>
+<!DOCTYPE html>
+<html lang="en">
+<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>Visibility: hidden;</title>
+    <style>
+        h1.hidden {
+            visibility: hidden;
+        }
+    </style>
+</head>
+<body>
+    <h1>This is a visible heading</h1>
+    <h1 class="hidden">This is a hidden heading</h1>
+    <p>Notice that the hidden heading still takes up space.</p>
+</body>
+</html>
+</code>
+\\
+====More Examples====
+<code html>
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.imgbox {
+  float: left;
+  text-align: center;
+  width: 120px;
+  border: 1px solid gray;
+  margin: 4px;
+  padding: 6px;
+}
+button {
+  width: 100%;
+}
+</style>
+</head>
+<body>
+<h3>Difference between display:none and visiblity: hidden</h3>
+<p><strong>visibility:hidden</strong> hides the element, but it still takes up space in the layout.</p>
+<p><strong>display:none</strong> removes the element from the document. It does not take up any space.</p>
+<div class="imgbox" id="imgbox1">Box 1<br>
+  <img src="img_5terre.jpg" alt="Italy" style="width:100%">
+  <button onclick="removeElement()">Remove</button>
+</div>
+<div class="imgbox" id="imgbox2">Box 2<br>
+  <img src="img_lights.jpg" alt="Lights" style="width:100%">
+  <button onclick="changeVisibility()">Hide</button>
+</div>
+<div class="imgbox">Box 3<br>
+  <img src="img_forest.jpg" alt="Forest" style="width:100%">
+  <button onclick="resetElement()">Reset All</button>
+</div>
+<script>
+function removeElement() {
+  document.getElementById("imgbox1").style.display = "none";
+}
+function changeVisibility() {
+  document.getElementById("imgbox2").style.visibility = "hidden";
+}
+function resetElement() {
+  document.getElementById("imgbox1").style.display = "block";
+  document.getElementById("imgbox2").style.visibility = "visible";
+}
+</script>
+</body>
+</html>
+</code>
+\\
+<code html>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #panel,
+        .flip {
+            font-size: 16px;
+            padding: 10px;
+            text-align: center;
+            background-color: #4CAF50;
+            color: white;
+            border: solid 1px #a6d8a8;
+            margin: auto;
+        }
+        #panel {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <p class="flip" onclick="myFunction()">Click to show panel</p>
+    <div id="panel">
+        <p>This panel contains a div element, which is hidden by default (display: none).</p>
+        <p>It is styled with CSS and we use JavaScript to show it (display: block).</p>
+        <p>How it works: Notice that the p element with class="flip" has an onclick attribute attached to it. When the
+            user clicks on the p element, a function called myFunction() is executed, which changes the style of the div
+            with id="panel" from display:none (hidden) to display:block (visible).</p>
+        <p>You will learn more about JavaScript in our JavaScript Tutorial.</p>
+    </div>
+    <script>
+        function myFunction() {
+            document.getElementById("panel").style.display = "block";
+        }
+    </script>
+</body>
+</html>
+</code>
+\\
+====CSS Display/Visibility Properties====
+^ Property    ^ Description          ^
+| display     | 요소가 표시되는 방법을 지정합니다.  |
+| visibility  | 요소의 표시 여부를 지정합니다.    |
 {{tag>오션, CSS Display,  }}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구