display 속성(property)는 element가 어떻게 display할지를 지정하는 것이다.
visibility 속성(property)은 element를 visible로 할지 여부를 지정한다.
display 속성(property)을 "none"으로 하거나 visibility 속성(property)를 "hidden"으로 지정하여
해당 element를 감출수 있다. 이들 두 명령은 결과가 다르므로 주의해서 사용해야 한다. visibility:hidden은
element를 감추지만, 기존의 공간은 그대로 유지된다. display:none은 element를 감추지만, 기존의 공간은 그대로
유지되지 않는다.
display
속성(property)는 element가어떻게
display할지를
지정하는 것이다.
visibility
속성(property)은 element를 visible로 할지 여부를 지정한다.
display
속성(property)을 "none"으로 하거나visibility 속성(property)를
"hidden"으로 지정하여 해당 element를 감출수 있다. 이들
두 명령은 결과가 다르므로 주의해서 사용해야 한다. visibility:hidden은
element를 감추지만,기존의
공간은 그대로 유지된다. display:none은
element를 감추지만,기존의
공간은 그대로 유지되지 않는다.
문장
형식
구분
문장구문
설명
설정하는 경우
Object.style.display="value"
Style 객체의 display 속성을 지정한다.
반환하는 경우
Object.style.display
설정된 display 속성(property)값을 반환한다.
display속성(property)
값
설명
block
element가 블록 요소 (문장이나 헤더처럼)로 표시 block element는 위와 아래에 공백을 가지고 있으며 그 옆에있는
HTML element를 용납하지 않는다.
compact
block-level 또는 inline 처럼 엘리먼트를 렌더링함
inline
(default). element는
inline element (span처럼)로 표시됨. inline element는 앞 뒤에 줄 바꿈이 없다, 그리고 그 옆에 HTML 요소를
허용
inline-block
element는 inline element (인접 콘텐츠와 같은 줄에)에 위치하지만, block element로 작동
inline-table
element가 inline table로 디스플레이됨
list-item
element가 list-item로 디스플레이됨. 이는 앞에 bullet이 있음을 의미함
marker
:before, :after와 함께 쓰여 내용물 전 후에 상자를 설정함
none
element가 결코 display되지 않음
run-in
block-level 또는 inline처럼 엘리먼트가 렌더링 함
table
element가 테이블로 디스플레이함
table-caption
element가 table caption로 디스플레이함
table-cell
element가 table cell로 디스플레이함
table-column
element가 table column로 디스플레이함
table-column-group
element가 table column group (예: <colgroup>)로 디스플레이함
function
demoVisibility() { document.getElementById("p2").style.visibility="hidden"; }</dd></script> </head> <body>
<p
id="p1">一仍舊貫 (일잉구관)</p> <p id="p2">옛것을 그대로
따르다.</p> <input type="button" onclick="demoDisplay()" value="Hide
text with display property"> <input type="button"
onclick="demoVisibility()" value="Hide text with visibility
property">
</body> </html>
一仍舊貫 (일잉구관)
옛것을 그대로 따르다.
<input onclick="demoDisplay()"
type="button" value="Hide text with display property" /><input
onclick="demoVisibility()" type="button" value="Hide text with visibility
property" />
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다르다. none : 보이지 않음 block : 블록 박스로 만듬
inline : 인라인 박스로 만듬 inline-block : block 박스로 만들어지나, inline 처럼 배치가
된다.
display 속성 중 block (블록 요소) 는 요소의 가로 길이가 100%가 되어 (width값을 수동으로 지정해도 보이지 않는
margin 같은 값이 화면을 꽉 채운다) 자동으로 줄 바꿈이 되고 width, height 속성을 지정 할 수 있는데, 자동으로
display:block 이 적용되는 대표적인 태그는 div 가 있다.
inline 요소는 block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없다. display:inline 이
적용되는 대표적인 태그는 span 이 있다.
inline-block 요소는 inline 요소와 block 요소의 특징을 합친 것으로 자동으로 줄 바꿈이 되지 않지만 크기를 지정 할 수
있다. inline-block 요소와 요소 사이에는 공백이 생기게 된다. (단, ie7 이하는 지원하지 않는데, *zoom:1;
*display:inline 속성을 이용하면 inline-block 요소 처럼 사용 할 수 있다.)
none: 보이지 않음 block: 블록 박스로 만듬 inline: 인라인 박스로 만듬 inline-block: block 박스로 만들어지나, inline 처럼 배치가 된다.
display속성 중block (블록 요소)는 요소의 가로 길이가 100%가 되어 (width값을 수동으로 지정해도 보이지
않는 margin 같은 값이 화면을 꽉 채운다) 자동으로 줄 바꿈이 되고 width, height 속성을 지정 할 수 있는데, 자동으로display:block이 적용되는 대표적인 태그는div가 있다.
inline요소는block과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수
없다.display:inline이 적용되는 대표적인 태그는span이 있다.
inline-block요소는inline요소와block요소의 특징을 합친 것으로 자동으로 줄 바꿈이 되지 않지만 크기를 지정 할 수
있다.inline-block요소와 요소 사이에는 공백이 생기게 된다. (단, ie7 이하는 지원하지
않는데, *zoom:1; *display:inline 속성을 이용하면 inline-block 요소 처럼 사용 할 수 있다.)