CSS 숨기기 및 표시

웹 디자인에서 요소를 숨기고 표시하는 것은 매우 일반적인 요구 사항입니다. 요소를 숨기고 표시하기 위해 일반적으로 CSS의 표시 속성을 사용합니다. 이 기사에서는 CSS에서 일반적으로 사용되는 숨기기 및 표시 방법을 소개합니다.

1. CSS의 표시 속성

표시 속성은 CSS에서 가장 일반적으로 사용되는 속성 중 하나이며 요소의 표시 또는 숨기기를 제어할 수 있으며 요소의 표현을 변경할 수도 있습니다. 표시 속성에는 많은 값이 있습니다. 여기서는 일반적으로 사용되는 몇 가지 값만 소개합니다.

1. display: none

display:none은 요소를 숨기는 데 가장 일반적으로 사용되는 방법으로, 문서 흐름에서 요소를 완전히 제거하고 공간을 차지하지 않습니다. 해당 요소의 HTML 코드를 브라우저에서 보더라도 숨겨진 요소는 볼 수 없습니다. display:none을 사용하면 레이아웃을 변경하지 않고도 요소를 숨길 수 있고 요소가 공간을 차지하지 않는다는 이점이 있습니다.

예를 들어 다음 CSS 코드를 사용하여 요소를 숨길 수 있습니다.

div {
  display: none;
}

2. display: block

display:block은 요소를 표시하는 데 가장 일반적으로 사용되는 방법입니다. 블록 요소는 새 줄에서 시작하여 상위 요소의 전체 너비를 차지합니다. 너비와 높이를 설정할 수 있으며 기본적으로 인라인 요소와 텍스트 노드를 수용할 수 있습니다.

예를 들어 다음 CSS 코드는 div 요소를 블록 요소로 설정합니다.

div {
  display: block;
}

3. display: inline

display: inline은 요소를 인라인으로 표시하여 인접한 요소로 표시되도록 하는 것입니다. 텍스트 앞이나 뒤에 새 줄을 시작하지 않지만 다른 요소와 줄을 공유합니다. 요소의 너비와 높이를 설정하지만 자동으로 래핑하지는 않습니다.

예를 들어 다음 CSS 코드를 사용하여 범위 요소를 인라인 요소로 설정할 수 있습니다.

span {
  display: inline;
}

4. display: inline-block

display: inline-block은 요소가 인라인의 일부 기능을 갖도록 만드는 것입니다( 요소는 다시 시작되지 않음)(한 줄), 블록의 일부 특성(너비 및 높이 설정 가능)을 가지며 혼합 그래픽 및 텍스트 효과와 같은 일부 레이아웃 효과를 달성하는 데 자주 사용됩니다.

예를 들어 다음 CSS 코드를 사용하여 div 요소를 인라인 블록 요소로 설정할 수 있습니다.

div {
  display: inline-block;
}

2. CSS의 가시성 속성

display 속성 외에도 일반적으로 사용되는 속성도 있습니다 요소를 표시하고 숨길 수 있는 속성, 즉 가시성 속성입니다. visible 속성은 요소의 가시성을 제어하는 ​​데 사용되며 visible(기본값, 요소가 표시됨) 및 hide(요소가 숨겨짐)의 두 가지 값으로 설정될 수 있습니다.

1. visibility: visible

visibility: visible은 기본값으로, 요소를 표시하는 값입니다. 이는 display:block 또는 display:inline의 경우와 매우 유사합니다. 그러나 visible: visible 요소는 문서 내 위치를 유지하며 display:block 또는 display:inline 요소와 같은 CSS 레이아웃의 영향을 받지 않습니다. 요소가 숨겨져 있더라도 JavaScript나 기타 기술을 사용하여 요소의 위치와 크기를 가져올 수 있습니다.

예를 들어 다음 CSS 코드는 div 요소를 표시 상태로 설정합니다.

div {
  visibility: visible;
}

2. visibility: Hidden

visibility: Hidden은 요소를 숨기는 값입니다. 이는 display:none과 동일한 효과를 가지지만 문서 흐름에서 요소를 제거하는 대신 요소의 공간을 유지합니다. 따라서 요소가 숨겨져 있으면 다른 요소가 해당 위치를 차지하며 해당 요소에 의해 트리거되는 이벤트와 애니메이션은 계속 작동합니다.

예를 들어 다음 CSS 코드는 div 요소를 보이지 않는 상태로 설정합니다.

div {
  visibility: hidden;
}

3. CSS의 불투명도 속성

요소를 숨기고 표시하기 위해 표시 및 가시성 속성을 사용하는 것 외에도 opacity 속성은 요소 투명도를 조정합니다.

1. opacity: 1(불투명도)

opacity: 1은 요소의 기본값입니다. 즉, 요소가 완전히 불투명합니다. 즉, 요소를 통해 후속 콘텐츠를 볼 수 없습니다.

예를 들어 다음 CSS 코드는 불투명 div 요소를 설정합니다.

div {
  opacity: 1;
}

2. opacity: 0(완전 투명)

opacity: 0은 요소가 완전히 투명함을 의미합니다. 즉, 배경이 요소를 통해 완전히 보입니다. . 실제로 opacity: 0은 요소를 숨기고 요소의 공간을 보존하는 데 자주 사용됩니다.

예를 들어 다음 CSS 코드는 완전히 투명한 div 요소를 설정합니다.

div {
  opacity: 0;
}

3. opacity: 0.5(반투명)

opacity: 0.5는 요소가 반투명하다는 것을 의미합니다. 즉, 배경이 표시될 수 있습니다. 요소를 통해, 그러나 여전히 요소의 내용을 볼 수 있습니다.

예를 들어 다음 CSS 코드는 반투명 div 요소를 설정합니다.

div {
  opacity: 0.5;
}

Summary

이 문서에서는 표시 및 가시성 속성, 불투명도 속성을 포함하여 CSS에서 일반적으로 사용되는 숨기기 및 표시 방법을 소개합니다. 실제 개발에서는 특정 요구 사항에 따라 요소를 숨기고 표시하는 다양한 방법을 선택할 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 CSS 숨기기 및 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!