모든 HTML 요소는 고유한 기본 display 값을 가지고 있으며, CSS의 display 속성을 통해 언제든지 이를 변경할 수 있습니다. 마찬가지로 모든 요소의 visibility는 기본적으로 visible로 설정되어 있지만, CSS의 visibility 속성으로 자유롭게 제어할 수 있습니다. 이 글에서는 두 속성이 어떻게 다르고, 각각 어떤 값들을 지원하는지 예제와 함께 자세히 살펴보겠습니다.
CSS display 속성의 주요 값
display 속성은 요소가 화면에 어떤 방식으로 배치될지 결정하는 핵심 속성입니다. 아래 표는 display 속성에 사용할 수 있는 값들을 정리한 것입니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | inline 요소를 인라인 요소(예: <span>)처럼 표시합니다. 이 경우 height와 width 속성은 적용되지 않습니다. |
| 2 | block 요소를 블록 요소(예: <div>)처럼 표시하며, 앞뒤로 강제 줄바꿈이 발생합니다. |
| 3 | contents 컨테이너 박스 자체가 사라지고, 자식 요소들이 DOM에서 한 단계 위 요소의 직계 자식처럼 동작합니다. |
| 4 | flex 요소를 블록 레벨 플렉스 컨테이너로 표시합니다. |
| 5 | grid 요소를 블록 레벨 그리드 컨테이너로 표시합니다. |
| 6 | inline-block 요소를 인라인 레벨 블록 컨테이너로 표시합니다. 요소 자체는 인라인처럼 배치되지만 height와 width 값을 적용할 수 있습니다. |
| 7 | inline-flex 요소를 인라인 레벨 플렉스 컨테이너로 표시합니다. |
| 8 | inline-grid 요소를 인라인 레벨 그리드 컨테이너로 표시합니다. |
| 9 | inline-table 요소를 인라인 레벨 테이블로 표시합니다. |
| 10 | list-item 요소가 <li> 요소처럼 동작하도록 합니다. |
| 11 | run-in 문맥에 따라 요소를 블록 또는 인라인으로 표시합니다. |
| 12 | table 요소가 <table> 요소처럼 동작하도록 합니다. |
| 13 | table-caption 요소가 <caption> 요소처럼 동작하도록 합니다. |
| 14 | table-column-group 요소가 <colgroup> 요소처럼 동작하도록 합니다. |
| 15 | table-header-group 요소가 <thead> 요소처럼 동작하도록 합니다. |
| 16 | table-footer-group 요소가 <tfoot> 요소처럼 동작하도록 합니다. |
| 17 | table-row-group 요소가 <tbody> 요소처럼 동작하도록 합니다. |
| 18 | table-cell 요소가 <td> 요소처럼 동작하도록 합니다. |
| 19 | table-column 요소가 <col> 요소처럼 동작하도록 합니다. |
| 20 | table-row 요소가 <tr> 요소처럼 동작하도록 합니다. |
| 21 | none 요소가 페이지에 아예 렌더링되지 않으며, 공간도 차지하지 않습니다. |
| 22 | initial 이 속성을 기본값으로 설정합니다. |
| 23 | inherit 부모 요소로부터 display 속성값을 상속받습니다. |
display: inline-block 활용 예제
다음은 display: inline-block을 활용해 여러 개의 정사각형 박스를 한 줄로 나란히 배치하는 예제입니다. inline-block은 인라인처럼 옆으로 배치되면서도 블록 요소처럼 크기를 지정할 수 있어 레이아웃 작업에 매우 유용합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>CSS Display Inline-Block</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-Display-Inline-Block</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>실행 결과
CSS visibility 속성의 주요 값
visibility 속성은 요소를 화면에 표시할지 여부를 결정합니다. 아래 표는 visibility 속성에 사용할 수 있는 값들입니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | visible 기본값입니다. 요소와 그 자식 요소들이 모두 화면에 표시됩니다. |
| 2 | hidden 요소와 자식 요소들이 화면에서 숨겨지지만, 요소는 여전히 렌더링되며 원래 차지하던 공간은 그대로 유지됩니다. |
| 3 | collapse 테이블 행(<tr>), 행 그룹(<tbody>), 열(<col>), 열 그룹(<colgroup>)에만 적용됩니다. 해당 행이나 열을 제거하고, 그 공간을 다른 콘텐츠가 사용할 수 있게 합니다. 다른 요소에 적용하면 hidden과 동일하게 동작합니다. |
| 4 | initial 요소의 visibility를 기본값으로 설정합니다. |
| 5 | inherit 부모 요소로부터 visibility 속성값을 상속받습니다. |
visibility: collapse 활용 예제
다음은 테이블의 세 번째 행에 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가 적용되기 전의 화면입니다.
collapse가 적용된 후의 화면입니다. 세 번째 행(Xersus)이 사라지고 그 공간이 제거된 것을 확인할 수 있습니다.
display: none과 visibility: hidden, 무엇이 다를까?
두 속성 모두 요소를 화면에서 숨기는 데 사용되지만, 동작 방식에 중요한 차이가 있습니다. display: none은 요소를 문서 흐름에서 완전히 제거하여 공간조차 남기지 않는 반면, visibility: hidden은 요소를 눈에 보이지 않게 할 뿐 원래 차지하던 공간은 그대로 유지합니다. 따라서 레이아웃이 밀리는 것을 방지하고 싶다면 visibility: hidden을, 요소를 완전히 없애고 싶다면 display: none을 사용하는 것이 좋습니다. 또한 display: none이 적용된 요소는 스크린 리더나 키보드 탭 포커스로도 접근할 수 없으므로, 웹 접근성 관점에서도 두 속성의 선택이 중요합니다.