CSS 속성 표시:없음 또는 가시성:을 사용하여 CSS에서 요소를 숨길 수 있습니다. 숨겨짐 . 표시:없음은 페이지에서 전체 요소를 제거하고 페이지 레이아웃에 영향을 줍니다. 공개 여부: 숨겨짐 공백을 동일하게 유지하면서 요소를 숨깁니다.

웹 페이지에서 요소를 숨기고 싶은 시나리오가 발생할 수 있습니다. 예를 들어, 숨겨져 있다가 사용자가 버튼을 클릭할 때 나타나기를 원하는 텍스트 블록이 있을 수 있습니다.

다음을 사용하여 CSS에서 요소를 숨기는 두 가지 주요 접근 방식이 있습니다.

표시:없음 속성
가시성:숨겨진 속성

첫 번째 접근 방식은 웹 페이지 레이아웃에 영향을 미칠 수 있습니다. 하지만 그럼에도 불구하고 두 번째 방법이 인기가 있습니다.

CSS 요소 숨기기:표시

표시 속성은 요소가 웹 페이지에 표시되는 방식을 제어합니다. HTML 문서의 모든 요소에는 표시 속성에 대한 기본값이 있지만 해당 값은 요소에 따라 다릅니다. 대부분의 요소에서 기본 표시 값은 block입니다. 또는 인라인 .

요소가 요소에 전혀 표시되지 않도록 하려면 display 값을 설정하면 됩니다. 속성을 없음으로 설정합니다.

다음 스타일 규칙은 웹페이지의 요소를 숨깁니다:

display 값을 설정할 때 없음으로 설정하면 영향을 받은 요소가 사라집니다. 이는 해당 요소가 더 이상 웹페이지의 공간을 차지하지 않음을 의미합니다.

표시:없음 예

회사 소개를 디자인한다고 가정해 보겠습니다. 지역 요리 클럽 웹페이지. 초기 디자인에서는 페이지에 케이크 이미지를 추가했습니다. 이제 클럽에서는 최종 디자인이 확실하지 않기 때문에 이미지를 숨기길 원합니다.

다음 코드를 사용하여 페이지에서 이미지를 숨길 수 있습니다:

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p>
</div>
<style>
img {
 display: none;
}
<style>

다음을 클릭하세요. CSS에서 요소를 숨기는 방법:종합적인 단계별 튜토리얼 위 코드 편집기의 버튼을 누르면 HTML/CSS 코드의 출력을 볼 수 있습니다.

우리는 HTML

태그 내에 세 가지 요소를 정의했습니다.

요소는 헤더를 생성하는 데 사용되며 회사 소개라는 텍스트를 포함합니다. . HTML 요소는 높이 200px, 너비 200px의 케이크 이미지를 생성합니다.
요소에는 클럽에 대한 간단한 설명이 포함되어 있습니다.

CSS 코드에서는 "img" 선택기를 사용하여 페이지의 모든 이미지 태그를 선택합니다. 이 규칙은 모든 태그의 표시 속성을 없음으로 설정합니다. . 즉, 스타일 규칙이 이미지를 숨깁니다.

이미지는 숨겨져 있지만 웹페이지에는 여전히 존재합니다. 이미지를 다시 가져오려면 display:none;을 삭제하면 됩니다. 스타일. 또는 다른 표시 스타일(예:block)을 지정할 수 있습니다. 또는 인라인 ).

이 규칙을 인라인 HTML 속성으로 정의할 수 있습니다:

인라인 HTML 및 CSS 속성에 대해 자세히 알아보려면 인라인 CSS 가이드를 확인하세요.

CSS 요소 숨기기:가시성

CSS 가시성 속성은 요소가 웹페이지에 표시되는지 여부를 제어하는 데 사용됩니다.

기본적으로 visibility의 값은 속성이 표시됩니다. . 하지만 이미지를 보이지 않게 만들고 싶다면 visibility 값을 설정하면 됩니다. 숨기기 .

다음 스타일 규칙은 요소의 가시성을 숨김으로 설정합니다.

아까의 요리 동아리 사례로 돌아가 보겠습니다. 회사 소개에서 케이크 이미지를 숨기고 싶다고 가정해 보겠습니다. 웹페이지. 다음 코드를 사용하여 그렇게 할 수 있습니다:

<html>
<div>
<h1>About Us</h1>
<img src="https://images.unsplash.com/photo-1518047601542-79f18c655718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" />
<p>The Superstar Bakers Club, founded in 2014, is a community of passionate cookers and bakers from the Charleston, S.C. area. The club has over 100 members and meets each week to share ideas and experiment with new recipes.</p>
</div>
<style>
img {
 display: visibility;
}
<style>

다음을 클릭하세요. CSS에서 요소를 숨기는 방법:종합적인 단계별 튜토리얼 위 코드 편집기의 버튼을 누르면 HTML/CSS 코드의 출력을 볼 수 있습니다.

이 예에서는 HTML 코드가 동일합니다. CSS 파일에서는 display를 사용하는 대신 속성에서는 가시성을 사용했습니다. 우리 요소를 숨기려고요. 위에서 볼 수 있듯이 우리 이미지는 웹페이지에서 숨겨졌습니다.

이미지는 사라졌지만 이제 헤더와 문단 사이에 이미지가 위치할 공간이 생겼습니다. 이는 가시성:숨김의 기능입니다. 스타일. 원래 요소의 공간은 여전히 웹페이지에 유지됩니다. 하지만 해당 요소는 숨겨져 있습니다.

CSS 가시성과 디스플레이

요소를 숨기는 방법에 대해 논의한 두 가지 방법은 동일한 것처럼 보이지만 둘 사이에는 차이점이 있습니다.

디스플레이:없음 규칙은 HTML 문서에서 요소를 제거합니다. 숨겨진 요소에 대한 코드가 여전히 존재하는 동안 요소 자체는 표시되지 않습니다.

가시성:숨김 반면에 규칙은 요소를 숨기지만 해당 요소는 여전히 웹 페이지에서 공간을 차지합니다. 요소를 숨기고 웹페이지에서 해당 요소의 공간을 유지하려면 visibility:hide;를 사용하세요. 규칙이 가장 좋습니다.

CSS에서 요소를 숨기는 방법:종합적인 단계별 튜토리얼

"Career Karma는 제가 가장 필요할 때 제 삶에 들어왔고 빠르게 부트캠프에 적응할 수 있도록 도와주었습니다. 졸업한 지 두 달 만에 저는 제 가치관과 인생 목표에 맞는 꿈의 직업을 찾았습니다!"

Venus, Rockbot의 소프트웨어 엔지니어

귀하에게 적합한 부트캠프 찾기

결론

디스플레이:없음 규칙은 문서에서 요소를 제거하고 보기에서 숨깁니다. 가시성:숨김 규칙은 문서의 요소를 숨기고 요소가 비어 있는 공간을 남겨둡니다.

CSS에 대해 더 많은 정보가 필요한가요? CSS를 배우는 방법 가이드를 읽어보세요. 이 가이드는 CSS를 배우는 방법에 대한 실행 가능한 조언으로 가득 차 있습니다. 또한 지식을 발전시키는 데 사용할 수 있는 최고의 리소스 목록도 찾을 수 있습니다.