숨기기를 구현하는 CSS-프런트엔드 Q&A-php.cn

숨기기를 구현하는 CSS

WBOY

풀어 주다： 2023-05-21 10:47:07

원래의

2366명이 탐색했습니다.

CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 제어하는 데 사용되는 언어입니다. 웹 페이지를 만들 때 CSS를 사용하여 글꼴, 배경색, 테두리 등과 같은 요소의 스타일을 정의해야 하는 경우가 많습니다. CSS에는 숨기기를 포함하여 요소의 표시 모드를 제어할 수 있는 마법 속성인 표시도 있습니다.

왜 요소를 숨겨야 하나요? 장면이 많습니다. 예를 들어 여러 탭이 있는 페이지를 만들 때 현재 선택한 탭의 내용만 표시하고 다른 탭의 내용은 먼저 숨기고 싶을 수 있습니다. 또 다른 예로, 클릭 시 요소를 숨길 수 있는 닫기 버튼을 페이지에 추가해야 할 수도 있습니다.

다음에는 CSS에서 요소를 숨기는 여러 가지 방법을 자세히 소개하겠습니다.

1. 표시 속성

display는 CSS에서 요소의 표시 모드를 제어하는 데 가장 일반적으로 사용되는 속성입니다. 기본적으로 모든 요소가 표시됩니다. 요소를 숨기려면 표시 속성을 수정하면 됩니다. 다음은 표시 속성의 여러 값입니다.

none

요소를 숨기고 문서 흐름에서 제거합니다. 즉, 공간을 차지하지 않습니다. 이는 숨겨진 요소가 더 이상 페이지 레이아웃에 영향을 미치지 않음을 의미합니다.

샘플 코드:

.hide {
  display: none;
}

로그인 후 복사

block

요소를 블록 수준 요소로 변환하고 표시합니다. 블록 수준 요소는 자체 줄을 차지하고 너비와 높이가 설정되어 있으며 다른 블록 수준 요소와 인라인 요소를 수용할 수 있습니다.

샘플 코드:

.show {
  display: block;
}

로그인 후 복사

inline

요소를 인라인 요소로 변환하고 표시합니다. 인라인 요소는 한 줄을 차지하지 않으며, 너비와 높이는 콘텐츠에 따라 결정되며 다른 인라인 요소만 수용할 수 있습니다.

샘플 코드:

.show {
  display: inline;
}

로그인 후 복사

inline-block

요소를 인라인 블록 수준 요소로 변환하고 표시합니다. 인라인 블록 수준 요소는 블록 수준 요소가 너비와 높이를 설정할 수 있고 인라인 요소는 다른 인라인 요소를 수용할 수 있다는 특성을 가지고 있습니다.

샘플 코드:

.show {
  display: inline-block;
}

로그인 후 복사

2. 가시성 속성

가시성 속성을 사용하여 요소의 표시 모드를 제어할 수도 있습니다. 표시와 달리 가시성을 사용하여 요소를 숨긴 후에도 해당 요소는 여전히 공간을 차지하지만 더 이상 표시되지 않습니다. 가시성 속성에 대한 여러 값은 다음과 같습니다.

visible

요소는 위치 지정 방법에 따라 표시되고 표시됩니다.

hidden

요소는 보이지 않지만 여전히 공간을 차지합니다. display:none과 달리 요소의 너비와 높이는 여전히 유효합니다.

collapse

테이블 요소의 경우 요소의 테두리와 패딩이 무시되어 테이블 행이 테이블이 없는 것처럼 보이게 됩니다.

샘플 코드:

.hide {
  visibility: hidden;
}

로그인 후 복사

3. 불투명도 속성

불투명도 속성은 요소가 점차 사라지는 효과를 얻을 수 있습니다. 값은 0에서 1 사이이며 요소의 투명도를 나타냅니다.

완전히 투명합니다. 즉, 요소가 보이지 않습니다.

완전 불투명, 즉 요소가 완전히 보입니다.

반투명, 즉 요소가 부분적으로 보이고 부분적으로 보이지 않습니다.

투명도가 0이면 요소가 보이지 않을 뿐만 아니라 공간도 차지하지 않습니다. 그러나 요소를 숨기기 위해 불투명도를 사용할 때는 주의해야 합니다. 숨겨진 것처럼 보이지만 실제로는 요소가 그대로 존재합니다. 요소가 공간을 차지하지 않고 숨겨지도록 하려면 display:none 또는 visible:hidden과 같은 다른 방법과 결합해야 합니다.

샘플 코드: