display 속성은 레이아웃을 제어하는 데 가장 중요한 CSS 속성이다.
CSS display 속성
display 속성은 요소 표시 여부/방법을 지정한다.
모든 HTML 요소는 요소 유형에 따라 기본 표시 값을 가진다. 대부분의 요소에 대한 기본 표시 값은 block 또는 inline 이다.
block-level 요소
block-level 요소는 항상 새 라인에서 시작되며 사용 가능한 전체 너비를 차지한다(가능한 한 왼쪽과 오른쪽으로 늘어남).
| The <div> element is a block-level element. |
블록 레벨 요소의 예:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
inline 요소
인라인 요소는 새 라인에서 시작되지 않고 필요한 만큼의 너비만 차지한다.
| 이것은 inline<span> 요소가 포함된 단락입니다. |
인라인 요소의 예:
- <span>
- <a>
- <img>
display: none;
display: none. 요소를 삭제하거나 다시 만들지 않고 숨기거나 표시하기 위해 일반적으로 JavaScript와 함께 사용된다. 이를 달성하는 방법을 알고 싶다면 이 페이지의 마지막 예를 살펴보시오.
<script> 요소는 display: none; 를 기본값으로 사용한다.
기본 display값 재정의
앞서 언급했듯이 모든 요소에는 기본 display 값이 있다. 그러나 이를 재정의할 수 있다.
inline 요소를 block 요소로 변경하거나 그 반대로 변경하면 페이지를 특정 방식으로 표시하고 웹 표준을 따르는 데 유용할 수 있다.
일반적인 예는 수평 메뉴에 대한 인라인 <li> 요소를 만드는 것이다:
| <!DOCTYPE html> <html> <head> <style> li { display: inline; } </style> </head> <body> <p>링크 목록을 수평 메뉴로 표시:</p> <ul> <li><a href="/html/default.asp" target="_blank">HTML</a></li> <li><a href="/css/default.asp" target="_blank">CSS</a></li> <li><a href="/js/default.asp" target="_blank">JavaScript</a></li> </ul> </body> </html> |
li요소에 display: inline 으로 재정의를 함으로써 html, css, javascript가 inline 요소로서 화면에 표시되어 같은 줄 바로 옆에 표시되며 아래 그림과 같다.
참고: 요소의 표시 속성을 설정하면 요소가 표시되는 방식만 변경되고 요소의 종류는 변경되지 않는다. 따라서 화면표시가 있는 인라인 요소(block;)에는 다른 블록 요소를 포함할 수 없다.
다음 예제에서는 <span> 요소를 블록 요소로 표시한다:
| <!DOCTYPE html> <html> <head> <style> span { display: block; } </style> </head> <body> <h1>범위 요소를 블록 요소로 표시</h1> <span>display 속성은</span> <span> "block" 값을 가진</span> <span>각 span 요소 사이에 줄바뀜으로 맨 왼쪽부터 출력이 된다.</span> </body> </html> |
span 요소에 display속성에 block 값을 설정함으로 새로운 라인에 span요소들이 표시되며 아래 그림과 같다.
다음 예제에서는 <a> 요소를 블록 요소로 표시한다:
| <!DOCTYPE html> <html> <head> <style> a { display: block; } </style> </head> <body> <h1>링크를 블록 요소로 표시</h1> <a href="/html/default.asp" target="_blank">HTML</a> <a href="/css/default.asp" target="_blank">CSS</a> <a href="/js/default.asp" target="_blank">JavaScript</a> </body> </html> |
a 요소에 display: block으로 설정하여 HTML, CSS, javaScript 텍스트가 새로운 줄에서 표시되며 아래 그림과 같다.
요소 숨기기 : display: none or visibility:hidden?
요소를 숨기려면 display 속성을 none 으로 설정한다. 요소가 숨겨지고 페이지는 요소가 없는 것처럼 표시된다:
| <!DOCTYPE html> <html> <head> <style> h1.hidden { display: none; } </style> </head> <body> <h1>이것은 볼 수 있는 제목입니다.</h1> <h1 class="hidden">이것은 숨겨진 제목입니다.</h1> <p>디스플레이가 있는 h1 요소: 없음, 공간을 차지하지 않음.</p> </body> </html> |
h1.hidden 클래스에 display값을 none으로 설정하며 h1 중 hiddlen 클래스로 정의한 제목은 표시되지 않으며 결과 화면은 아래 그림과 같다.
visibility:hidden. 요소도 숨긴다.
그러나 요소는 여전히 이전과 동일한 공간을 차지한다. 요소는 숨겨지지만 레이아웃에 영향을 미친다:
| <!DOCTYPE html> <html> <head> <style> h1.hidden { visibility: hidden; } </style> </head> <body> <h1>이것은 볼 수 있는 제목입니다.</h1> <h1 class="hidden">이것은 숨겨진 제목입니다.</h1> <p>숨겨진 제목이 여전히 공간을 차지합니다.</p> </body> </html> |
h1.hidden 클래스에 visibility 속성에 hidden 값을 설정하며 h1 중 hiddlen 클래스로 정의한 제목은 표시되지 않고 자리를 차지한 결과 화면은 아래 그림과 같다.
CSS display/visibility 속성
| 속성 | 설명 |
| display | 요소를 표시할 방법을 지정합니다 |
| visibility | 요소를 표시할지 여부를 지정합니다 |
지금까지 CSS display와 visibility 속성의 개념과 차이 그리고 예제를 통해 개념을 실습해보았다.
반드시 손으로 눈으로 머리로 익히며 실습하기를 바랍니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS position 속성 (0) | 2023.08.20 |
|---|---|
| CSS width, max-width 속성 (0) | 2023.08.19 |
| CSS table style (0) | 2023.08.17 |
| CSS 적응형 테이블(Responsive Table) (0) | 2023.08.16 |
| CSS table alignment (0) | 2023.08.16 |
댓글