[번역] 10 Ways to Hide Elements in CSS

 

Hidden Choices

display: none has been the favorite solution to hide elements for many years, but it’s been superseded by more flexible, animatable options. It’s still valid, but perhaps only when you want to permanently hide content from all users. transform or opacity are better choices when considering performance.

'display: none'은 오랫동안 요소를 숨기는 가장 인기 있는 방법이었지만, 더 유연하고 애니메이션 가능한 옵션들로 대체되었습니다. 여전히 유효하지만, 모든 사용자로부터 컨텐츠를 계속 숨길 때에만 여전히 유효합니다. 

For some really cool demos on how to show and hide images with CSS, check out How to Add a CSS Reveal Animation to Your Images.

CSS로 이미지를 보여주고 숨기는 방법에 대한 정말 멋진 데모를 통해 이미지에 CSS Reveal Animation을 추가하는 방법을 확인하세요.

 

FAQs on How to Hide Elements in CSS

How to Hide an Element in CSS?

There are many ways to hide elements in CSS. Which you choose depends on what you’re trying to achieve, but among other considerations are SEO and accessibility. Common methods include using the display property, visibility, opacity, height and width, positioning, and the CSS clip property. We cover each of these methods, and more, in this article, and look at how each affects accessibility and SEO.

CSS에서 요소를 숨기는 여러가지 방법이 있습니다. 어떤 것을 선택하는가는 당신이 달성하려는 목표에 따라 다르지만, SEO와 접근성을 고려해야 합니다. 주로 사용되는 방법은 display, visibility, opacity, height, width, position, CSS clip 속성이 있습니다. 이 기사에서 각각의 방법과 각각이 접근성과 SEO에 어떤 영향을 미치는지 살펴봅니다. 

 

How to Hide Element in CSS Without Display None?

Using display: none may be the easiest way to hide an element with CSS, but it can have serious side effects for accessibility and SEO. There are at least nine other ways to hide elements with CSS that are often far superior to display: none — including filter and opacity, color transparency, transforms, clip-path, visibility, the HTML hidden attribute, positioning, element overlays and reduced dimensions.

'display: none'을 사용하는 것은 CSS로 요소를 숨기는 가장 쉬운 방법이지만, 이는 접근성과 SEO에 심각한 부작용을 일으킬 수 있습니다. 종종 'display: none'보다 훨씬 더 나은, CSS로 요소를 숨기는 최소 9가지 방법이 있습니다 - filter, opacity, color transparency, transforms, clip-path, visibility, HTML hidden 속성, positioning, element overlay, 크기 줄이기.

 

What Is the Opposite of Hiding in CSS?

In CSS, we often want to hide elements, only to later show, reveal or display them. We can control both hiding and showing/revealing elements with CSS, or we can also use JavaScript along with CSS to show/hide elements. The most common way to display an element is by using the display property with a value of block, inline, inline-block, flex, grid, or another appropriate value depending on the desired layout behavior.

CSS에서는 종종 요소를 숨기고 나중에 보여주길 바랍니다.  우리는 CSS로 요소를 숨기거나 드러내는 것을 조절할 수 있고 CSS와 JavaScript를 함께 사용해 요소를 보여주거나 숨길 수 있습니다. 요소를 나타내는 가장 일반적인 방법은 원하는 display 속성을 block, inline, line-block, flex, grid 또는 원하는 레이아웃 동작에 따라 적절한 값으로 설정하는 것입니다. 

 

For example:

/* Show an element as a block-level element */ 
.element { display: block; }

/* Show an element as an inline-level element */ 
.element { display: inline; }

/* Show an element as an inline-block element */ 
.element { display: inline-block; }

You can also use JavaScript to toggle the display property of an element from none (hidden) to its default value (usually block or inline) when you want to dynamically show or hide elements in response to user interactions or other events.

사용자 상호작용이나 다른 이벤트에 반응해 요소를 동적으로 보여주거나 숨기길 원할 때, 요소의 display 속성을 none (hidden)에서 (보통  block이나 inline인) 기본값으로 변경하기 위해 JavaScript를 사용합니다. 

 

