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

사용자 도구

사이트 도구

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

문서의 이전 판입니다!

목차

CSS Display

  • description : CSS Display Property, Block-level Elements, Inline Elements
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-15



Source of the article



The display Property

display속성은 레이아웃을 조절하는 가장 중요한 CSS 속성입니다.
display속성은 한 요소의 표시 여부와 표시 방법을 지정합니다.
모든 HTML 요소들은 타입에 따른 기본 display 값을 가지고 있습니다. 대부분의 요소들의 기본 display 값은 block 또는 inline입니다.

Block-level Elements

블록 레벨 요소는 항상 새로운 줄에서 시작하고 사용 가능한 화면의 전체 너비를 차지합니다.

블록 레벨 값을 가지는 요소들

    • <h1> ~ <h6>
    • <p>
    • <form>
    • <header>
    • <footer>
    • <section>


    Inline Elements

    인라인 요소는 새로운 줄에서 시작하지 않고 필요한 만큼만 차지합니다.
    인라인 값을 가지는 요소들

    • * <a> * <img>
      ======Display: none;====== display: none속성은 일반적으로 자바스크립트와 함께 사용되어 요소들을 삭제하고 다시 만들지 않고 숨기고 표시합니다.
      <script>요소는 기본 값으로 display: none;을 가집니다.


      ======Override The Default Display Value (기본 디스플레이 값 무시하기)====== 언급한 것처럼, 모든 요소에는 기본 디스플레이 값이 있습니다. 그러나 이것을 무시할 수 있습니다.
      인라인 요소를 블록 요소로 또는 그 반대로 변경하는 것이, 해당 웹 페이지를 특정 방식으로 보이게 하고 웹 표준을 준수하는 데에 유용할 수 있습니다.
      일반적인 예제는 가로 메뉴에 대해 인라인 <li> 요소들을 만드는 것입니다
      ====예제==== <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</title> <style> li { display: inline; } </style> </head> <body> <p>Display a list of links as a horizontal menu:</p> <ul> <li><a href=“https://www.w3schools.com/html/default.asp” target=“_blank”>HTML</a></li> <li><a href=“https://www.w3schools.com/css/default.asp” target=“_blank”>CSS</a></li> <li><a href=“https://www.w3schools.com/js/default.asp” target=“_blank”>Javascript</a></li> </ul> </body> </html> </code>
      Note: 한 요소의 디스플레이 속성을 설정하면 요소의 종류가 아니라 해당 요소의 표시 방법만 변경됩니다.
      따라서 display: block속성을 가진 인라인 요소는 내부에 다른 블럭 요소를 가질 수 없습니다.
      아래의 예제는 블럭 요소로서의 <span>요소들을 표시합니다.

      ====예제==== <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>inline element changed as block element</title> <style> span { display: block; } </style> </head> <body> A display property with a value of “block” results ina line break between the two elements </body> </html> </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; } </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; } </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>

      Box 1<br> 

      <img src="img_5terre.jpg" alt="Italy" style="width:100%">
<button onclick="removeElement()">Remove</button>

      Box 2<br> 

      <img src="img_lights.jpg" alt="Lights" style="width:100%">
<button onclick="changeVisibility()">Hide</button>

      Box 3<br> 

      <img src="img_forest.jpg" alt="Forest" style="width:100%">
<button onclick="resetElement()">Reset All</button>

      <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> 

            <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 요소의 표시 여부를 지정합니다.
      , ,
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_display.1615781630.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