CSS의 visibility 속성은 문서 내에서 해당 요소를 화면에 표시할지 여부를 지정하는 데 사용됩니다. 흥미로운 점은 visibility가 hidden으로 설정되더라도 요소 자체는 여전히 렌더링된다는 것입니다. 다만 화면에는 보이지 않을 뿐이며, 원래 차지하던 공간도 그대로 유지됩니다.
CSS visibility 속성값 정리
요소의 가시성을 제어하기 위해 사용되는 visibility 속성값은 다음과 같습니다.
| 번호 | 속성값 및 설명 |
|---|---|
| 1 | visible 기본값입니다. 요소와 그 자식 요소들이 모두 화면에 표시됩니다. |
| 2 | hidden 요소와 자식 요소들을 숨깁니다. 단, 요소는 여전히 렌더링되며 페이지에서 해당 공간을 그대로 차지한다는 점이 display: none과의 큰 차이입니다. |
| 3 | collapse 테이블 행( <tr>), 행 그룹(<tbody>), 열(<col>), 열 그룹(<colgroup>)에만 사용할 수 있습니다. 해당 행이나 열을 제거하며, 그 공간은 다른 콘텐츠가 사용할 수 있게 됩니다.다른 요소에 적용하면 hidden처럼 동작합니다. |
| 4 | initial 요소의 가시성을 기본값으로 설정합니다. |
| 5 | inherit 부모 요소로부터 visibility 속성값을 상속받습니다. |
예제 1: visibility: collapse 활용하기
테이블의 특정 행을 숨기고 남은 공간을 다른 행이 사용하도록 만드는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility collapse</title>
<style>
form ,table{
width:70%;
margin: 0 auto;
text-align: center;
}
table, th, td {
border-collapse: collapse;
border: 1px solid black;
}
thead {
background-color: goldenrod;
}
tbody{
background-color: khaki;
}
tr:nth-of-type(3){
visibility: collapse;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-collapse</legend>
<table>
<thead>
<tr><th>Name</th><th>Course</th></tr>
</thead>
<tbody>
<tr><td>Joana</td><td>MBA</td></tr>
<tr><td>Smith</td><td>B.Arc</td></tr>
<tr><td>Xersus</td><td>M.Sc</td></tr>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
collapse 미적용 시 — 세 번째 행(Xersus)이 그대로 표시됩니다.
collapse 적용 시 — 세 번째 행이 사라지고 해당 공간이 다른 콘텐츠에 할당됩니다.
예제 2: visibility: hidden 활용하기
버튼 클릭 시 특정 요소들을 숨기되, 레이아웃은 그대로 유지되는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-hidden</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function visibilityHidden(){
for(var i=0; i<3; i++)
primaryColor[i].style.visibility = 'hidden';
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Hide Primary Colors' 버튼 클릭 전 — 모든 색상 박스가 표시됩니다.
'Hide Primary Colors' 버튼 클릭 후 — primary 클래스를 가진 박스들이 사라지지만, 각 박스가 차지하던 공간은 빈 채로 유지되어 레이아웃이 흐트러지지 않습니다.
마무리
CSS visibility 속성은 요소를 숨기면서도 레이아웃을 유지해야 하는 경우에 매우 유용합니다. 특히 hidden은 공간을 보존하고, collapse는 테이블 구조에서 행과 열을 깔끔하게 제거할 수 있다는 점을 기억해 두면 실무에서 큰 도움이 됩니다.