How to Hide an Element Based on a Value in CSS?

In CSS, you can hide an element based on its value using a combination of selectors and CSS properties. The exact approach you take will depend on the type of element and the value you want to use as the condition for hiding. Here are a few common scenarios:

CSS에서, selector와 CSS 속성의 조합을 사용해 요소를 값에 따라 숨길 수 있습니다. 정확한 접근 방식은 요소의 유형과 숨김 조건으로 사용하려는 값을 기반으로 합니다. 여기 몇 가지 일반적인 시나리오가 있습니다.

1. Hiding an Element Based on Its Content (Text): 텍스트 컨텐츠 기반으로 요소 숨기기

If you want to hide an element based on its textual content, you can use the :contains selector. However, it’s important to note that :contains is not a standard CSS selector and is not supported by all browsers. You might need to use JavaScript or another method for better compatibility.

텍스트 내용에 따라 요소를 숨기고 싶다면 ':contains' selector를 사용할 수 있습니다. 그러나 중요한 점은 ':contains'는 CSS 표준 selector가 아니며 모든 브라우저에서 지원되지 않을 수 있다는 것입니다. 더 나은 호환성을 위해 JavaScript나 다른 방법을 사용해야 할 수도 있습니다.  

/* This example uses jQuery for :contains */ 
.element:contains("Hide this text") { display: none; }

 

2. Hiding an Element Based on an Attribute Value: 속성값에 따른 요소 숨김

If you want to hide an element based on the value of an attribute, such as data-* attributes, you can use attribute selectors. 

'data-*' 속성처럼 속성값에 따라 요소를 숨기고자 한다면 속성 선택자를 사용할 수 있습니다.  

 

Here’s an example:

<div data-hide="true">This should be hidden</div> 
<div data-hide="false">This should be visible</div>

/* Hide elements with data-hide="true" */ 
[data-hide="true"] { display: none; }

 

3. Hiding an Element Based on a Class or ID: Class나 ID를 사용해 요소 숨기기

You can also use classes or IDs to hide elements based on their value. For instance, if you have a specific class or ID assigned to elements you want to hide, you can use CSS like this:

값에 따라 요소를 숨기려면 해당 요소에 할당된 class나 ID를 사용할수도 있습니다. 예를 들어, 특정 class나 ID가 할달된 숨기고자 하는 요소가 있다면 다음과 같이 CSS를 사용할 수 있습니다. 

<div class="hide-me">This should be hidden</div> 
<div class="show-me">This should be visible</div>

/* Hide elements with the class "hide-me" */ 
.hide-me { display: none; }

4. Hiding an Element Based on a Specific Value with JavaScript: 자바스크립트로 특정 값을 가진 요소 숨기기

If you need to hide an element based on more complex conditions or values that aren’t easily handled with CSS alone, JavaScript is a more suitable choice. You can use JavaScript to add or remove classes, change styles, or manipulate the DOM based on specific criteria.

CSS로만 쉽게 처리되지 않는 훨씬 복잡한 상태나 값에 따라 요소를 숨기고 싶다면, JavaScript는 아주 합리적인 선택입니다. class를 제거, 스타일 변경, 특정 기준에 따라 DOM을 변경하기 위해 JavaScript를 사용할 수 있습니다. 

 

Here’s an example using JavaScript and a hypothetical shouldHide function:

JavaScript와 가상의 shouldHide 함수를 사용하는 예시가 있습니다.

<div id="elementToHide">This should be hidden</div> 
<div id="elementToShow">This should be visible</div>

<script> 
// Replace this condition with your specific logic 
if (shouldHide()) { 
	document.getElementById("elementToHide").style.display = "none"; 
} 
</script>

Remember to replace shouldHide() with your own logic that determines whether the element should be hidden or not.
So CSS can be used to hide elements based on their content, attributes, classes, or IDs to some extent. However, for more complex conditions or dynamic values, JavaScript is often required for better control and flexibility.

