차이

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

--- wiki:css:css_note:css_display [2021/03/15 11:23]
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======
@@ 줄 198: / 줄 198: @@
 </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

사용자 도구

사이트 도구

차이

문서 도구