웹 개발에 있어 CSS는 필수적인 요소이며, 수많은 속성을 가지고 있어 모든 것을 완벽히 익히기란 쉽지 않습니다. 그중에서도 CSS 가시성은 웹 개발 전문가를 꿈꾼다면 반드시 숙달해야 할 중요한 속성 중 하나입니다.
본 글에서는 CSS 가시성의 개념과 중요성을 명확히 하고, 다양한 가시성 값들을 예시와 함께 상세히 설명하고자 합니다.
CSS 가시성이란 무엇인가?
CSS 가시성 속성은 웹 페이지 내 요소의 노출 여부를 결정하는 데 사용됩니다. 예를 들어, 웹 페이지에 네 개의 상자가 있을 때, 가시성 속성을 통해 각 상자의 표시 방식을 설정할 수 있습니다. `visibility: visible`로 설정하면 모든 상자가 페이지에 정상적으로 나타납니다.
반면, 요소가 숨겨진 상태로 설정되어도 해당 요소가 차지하는 공간은 유지됩니다. 단지 브라우저 화면에만 보이지 않을 뿐입니다.
CSS 가시성은 아래와 같은 이유로 중요하게 활용됩니다.
- 표시 제어: 현재 사용자 상태에 따라 표시할 내용을 제어할 수 있습니다. 예를 들어, 특정 사용자 액션(마우스 오버, 버튼 클릭 등)이 발생했을 때만 요소가 나타나도록 가시성을 설정할 수 있습니다.
- 레이아웃 유지: 좋은 웹 애플리케이션은 화면 크기에 상관없이 일관된 레이아웃과 내용을 유지해야 합니다. `visibility: hidden` 속성을 사용하면 요소는 숨겨지지만 공간은 그대로 유지되므로 일관성 있는 레이아웃을 만들 수 있습니다.
- 성능 최적화: `visibility: hidden` 속성이 적용된 요소는 브라우저가 레이아웃을 다시 계산할 필요가 없습니다. 반면 `display: none` 속성은 요소를 다시 표시할 때마다 브라우저가 레이아웃을 다시 계산해야 하므로, 가시성 속성은 성능 향상에 유리할 수 있습니다.
- 동적 UI 구현: CSS 가시성 속성을 불투명도와 같은 다른 속성과 조합하면 페이드 효과, 애니메이션, 부드러운 전환 효과 등을 구현하여 더욱 풍부하고 인터랙티브한 UI를 만들 수 있습니다.
다양한 CSS 가시성 값
CSS 가시성 속성에는 총 다섯 가지 값이 존재합니다. 각 값을 코드 예시 및 스크린샷과 함께 자세히 살펴보겠습니다. 따라 해보고 싶으시다면 아래와 같이 진행해 주세요.
- 로컬 컴퓨터에 폴더를 생성합니다.
- `index.html`과 `styles.css` 두 개의 파일을 만듭니다.
- 코드 편집기(VS Code 등)로 프로젝트 폴더를 엽니다.
터미널에서 다음 명령어를 사용할 수도 있습니다.
mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css
`index.html` 파일의 `
<link rel="stylesheet" href="styles.css">
이제 코드 편집기에서 다음과 비슷한 구조를 확인할 수 있습니다.
visible
`visibility: visible` 값은 요소를 웹 페이지에 보이게 합니다. 이는 기본 설정으로, 특별한 설정을 하지 않으면 모든 요소는 `visible` 상태로 표시됩니다. 예시를 통해 개념을 더 명확히 이해해 봅시다. HTML 문서에 세 개의 상자를 만들고, `index.html` 파일의 “ 태그 안에 다음 코드를 추가합니다.
<div class="container"> <div class="box1"> Box 1 </div> <div class="box2"> Box 2 </div> <div class="box3"> Box 3 </div> </div>
이제 다음 CSS 코드를 `styles.css` 파일에 추가하여 `div` 요소(상자)의 스타일을 설정합니다.
.container {
padding: 15px;
width: max-content;
display: flex;
border: 1px solid black;
}
.box1,
.box2,
.box3 {
height: 30px;
width: 100px;
}
.box1 {
background-color: rgb(224, 49, 209);
margin-right: 15px;
}
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
}
.box3 {
background-color: rgb(154, 43, 12);
}
웹 페이지를 실행하면 다음과 같이 세 개의 상자가 나타납니다.
상자의 가시성을 `visibility: visible`로 설정하면 모든 상자가 기본적으로 표시되므로 결과에는 아무런 변화가 없습니다. 하지만 `display: none` 속성을 사용하여 visible 속성의 동작을 명확히 확인할 수 있습니다. 예를 들어, box3의 CSS 코드를 다음과 같이 변경합니다.
.box3 {
background-color: rgb(154, 43, 12);
display: none;
}
페이지를 다시 렌더링하면 상자 1과 상자 2만 표시됩니다.
주의 깊게 살펴보면 `.container` 요소의 크기가 줄어든 것을 알 수 있습니다. `display: none` 속성을 사용하면 상자 3이 완전히 제거되어 브라우저에서 공간을 차지하지 않으므로, 다른 상자들이 해당 공간을 채울 수 있게 됩니다.
hidden
`visibility: hidden` CSS 속성을 요소에 적용하면 최종 사용자에게 해당 요소가 숨겨집니다. 하지만 요소가 차지하는 공간은 그대로 유지됩니다. 예를 들어, 이 속성을 사용하여 상자 2를 숨길 수 있습니다.
이를 위해, box2의 CSS 코드를 다음과 같이 수정합니다.
.box2 {
background-color: rgb(95, 234, 77);
margin-right: 15px;
visibility: hidden;
}
추가된 코드는 단 한 줄입니다.
visibility: hidden
페이지를 다시 렌더링하면 다음과 같이 표시됩니다.
상자 2 요소만 숨겨졌기 때문에, 상자 1과 상자 3 사이에 공백이 있는 것을 확인할 수 있습니다.
웹 페이지를 검사해 보면 상자 2가 여전히 DOM에 존재한다는 것을 알 수 있습니다.
collapse
`collapse`는 하위 요소에 주로 사용되는 가시성 값입니다. 특히 HTML 테이블에서 `visibility: collapse` 속성을 적용하는 것이 대표적인 예시입니다.
다음 코드를 `index.html` 파일에 추가하여 테이블을 생성해 보겠습니다.
<table>
<tr>
<th>Programming Language</th>
<th>Framework</th>
</tr>
<tr>
<td>JavaScript </td>
<td>Angular </td>
</tr>
<tr class="hidden-row">
<td>Ruby </td>
<td>Ruby on Rails</td>
</tr>
<tr>
<td>Python </td>
<td>Django </td>
</tr>
</table>
이제 모든 테이블 셀에 1px 테두리를 적용하는 스타일을 추가합니다. 다음 코드를 `styles.css` 파일에 추가합니다.
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
테이블을 표시하면 아래와 같이 나타납니다.
두 번째 행을 숨겨 `visible: collapse` 속성이 어떻게 작동하는지 확인해 보겠습니다. 다음 코드를 CSS 파일에 추가합니다.
.hidden-row {
visibility: collapse;
}
웹 페이지를 렌더링하면 Ruby 및 Ruby on Rails가 포함된 행이 숨겨집니다.
initial
`visibility: initial` 속성은 HTML 요소를 초기값으로 재설정합니다. 예시를 들어보자면 다음과 같습니다.
- 테이블의 모든 행이 초기에는 표시된 상태로 시작합니다.
- 두 번째 행의 값을 `collapse`로 변경하여 숨깁니다.
- 이제 `initial` 값을 사용하여 다시 원래 상태(표시)로 되돌릴 수 있습니다.
이를 보여주기 위해, 표시와 숨김 값을 전환하는 버튼을 추가해 보겠습니다.
다음 클릭 가능한 버튼을 HTML 코드에 추가합니다.
<button onclick="toggleVisibility()">Click Me!!</button>
버튼을 클릭하면 `.hidden-row` 클래스를 찾고, `.visible-row` 클래스를 토글하는 JavaScript 함수를 추가합니다.
<script>
function toggleVisibility() {
const hiddenRow = document.querySelector('.hidden-row');
hiddenRow.classList.toggle('visible-row');
}
</script>
다음 CSS 코드를 CSS 파일에 추가합니다.
.visible-row {
visibility: initial;
}
버튼을 클릭하면 가시성 값이 계속해서 전환되는 것을 확인할 수 있습니다.
inherit
`visibility: inherit` 속성은 자식 요소가 부모 요소의 가시성 속성을 상속받도록 합니다.
이 속성이 어떻게 작동하는지 간단한 코드를 통해 확인해 보겠습니다.
<h1>Inherit Demo</h1> <div style="visibility: hidden"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p>
웹 페이지를 렌더링하면 `h1`과 `p` 태그 안의 내용만 표시됩니다. 하지만 `h1` 태그와 `p` 태그 사이에는 숨겨진 요소를 나타내는 공백이 존재합니다.
가시성이 `hidden`으로 설정된 `div` 요소가 있습니다. 그리고 그 `div` 요소 안에 `h2` 태그가 있습니다. `h2` 태그의 가시성은 `inherit`로 설정되어 있습니다. 즉, 부모 요소인 `div`로부터 가시성 속성을 상속받는다는 의미입니다.
만약 `div` 요소의 속성을 `visible`로 설정하면 `h2` (자식)도 해당 속성을 상속받습니다.
<h1>Inherit Demo</h1> <div style="visibility: visible"> <h2 style="visibility: inherit"> Hidden</h2> </div> <p>Visible (not inside a hidden element) </p>
CSS 가시성: hidden vs. display: none
`display: none`과 `visibility: hidden`의 가장 큰 차이점은, `display: none`은 레이아웃에서 요소를 완전히 제거하는 반면, `visibility: hidden`은 요소를 숨기지만 공간은 여전히 차지한다는 점입니다.
다음 코드를 사용하여 두 속성의 차이점을 명확히 살펴보겠습니다.
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgray;
margin-right: 20px;
}
.box1 {
background-color: lightblue;
}
.box2 {
background-color: black;
}
.container {
padding: 10px;
border :2px solid black;
padding-left: 20px;
width: 250px;
}
</style>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
웹 페이지를 렌더링하면 두 개의 상자가 나란히 표시됩니다.
display: none 예시
`.box1` 클래스에 다음 코드를 추가합니다.
display: none;
웹 페이지를 렌더링하면 `.box1`은 더 이상 화면에 나타나지 않습니다. 두 번째 상자(검은색)는 이전 파란색 상자가 차지했던 공간으로 이동합니다.
visibility: hidden 예시
`display: none` 대신 `.box1` 클래스에 다음 코드를 추가합니다.
visibility: hidden
이 속성은 `box1`에 약간의 공간을 남겨두지만 해당 요소는 표시하지 않습니다. 반면에 `box2`는 원래 위치를 유지합니다.
| display:none | visibility:hidden | |
| 요소의 동작 | 웹 페이지에서 요소를 완전히 제거합니다. | HTML 요소를 숨기지만 여전히 웹 페이지에서 공간을 차지합니다. |
| 스타일 지정 | `display: none`으로 설정된 요소에는 스타일을 지정할 수 없습니다. | `visibility: hidden`으로 설정된 요소의 위치를 지정하고 스타일을 지정할 수 있습니다. |
| 접근성 | 스크린 리더에서 액세스할 수 없습니다. | 접근성: 스크린 리더를 사용하여 `visibility: hidden`으로 설정된 요소에 접근할 수 있습니다. |
CSS 가시성으로 접근성 향상
CSS 가시성을 사용하여 모든 사용자에게 중요하지 않은 요소를 숨길 수 있습니다. 예를 들어, 이 기능을 사용하여 로그인하지 않은 사용자만 이용 가능한 로그인 사용자를 숨길 수 있습니다. 또한 서비스 약관이나 저작권 정보가 포함된 사이드바 또는 바닥글을 가질 수도 있습니다.
가시성 속성을 사용하여 접근성을 향상시키는 방법을 설명하기 위해 다음 코드를 사용해 보겠습니다.
<title>Homepage</title>
<style>
.login-form {
display: none;
}
.login-text:hover + .login-form {
display: block;
}
.login-form label {
display: block;
margin-bottom: 5px;
}
.login-form input {
width: 30%;
margin-bottom: 10px;
}
</style>
<p class="login-text">Login</p>
<form class="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
<label for="password">Password:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Submit</button>
</form>
로그인 양식은 첫 번째 텍스트 위로 마우스를 올릴 때만 표시됩니다.
결론
이 글을 통해 CSS 가시성 속성을 능숙하게 활용하여 웹 페이지의 접근성을 향상시키고 부드러운 전환 효과를 구현할 수 있게 되셨을 겁니다. 하지만 어떤 가시성 값을 어디에 사용해야 하는지 정확히 알아야 웹 페이지가 어색해지는 것을 방지할 수 있습니다. CSS 가시성 속성을 잘못 사용하면 최종 사용자에게 중요한 데이터가 숨겨질 수도 있다는 점에 유의해야 합니다.
CSS 가시성과 함께 사용할 수 있는 다양한 CSS 속성에 대해 더 자세히 알아보고 싶으시다면, 다양한 CSS 가이드 및 리소스를 참고해 보시기를 권장합니다.