shouldHide()를 요소를 숨길지 여부를 결정하는 로직으로 교체해야 함을 기억하세요. 일부 경우에는 CSS를 사용해 컨텐츠, 속성, 클래스, ID에 따라 요소를 숨길 수 있습니다. 그러나 보다 복잡한 조건이나 동적인 값에 대해서는 JavaScript를 사용해 더 좋은 제어와 유연성을 가질 수 있습니다.

 

How Do I Hide Content in HTML: HTML 내의 컨텐츠 숨기기

Hiding content is most commonly done with CSS. There are many ways to do this, and which you choose depends on what you’re trying to achieve, but among other considerations are SEO and accessibility. In this article, we’ve looked at ten different ways to hide content with CSS, and how each method affects accessibility and SEO.

컨텐츠를 숨기는 가장 일반적인 방법은 CSS를 사용하는 것입니다. 이를 위한 여러 방법이 있으며, 어떤 방법을 선택하는지는 달성하려는 목표에 따라 다릅니다. 그러나 고려사항에는 SEO와 접근성이 있습니다. 이 기사에서, 우리는 CSS로 컨텐츠를 숨기는 10가지 방법과 각각의 방법이 접근성과 SEO에 어떤 영향을 미치는지 살펴보았습니다.

 

Does hiding elements with CSS hurt accessibility? : CSS를 이용해 요소를 숨기는 것이 접근성에 해를 끼칠까?

The simple answer is: it depends. Hiding elements with display: none, while convenient, is certainly bad for accessibility. Thankfully, there are ways to hide and show content that can be made accessible — both to keyboard users and even screen readers. In this article, we’ve looked at ten different ways to hide content with CSS, and how each method affects accessibility and SEO.

간단한 답은 경우에 따라 다릅니다. 'display: none'으로 요소를 숨기는 것은 편리할 수 있지만 접근성에는 확실히 좋지 않습니다. 다행히도 키보드 사용자와 스크린 리더 사용자 모두가 접근할 수 있도록 요소를 표시하고 숨기는 방법들이 있습니다. 이 기사에서는 CSS로 컨텐츠를 숨기는 10가지 방법과 각 방법이 접근성과 SEO에 어떤 영향을 미치는지 살펴보았습다. 

 

Does hiding elements with CSS hurt SEO? : CSS로 요소를 숨기는 것이 SEO에 해를 끼칠까?

Hiding elements with CSS definitely can have implications for SEO (Search Engine Optimization), and it’s important to be cautious when using CSS to hide elements on a webpage. Whether it hurts your SEO or not depends on the context and your intent.

CSS로 요소를 숨기는 것은 분명 SEO에 영향을 미칠 수 있고, 이는 웹 페이지에서 CSS를 사용해 요소를 숨길 때 주의해야 합니다. SEO에 영향을 미칠지 여부는 컨텐츠와 당신의 의도에 따라 결정됩니다.

Here are some considerations:

몇몇 고려사항들이 있습니다.

Hidden Content for SEO Manipulation. If you’re hiding content solely for the purpose of manipulating search engine rankings, such as keyword stuffing or hiding links, it’s considered a black hat SEO technique and can result in penalties from search engines if detected. Search engines aim to provide relevant and useful content to users, so they don’t like to see content hidden solely for ranking purposes.

SEO  조작을 위해 숨겨진 컨텐츠: 키워드 채우기나 링크 숨김 처럼 오로지 검색 엔진 순위 조작을 위해 컨텐츠를 숨기는 것은 검은 모자 SEO 기술로 간주되며, 발견되면 검색엔진에서 패널티를 받을 수 있습니다. 검색엔진은 사용자에서 관련성 있고 유용한 컨텐츠를 제공하려하므로 오로지 순위를 목적으로 숨겨진 컨텐츠를 보는 것을 선호하지 않습니다. 

