CSS를 사용하여 웹 페이지 요소의 가시성을 제어하는 ​​방법

웹 디자인에서 CSS는 페이지 스타일을 제어하는 ​​데 필수적인 부분입니다. CSS는 웹페이지의 모양을 설정하는 것 외에도 요소의 가시성을 설정할 수도 있습니다. 이 글에서는 CSS를 사용하여 웹 페이지 요소의 가시성을 제어하는 ​​방법과 이를 실제 프로젝트에 적용하는 방법을 소개합니다.

1. CSS는 요소의 가시성을 설정합니다.

CSS는 요소의 가시성을 제어하는 ​​가시성과 표시라는 두 가지 속성을 제공합니다. 각각의 용도와 효과가 다르기 때문에 아래에서 별도로 소개하겠습니다.

1. visibility 속성

visibility 속성은 요소의 가시성을 설정하는 데 사용됩니다.

visible(기본값): 요소가 표시됩니다.

hidden: 요소가 표시되지 않습니다. 하지만 여전히 점유 공간을 유지합니다.

collapse: 테이블 요소에만 사용되며 테이블의 행이나 열을 축소하고 일반 내용을 표시하지 않습니다.

예를 들어 div에 가시성을 숨김으로 설정하여 숨길 수 있습니다.

div {
  visibility: hidden;
}

2. display 속성

디스플레이 속성은 요소의 표시 모드를 설정하는 데 사용됩니다.

block: 요소가 하나 이상의 라인을 차지하며 블록 수준으로 표시됩니다.

inline: 요소가 인라인으로 표시되고 다른 인라인 요소와 나란히 표시됩니다.

inline-block: 요소가 인라인 블록 수준으로 표시됩니다. , 다른 인라인 요소와 나란히 표시되지만 너비, 높이 및 기타 속성을 설정할 수 있습니다.

none: 요소가 표시되지 않으며 차지하는 공간이 유지되지 않습니다.

예를 들어 범위를 표시하지 않도록 표시: 없음을 설정할 수 있습니다.

span {
  display: none;
}

2. CSS 적용 예

1. "맨 위로 가기" 버튼

일부에서는 "맨 위로 가기"를 자주 볼 수 있습니다. 웹사이트 "버튼이 존재합니다. 현재 가시성 제어를 사용하여 페이지 스크롤 막대가 특정 위치로 스크롤될 때만 버튼을 표시할 수 있습니다.

HTML 부분:

<a href="#" id="back-to-top">返回顶部</a>

CSS 부분:

#back-to-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: none;
}

#back-to-top.show {
  display: block;
}

JavaScript(jQuery) 부분:

$(window).scroll(function() {
  if ($(this).scrollTop() > 500) {
    $('#back-to-top').addClass('show');
  } else {
    $('#back-to-top').removeClass('show');
  }
});

위 코드는 페이지 스크롤 막대의 위치를 ​​모니터링하여 500픽셀을 초과하면 "맨 위로 가기" 버튼을 표시하고, 그렇지 않으면 버튼을 숨깁니다.

2. 테이블의 "표시/숨기기" 기능

테이블의 데이터 양이 많은 경우 가시성 제어를 사용하여 테이블의 "표시/숨기기" 기능을 구현하여 사용자 경험을 향상시킬 수 있습니다. .

HTML 부분:

<button id="toggle-table">显示/隐藏表格</button>

<table id="data">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小红</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

CSS 부분:

#data {
  display: none;
}

JavaScript(jQuery) 부분:

$('#toggle-table').click(function() {
  $('#data').toggle();
});

위 코드에서는 처음에 테이블 요소가 보이지 않도록 display:none을 설정했습니다. 그런 다음 JavaScript에서는 사용자가 "테이블 표시/숨기기" 버튼을 클릭할 때 테이블 표시 여부를 전환하기 위해 토글() 메서드를 사용합니다.

3. 참고

1. display:none을 설정하면 요소가 차지하는 공간을 유지하지 않습니다. 따라서 이 요소를 사용해야 하는 경우에는 JavaScript에서 display:block 또는 다른 값으로 동적으로 변경해야 합니다.
2. 요소의 가시성은 상위 요소 또는 상위 요소의 설정에 의해 영향을 받을 수 있습니다. 예를 들어 상위 요소가 visible:hidden으로 설정된 경우 하위 요소도 표시되지 않습니다.
3. 요소의 가시성 제어를 남용하지 마십시오. 실제 필요에 따라 설정해야 합니다. 가시성 제어를 과도하게 사용하면 코드가 복잡해지고 성능이 저하될 수 있습니다.

요약

이 기사에서는 CSS를 사용하여 웹 요소의 가시성을 제어하는 ​​방법을 배웠습니다. 페이지의 상호작용성과 사용자 경험을 향상시키는 것 외에도 요소의 가시성을 제어하면 페이지의 리소스 오버헤드를 효과적으로 절약할 수 있습니다. 따라서 실제 프로젝트에서는 CSS를 유연하게 적용하여 요소의 가시성을 설정해야 합니다.

위 내용은 CSS를 사용하여 웹 페이지 요소의 가시성을 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!