wiki:css:css_note:css_display

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_display [2021/03/15 12:27]
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======
@@ 줄 199: / 줄 199: @@
 </code>
 \\
+====More Examples====
 <code html>
 <!DOCTYPE html>
@@ 줄 257: / 줄 258: @@
 </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,  }}

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_display.1615778837.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)