display 속성 (inline, block, none 차이), visibility 속성(visible, hidden, collapse 차이)
오늘 알아 볼 속성은, 어떤 요소를 화면에 보이거나 숨길 때 사용하는 display와 visibilty 속성입니다.
*display와 visibilty 차이*
둘의 차이는 영어의 뜻을 보면 좀 더 쉬울 것 같아요
display: 표시, 나타냄
visibilty : 볼 수 있음
즉 display 속성은 요소를 어떻게 표시할지를 선택하고
visibility 속성은 요소를 보일지 말지 결정하는 속성입니다.
밑에서 더 자세히 다뤄볼게요
*들어가기 전에 알아둘 점*
|
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;만 넣어보겠습니다.
div{
width:100px;
height: 100px;
display: inline-block;
}
실행 화면입니다. 박스 모양이 마치 float 속성을 적용한 것처럼 옆으로 늘어서 있습니다.
|
visibility 속성 사용법 |
visibility 속성은, 어떤 요소를 보이게 할지 숨길지를 결정합니다.
상속 여부 : 상속 됨
|
visibility: visible 기본값으로 요소가 그대로 보입니다. 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 차이)
position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)
'css' 카테고리의 다른 글
| [html/css] 이미지를 넣는 img 태그(css로 이미지 중앙 정렬 방법) (7) | 2014.04.09 |
|---|---|
| [html/css] a: link, a: visited, a: active, a: hover 사용법 자세히 알기 (1) | 2014.04.08 |
| [html/css] overflow 속성 (overflow: visible, hidden, scroll, auto 차이) (4) | 2014.04.04 |
| [html/css] z-index 속성으로 배치 순서 결정하기 (5) | 2014.04.03 |
| [html/css] position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) (11) | 2014.04.01 |
댓글