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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_display
wiki:css:css_note:css_display

차이

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

차이 보기로 링크

다음 판 		이전 판
wiki:css:css_note:css_display [2021/03/15 09:16]
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====== ======Inline Elements======
-인라인 요소는 새로운 줄에서 시작하지 않고 필요한 만큼만 차지합니다. +인라인 요소는 새로운 줄에서 시작하지 않고 필요한 만큼만 차지합니다.\\ 
 +인라인 값을 가지는 요소들\\ 
 +  * %%<span>%% 
 +  * %%<a>%% 
 +  * %%<img>%%
 \\ \\
-인라인 값을 가지는 요소들 +======Display: none;====== 
-  * <span> +''display: none''속성은 일반적으로 자바스크립트와 함께 사용되어 요소들을 삭제하고 다시 만들지 않고 숨기고 표시합니다.\\ 
-  * <a> +''<script>''요소는 기본 값으로 ''display: none;''을 가집니다.\\
-  * <img>+
 \\ \\
-======Display: none; ====== 
-''display: none''속성은 일반적응로 자바스크립트와 함께 사용되어 요소들을 삭제하고 다시 만들지 않고 숨기고 표시합니다.\\ 
-\\ 
-''<script>''요소는 기본 값으로 ''display: none;''을 가집니다.\\ 
 \\ \\
 ======Override The Default Display Value (기본 디스플레이 값 무시하기)====== ======Override The Default Display Value (기본 디스플레이 값 무시하기)======
 언급한 것처럼, 모든 요소에는 기본 디스플레이 값이 있습니다. 그러나 이것을 무시할 수 있습니다.\\ 언급한 것처럼, 모든 요소에는 기본 디스플레이 값이 있습니다. 그러나 이것을 무시할 수 있습니다.\\
-인라인 요소를 블록 요소로 또는 그 반대로 변경하는 것이 해당 웹 페이지를 특정 방식으로 보이게 하고 웹 표준을 준수하는 데에 유용할 수 있습니다.\\ +인라인 요소를 블록 요소로 또는 그 반대로 변경하는 것이, 해당 웹 페이지를 특정 방식으로 보이게 하고 웹 표준을 준수하는 데에 유용할 수 있습니다.\\ 
-일반적인 예제는 가로 메뉴에 대해 인라인 <li> 요소들을 만드는 것입니다:\\+일반적인 예제는 가로 메뉴에 대해 인라인 <li> 요소들을 만드는 것입니다\\
 ====예제==== ====예제====
 <code html> <code html>
줄 59: 줄 58:
     <style>     <style>
         li {         li {
-            display: inline;   /* <li>는 블록 요소이나 이 속성이 인라인요소로 변경해준다.*/ +            display: inline;   /* <li>는 블록요소이나 이 속성이 인라인요소로 변경해준다.*/ 
-        }                      /* 블록 요소가 인라인 요소로 변경되어 한 라인에 링크 3개가 나타난다 */+        }                      /* 인라인 요소로 변경되어 한 라인에 링크 3개가 나타난다 */
     </style>     </style>
 </head> </head>
줄 79: 줄 78:
 </code> </code>
 \\ \\
-**Note:** 한 요소의 디스플레이 속성을 설정하면 요소의 종류가 아니라 **해당 요소의 표시 방법**만 변경됩니다.\\+Note: 한 요소의 디스플레이 속성을 설정하면 요소의 종류가 아니라 **해당 요소의 표시 방법**만 변경됩니다.\\
 따라서 ''display: block''속성을 가진 인라인 요소는 내부에 다른 블럭 요소를 가질 수 없습니다.\\ 따라서 ''display: block''속성을 가진 인라인 요소는 내부에 다른 블럭 요소를 가질 수 없습니다.\\
-아래의 예제는 블럭 요소로서의 <span>요소들을 표시합니다.\\+아래의 예제는 블럭 요소로서의 %%<span>%%요소들을 표시합니다.\\
 \\ \\
 ====예제==== ====예제====
줄 95: 줄 94:
     <style>     <style>
         span {         span {
-            display: block;  /* 인라인 요소 <span>을 블럭 속성으로 변경합니다. */ +            display: block;  /* 인라인 요소 span을 블럭 요소로 변경하여 두 줄로 표시된다.*/ 
-        }                    /* 그래서 한 줄이 아닌 두 줄로 표시됩니다.*/+        }
     </style>     </style>
 </head> </head>
줄 108: 줄 107:
 </html> </html>
 </code> </code>
 +\\
 +<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>Display links as block elements</title>
 +    <style>
 +        a {
 +            display: block;
 +            /* 인라인요소 <a>를 블록 속성으로 변경하여 3줄로 표시 */
 +        }
 +    </style>
 +</head>
 +
 +<body>
 +
 +    <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>
 +</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,  }} {{tag>오션, CSS Display,  }}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_display.1615767393.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki