본문 바로가기
css

[html/css] display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이)

by 지구별에 2014. 4. 5.

 

 

display 속성 (inline, block, none 차이), visibility 속성(visible, hidden, collapse 차이)

 

 

오늘 알아 볼 속성은, 어떤 요소를 화면에 보이거나 숨길 때 사용하는 display와 visibilty 속성입니다.

 

 

*display와 visibilty 차이*

 

둘의 차이는 영어의 뜻을 보면 좀 더 쉬울 것 같아요

 

display: 표시, 나타냄

visibilty : 볼 수 있음

 

즉 display 속성은 요소를 어떻게 표시할지를 선택하고

 

visibility 속성은 요소를 보일지 말지 결정하는 속성입니다.

 

밑에서 더 자세히 다뤄볼게요

 

 

*들어가기 전에 알아둘 점*

 

 

[html/css] span, div 태그 차이

 

 

 display 속성 사용법

 

display는  요소의 종류를 선택하는 속성입니다.

 

원래 inline 요소를 block 요소로 보이게 만들 수도 있고,

원래 block 요소를 inline 처럼 보이게 만들 수도 있습니다.

 

상속 여부 : 상속 안 됨.

 

 

 

display: inline  기본값으로, 요소를 inline 요소처럼 표시합니다.

                    따라서 앞뒤로 줄바꿈 되지 않습니다.

 

display: block  요소를 block 요소처럼 표시합니다.

                    따라서 요소 앞 뒤로 줄바꿈 됩니다

 

display: none 박스가 생성되지 않습니다.

                   따라서 공간을 차지하지도 않습니다.

 

display: inline-block 요소는 inline인데 내부는 block 처럼 표시함.

                                  즉, 박스 모양이 inline 처럼 옆으로 늘어섬.

 

 

사용 예:

div{
display:inline;

}

 

그럼 div로 된 3개의 박스를 만들어 보고 display 속성이 아무것도 적용되지 않는

div(block 요소) 가 어떻게 표시되는지부터 보겠습니다.

 

[html 작성]

 

실행 화면입니다. 아래 그림처럼 div 한 개당 가로화면 전체를 차지하고 있고, 줄바꿈되어 있습니다.

 

 

 

1. display: inline

위의 html 문서에서 display: inline을 적용해 보겠습니다.

 

div{
width:100px;
height: 100px;

display: inline;
}

 

 

그림이 아래처럼 바뀌며 문자열이 모두 붙어있습니다.

 

 

 

 

 

2. display: none

display: none  을 적용하면

 

div{
width:100px;
height: 100px;

display: none;
}

 

개나리반 개구리반 채송화반이 차지하고 있던 공간이 사라지며 아래 텍스트만 표시됩니다.

 

 

3. display: block

이번엔 <span>이 적용된 문자열을 block 요소처럼 만들어 보겠습니다

 

[html 작성]displayblock.htm

 

display: block 실행화면입니다

원래 span으로 범위를 지정한 문자열은 줄바꿈되지 않지만 이 속성값을 적용함으로써

모두 줄바꿈 되어 있습니다..

 

 

3. display: inline-block

 

맨 위에 html 문서에 아래 display: inline-block;만 넣어보겠습니다.

 

display inline-block.htm

div{
width:100px;
height: 100px;
display: inline-block;
}

실행 화면입니다. 박스 모양이 마치 float 속성을 적용한 것처럼 옆으로 늘어서 있습니다.

 

 

 

 

 visibility 속성 사용법

 

visibility 속성은, 어떤 요소를 보이게 할지 숨길지를 결정합니다.

 

상속 여부 :  상속 됨

 

visibility: visible  기본값으로 요소가 그대로 보입니다.
visibility: hidden  요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남습니다.

visibility: collapse <table> 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨깁니다.

 

하지만 여전히 투명하게 공간을 차지 합니다.

<table> 이외에서 사용하면 hidden 상태처럼 만듭니다.

(collapse는 IE, Firefox에서만 작동)                           

 

사용 예:

div#b{

visibility: hidden;

}

 

 

 

[html 작성]visibility hidden.htm

 

 

 

아래 왼쪽 그림은 세 div가 모두 나올 때이며

오른쪽 그림은 '개구리반'만 visibility: hidden 적용한 화면입니다.

공간이 그대로 남아 있는 게 보이시죠.. ? 

 

                                

 

 

[display: none 과 visibility: hidden 차이]

 

왼쪽이 display:none 공간이 사라짐

오른쪽이 visibility: hidden 공간이 그대로임

 

 

 

 

[html/css] text-align 속성으로 정렬하기 (left, right, center, justify)

oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)

 

 z-index 속성으로 배치 순서 결정하기

 

 position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)

 

DIV 태그를 이용하여 레이아웃 만들기

 

 

 

 

반응형

댓글