스타일 시트 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 값을 적용했기 때문입니다. 

스타일 시트 CSS 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기

 

다음은 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 태그 요소를 보이게 하거나 숨기는 visibility 속성 알아보기

Posted by 녹두장군