[번역] Difference between visibility: hidden and display: none

author: Airbus A380Ti

 

Though these two might sound the same, visibility: hidden and display: none works differently and can be used for several different cases. Let’s see the difference between them and their use cases here.

이 둘은 같아 보이지만, 'visibility: hidden'과 'display: none'은 다르게 동작하며 여러 다른 경우에 사용될 수 있습니다. 이들의 차이와 use case를 살펴봅시다. 

 

Visibility: hidden

When you use this CSS property on an element, it will be hidden from the screen but takes up the screen’s space. So the contents present before and after the element containing this property will be rendered, but it will leave the exact amount of space for the hidden element to occupy. The HTML element is still present in the DOM but the element won’t show up on the screen and takes up space. As per MDN Documentation:

요소에 이 CSS 속성을 사용한다면 스크린에서는 사라지지만, 스크린의 공간은 차지합니다. 그래서 이 속성을 포함한 요소의 전과 후의 콘텐츠는 렌더링 되지만 숨겨진 요소가 차지하는 공간은 남아있을 것입니다. HTML 요소는 여전히 DOM에 존재하지만 요소는 스크린에 나타나지 않지만 공간은 차지합니다. MDN 문서에 따르면:

 

The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).

요소 박스는 보이지(그려지지) 않지만, 여전히 보통처럼 레이아웃에는 영향을 미칩니다. 요소의 자식 요소들은 visibility가 visible로 설정되어 있다면 보일 것입니다. 요소는 (tab index로 네비게이팅 할 때처럼) focus를 받을 수는 없습니다.

 

Display: none

On the other hand, display: none does a similar job, by hiding the element from the screen. But in this case, it won’t leave any space and the behavior feels like the element having this property doesn’t exist. Note that this property has no effect on the DOM and the element is still present in the DOM. It’s just that the element is hidden inside the DOM. You can’t remove an element from DOM using this CSS property.

반면에, 'display: none'은 스크린에서 요소를 숨김으로써 비슷한 역할을 합니다. 하지만 이 경우, 영역을 남기지 않고 이 속성을 가진 요소는 존재하지 않는 것처럼 동작합니다. 이러한 속성은 DOM에 영향을 미치지 않으며 해당 요소는 여전히 DOM에 존재합니다. 이는 그저 DOM 내에 숨어있습니다. 이 CSS 속성을 사용해 DOM에서 요소를 제거할 수 없습니다.  

 

Use cases

Visibility: hidden

Visibility: hidden can be used in situations where you want to hide an element but show it after performing an action, but keep enough space for it so that you don’t shift your whole layout once the action is performed.

'visibility: hidden'은 요소를 숨기고 action이 수행된 후에만 보여주기 위해 사용할 수 있습니다. 하지만 전체 레이아웃이 이동되지 않도록 충분한 공간을 유지합니다. 

 

Display: none

Display: none can be used in the cases where you’ll have to display certain elements and hide the others based on what the user wants to see. One such example is Tab contents where the user selects a particular tab, and the contents under it are rendered based on the currently selected tab. The selected tab’s content is set to display: block or whatever the use case is, while the other contents are set to display: none. The property gets toggled every time the particular tab is changed.

'Display: none'은 사용자가 보고 싶은 요소와 그렇지 않은 요소를 구분해 표시해야 하는 경우에 사용될 수 있습니다. 예시로는 Tab 콘텐츠가 있습니다. 사용자가 특정 탭을 선택하면 선택된 탭의 내용이 현재 선택된 탭을 기반으로 렌더링 됩니다. 선택된 탭의 콘텐츠는 'display: block' 또는 use case에 맞게 설정되고, 다른  콘텐츠는 'display: none'으로 설정됩니다. 이 속성은 특정 탭이 변경될 때마다 토글 됩니다. 

 

 

reference)

Difference between visibility: hidden and display: none