display 속성은 레이아웃을 제어하기위한 가장 중요한 CSS 속성입니다.
디스플레이 속성
display 속성은 요소가 표시되는 경우 / 방법을 지정합니다.
모든 HTML 요소는이 소자의 종류에 따라 기본 표시 값을 갖는다. 대부분의 요소에 대한 기본 표시 값은 block 또는 inline .
패널을 표시하려면 클릭
이 패널은 포함 <div> 기본 (으로 숨겨져 요소 display: none ).
그것은 CSS로 스타일을하고, 우리는 (그것을 보여 (로 변경 자바 스크립트를 사용하여 display: block ).
블록 레벨 요소
블록 레벨 요소는 항상 새 줄에 시작하고 (오른쪽까지가 할 수있는 왼쪽으로 뻗어과) 사용할 수있는 전체 폭을 차지합니다.
블록 레벨 요소의 예 :
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
인라인 요소
인라인 요소는 새로운 라인에서 시작 만 필요한만큼의 폭을 차지하지 않습니다.
이것은 인라인입니다 <span> 단락 내부 요소입니다.
인라인 요소의 예 :
- <span>
- <a>
- <img>
디스플레이 : 없음;
display: none; 일반적으로 숨기거나 삭제하고이를 다시없는 요소를 표시하는 자바 스크립트와 함께 사용됩니다. 이 달성 할 수있는 방법을 알고 싶다면이 페이지에 우리의 마지막 예를 살펴 보자.
<script> 요소를 사용하여 display: none; 기본으로.
기본 표시 값을 재정의
언급 한 바와 같이, 각 요소는 기본 표시 값을 갖는다. 그러나이를 대체 할 수 있습니다.
블록 요소, 또는 그 반대로 인라인 요소를 변경 페이지가 특정 방법을 보면, 여전히 웹 표준을 준수하고 유용 할 수 있습니다.
일반적인 예는 인라인을하고있다 <li> 수평 메뉴 요소 :
 | 참고 : 요소의 표시 속성을 설정하는 유일한 요소가 표시되는 방법을 변경하지 요소의 종류가있다.그래서,와 인라인 요소 display: block; 그 안에 다른 블록 요소를 가질 수 없습니다. |
|---|
다음 예제 디스플레이는 <SPAN> 블록 요소 등의 요소를 :
Element의 숨기기 - display:none 또는 visibility:hidden ?
요소를 숨기기하는 것은, 설정하여 수행 할 수 있습니다 display 에 속성을 none . 요소가 숨겨져있을 것이며, 페이지 요소가 존재하지 않는 경우 표시 될 것이다 :
visibility:hidden; 또한 요소를 숨 깁니다.
그러나, 요소는 여전히 이전과 동일한 공간을 차지합니다. 요소가 숨겨져 있지만 여전히 레이아웃에 영향을주는 것 :
더 예
display: none; 대 visibility: hidden;
이 예는 보여줍니다없는 display: none; 대 visibility: hidden;
콘텐츠를 표시하는 자바 스크립트와 함께 CSS를 사용하여
이 예는 클릭에 요소를 보여주기 위해 CSS와 자바 스크립트를 사용하는 방법을 보여줍니다.
연습으로 자신을 테스트!
CSS 디스플레이 / 가시성 속성
| 재산 | 기술 |
|---|---|
| display | 요소가 표시되는 방법을 지정합니다 |
| visibility | 요소가 표시할지 여부를 지정합니다 |