Style display 속성

정의 및 사용법

display 속성을 설정하거나 요소의 표시 유형을 반환합니다.

HTML의 요소는 대부분 '행내' 또는 '블록' 요소입니다: 행내 요소의 좌우에 흐름 내용이 있습니다. 블록 요소는 전체 행을 차지하며, 좌우에 어떤 내용도 표시할 수 없습니다.

display 속성도 작성자가 요소를 보이거나 숨기는 데 사용됩니다. 이는 visibility 속성과 유사하지만, 설정된 경우 display:none는 전체 요소를 숨기고, visibility:hidden 이는 요소의 내용이 보이지 않지만 원래 위치와 크기를 유지한다는 의미입니다.

ヒント:요소가 블록 요소인 경우, float 속성을 통해 표시 유형을 변경할 수도 있습니다.

또한 참조:

CSS 강의:CSS Display 및 visibility

CSS 참조 매뉴얼:display 속성

예제

예제 1

보이지 않는 <div> 요소를 설정:

document.getElementById("myDIV").style.display = "none";

직접 시도해보세요

예제 2

display 속성과 visibility 속성의 차이:

function demoDisplay() {
  document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
  document.getElementById("myP2").style.visibility = "hidden";
}

직접 시도해보세요

예제 3

요소를 숨기기와 보이게 하기 사이에서 전환:

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

직접 시도해보세요

예제 4

"inline"、"block" 및 "none"의 차이:
function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var sel = x.options[whichSelected].text;
  var elem = document.getElementById("mySpan");
  elem.style.display = sel;
}

직접 시도해보세요

예제 5

요소 <p>의 표시 유형을 반환합니다：

alert(document.getElementById("myP").style.display);

직접 시도해보세요

문법

display 속성 반환:

object.style.display

display 속성 설정:

object.style.display = value

속성 값

값 설명
block 요소가 블록 요소로 렌더링됩니다.
compact 요소가 블록 요소나 인라인 요소로 표시됩니다. 문맥에 따릅니다.
flex 요소가 블록 수평 스크린 플렉스로 표시됩니다. CSS3의 새로운 기능.
inline 요소가 인라인 요소로 표시됩니다. 기본 값.
inline-block 요소가 인라인 블록으로 표시됩니다.
inline-flex 요소가 인라인 수평 스크린 플렉스로 표시됩니다. CSS3의 새로운 기능.
inline-table 요소가 인라인 테이블로 표시됩니다. (예: <table>), 테이블 앞뒤에 개행 문자가 없습니다.
list-item 요소가 목록으로 표시됩니다.
marker

이 값은 블록 전후의 내용을 표시합니다.

:before와 :after 패시오 요소와 함께 사용됩니다. 그렇지 않으면 이 값은 "inline"과 동일합니다.
none 요소가 표시되지 않습니다.
run-in 요소가 블록 요소나 인라인 요소로 표시됩니다. 문맥에 따릅니다.
table 요소가 블록 테이블로 표시됩니다. (예: <table>), 테이블 앞뒤에 개행 문자가 있습니다.
table-caption 요소가 테이블 타이틀로 표시됩니다. (예: <caption>).
table-cell 요소가 테이블 셀로 표시됩니다. (예: <td> 및 <th>).
table-column 요소가 셀 열로 표시됩니다. (예: <col>).
table-column-group 요소가 한 열이나 여러 열의 그룹으로 표시됩니다. (예: <colgroup>).
table-footer-group 요소가 테이블 页脚 행으로 표시됩니다. (예: <tfoot>).
table-header-group 요소가 테이블 타이틀 행으로 표시됩니다. (예: <thead>).
table-row 요소가 테이블 행으로 표시됩니다. (예: <tr>).
table-row-group 요소가 한 줄이나 여러 줄의 그룹으로 표시됩니다. (예: <tbody>).
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 继承합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： inline
반환 값： 문자열로, 요소의 표시 유형을 나타냅니다。
CSS 버전： CSS1

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원