User Experience Matters. Search engines like Google prioritize user experience. If you hide content in a way that harms user experience, such as making it difficult for users to find information or navigate your site, it can indirectly impact your SEO. High bounce rates or low user engagement can signal to search engines that your site may not be providing valuable content.

사용자 경험문제: 구글과 같은 검색엔진은 사용자 경험을 우선으로 합니다. 정보를 찾거나 사이트를 탐색하는데 어려움을 줄 정도로 사용자 경험을 해치는 방식으로 컨텐츠를 숨기면, 이는 간접적으로 SEO에 영향을 미칠 수 있습니다. 높은 이탈률이나 낮은 사용자 참여는 검색엔진에게 당신의 사이트가 가치있는 컨텐츠를 제공하고 있지 않다는 신호가 될 수 있습니다. 

Legitimate Uses of CSS Hiding. There are legitimate reasons to use CSS to hide elements, such as creating mobile-responsive designs or improving accessibility. For example, you might use CSS to hide certain elements on mobile devices to improve the layout and usability. If you’re using CSS to enhance user experience, it’s less likely to negatively impact SEO.

CSS 숨김의 합당한 사용: 모바일 반응형 디자인이나 접근성 향상 처럼 요소를 숨기기 위해 CSS를 사용하는 합당한 이유들이 있습니다. 예를 들어, layout과 사용성을 향상시키기 위해 CSS를 사용해 모바일 기기에서 특정 요소를 숨길 수 있습니다. 사용자 경험 향상을 위해 CSS를 사용한다면 SEO에 부정적인 영향을 미칠 가능성이 적습니다.

Google’s Guidelines. Google provides guidelines on how to handle hidden content. They generally advise against hiding content with CSS for SEO purposes, but they do recognize legitimate uses like improving mobile user experience or providing alternative text for visually impaired users. It’s crucial to follow these guidelines.

구글 가이드라인: 구글은 숨겨진 컨텐츠를 다루는 방법에 대한 가이드라인을 제공합니다. 일반적으로 SEO 목적으로 CSS를 사용해 컨텐츠를 숨기는 것은 권하지 않지만, 모바일 사용자 경험 향상이나 시력이 손상된 사용자들을 위한 대체 텍스트 제공과 같은 합당한 사용은 인정합니다. 이러한 가이드라인을 준수하는 것은 중요합니다.

Javascript-generated Content. Content that’s generated by JavaScript and not visible in the initial HTML source can also have SEO implications. Search engines have become better at indexing JavaScript-generated content, but it’s essential to ensure that critical content is visible to both users and search engine crawlers.

JavaScript로 생성되는 컨텐츠: 초기 HTML에서는 보이지 않고 JavaScript로 생성되는 컨텐츠는 SEO에 영향을 미칠 수 있습니다. 검색 엔진은 JavaScript로 생성된 컨첸츠를 더 잘 색인화 하도록 발전했지만, 중요한 컨텐츠는 사용자와 검색엔진 크롤러 모두에게 보여지는지 확인하는 것은 중요합니다. 

So, to summarize, hiding elements with CSS can certainly hurt SEO if it’s done for manipulative purposes or if it degrades user experience. However, if done for legitimate reasons like improving mobile responsiveness or accessibility, it’s less likely to have a negative impact. Always follow search engine guidelines, create content that benefits users, and focus on providing a positive user experience to maintain good SEO practices.

요약하면, CSS로 요소를 숨기는 것은 조작을 목적으로 하거나 사용자 경험을 저해한다면 분명 SEO에 해를 끼칠 수 있습니다. 하지만, 모바일 반응성이나 접근성을 향상시키는 것과 같이 합당한 이유로 수행된 경우에는 부정적인 영향이 적을 것입니다. 항상 검색엔진 가이드라인을 따르고, 사용자에게 이로운 컨텐츠를 제공하며 긍정적인 사용자 경험을 제공하여 좋은 SEO 관행을 따르는데 중점을 두세요.

 

 

reference) 

10 Ways to Hide Elements in CSS — SitePoint