|
스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기 |
|
환경: Chrome |
CSS 에서 visibility 속성은 태그로 표현한 개체를 보이게 하거나 숨기는 기능을 합니다. 총 4가지 속성값을 가지며, 기본 속성은 inherit 입니다. inherit 는 부모 요소의 값을 상속합니다. 이 외에 visible, hidden, collapse 가 있습니다. 각 속성값에 따라 화면에서 어떻게 처리되는지 하나씩 알아 보겠습니다.
▼ visibility 속성은 4가지 종류의 값이 있습니다. 이 중에서 hidden 은 완전히 개체를 없애는 것이 아니라 공간을 남깁니다. visibility:hidden 과 달리 display:none 은 공간까지 사라지게 할 수 있습니다.
¤ visible : 기본 값으로 태그 요소를 보여줍니다.
¤ hidden : 태그 요소를 숨깁니다. 하지만 영역은 유지합니다.
¤ collapse : table 태그에만 적용이 되며 tr , td 를 사라지게 합니다.
¤ inherit : 부모 요소의 상태 값을 상속받습니다.
▼ 소스에서는 3개의 div 에 visibility 속성을 사용하였습니다. visibility1 과 visibility3 는 화면에 보이도록 값을 세팅했고, 중간에 있는 visibility2 는 화면에 보이지 않지만 공간은 남게 했습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>font-weight</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#visibility1 {
width:250px; height:80px;
background-color:red;
visibility: visible;
}
#visibility2 {
width:250px; height:80px;
background-color:red;
visibility: hidden;
}
#visibility3 {
width:250px; height:80px;
background-color:green;
visibility: inherit;
}
</style>
</head>
<body>
<div id="visibility1">CSS visibility visible 적용 시키기 </div>
<div id="visibility2">CSS visibility hidden 적용 시키기 </div>
<div id="visibility3">CSS visibility inherit 적용 시키기 </div>
</body>
</html>
적용한 결과는 다음과 같습니다. 중간에 개체는 보이지 않지만 공간을 차지하고 있습니다. visibility 에 hidden 값을 적용했기 때문입니다.
▼ 다음은 collapse 값에 대한 설명입니다. table 태그요소에 적용되는 visibility 값으로 레이아웃에 따라 hidden 이나 display:none 처럼 완전히 사라지게 할 수 있습니다. 예제에서는 collapse 가 visibility:hidden 고 같이 공간을 남겼습니다. 그에 반해 첫 번째 행에 display:none 으로 td 를 사라지게 했더니 공간이 사라지면서 나머지 두 개의 td 가 왼쪽으로 밀렸습니다. 하지만 두 번째 행에 적용된 visibility:collapse 는 내용이 사라졌지만 공간을 남기면서 형태를 유지합니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #e7e7e7;
}
table, td {
border: 1px solid black;
width: 400px;
height: 50px;
}
td.hidden {
display: none;
}
td.collapse {
visibility: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td class="hidden">data1-1</td>
<td>data1-2</td>
<td>data1-3</td>
</tr>
<tr>
<td>data2-1</td>
<td class="collapse">data2-2</td>
<td>data2-3</td>
</tr>
</table>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
|---|---|
| 스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |
| 스타일 시트 CSS px(pixel) -> em 단위 변환 표 (0) | 2018.04.30 |
| 스타일 시트 CSS 테두리를 지정하는 border 속성 알아보기 (0) | 2018.04.12 |
| 스타일 시트 CSS 글꼴을 적용할 수 있는 font-family 속성 이용하는 방법 (0) | 2018.03.23 |
| 스타일 시트 CSS 텍스트, 글자 크기를 조절하는 font-size 사용하는 방법 (1) | 2018.01.31 |
| 스타일 시트 CSS 글자 색을 지정하는 color 속성 사용하기 (0) | 2018.01.23 |
| 스타일 시트 CSS 태그 하위에 클래스, 아이디를 적용하는 방법 (0) | 2018.01.13 |
