CSS div를 표시하고 숨기는 방법

CSS는 웹페이지 스타일을 지정하는 데 사용되는 언어로 페이지의 모양과 레이아웃을 변경하는 데 사용할 수 있습니다. CSS에서는 div 요소를 사용하여 웹 콘텐츠를 그룹화하고 이러한 구성 요소에 다양한 스타일을 적용할 수 있습니다. 그 중 div 요소를 표시하고 숨기는 기능은 페이지 디자인에 매우 유용합니다.

이 글에서는 CSS div 요소를 사용하여 페이지 요소를 표시하고 숨기는 방법에 대해 설명합니다. 이 문서에서는 다음 내용을 다룹니다.

1. CSS div 요소란 무엇입니까?
2. CSS 표시 속성
3. CSS 가시성 속성
4. CSS div 요소를 사용하여 페이지 요소를 표시하고 숨기는 방법

1 CSS란 무엇입니까? div 요소

HTML에서 div 요소는 의미가 없는 블록 수준 요소입니다. 웹 콘텐츠를 그룹화하는 데 사용할 수 있으며 이러한 구성 요소의 모양과 레이아웃은 CSS 스타일을 통해 수정할 수 있습니다.

예를 들어 웹 페이지에 세 가지 다른 콘텐츠 요소가 있다고 가정해 보겠습니다. 이러한 요소에 대한 HTML 코드는 다음과 같습니다.

<div class="header">头部内容</div>
<div class="content">正文内容</div>
<div class="footer">底部内容</div>

위 코드에서는 세 가지 div 요소를 사용하여 헤더, 본문 및 하단을 그룹화했습니다. 콘텐츠 . 다음으로 배경색, 텍스트 글꼴, 테두리 등을 설정하는 등 CSS 스타일을 통해 각 div 요소의 스타일을 수정할 수 있습니다.

2. CSS 표시 속성

CSS에서는 표시 속성을 사용하여 요소의 표시 모드를 제어할 수 있습니다. 해당 값에는 다음이 포함됩니다.

• none: 요소가 표시되지 않으며 페이지 공간을 차지하지 않습니다.
• block: 요소는 자체 줄을 차지하는 블록 수준 요소로 표시됩니다.
• inline: 요소가 인라인 요소로 표시되며 다른 인라인 요소와 같은 줄에 표시됩니다.
• inline-block: 해당 요소는 인라인 블록 요소로 표시되며 다른 인라인 요소와 같은 줄에 표시되지만 너비, 높이 등의 속성을 설정할 수 있습니다.

다음은 CSS 표시 속성을 사용하여 페이지 요소를 숨기는 방법을 보여주는 예입니다.

<div class="box">要隐藏的元素</div>

.box {
  display: none;
}

위 코드에서는 클래스 상자와 함께 div 요소를 사용하고 표시 속성을 없음으로 설정했습니다. 이는 이 div 요소가 페이지에 표시되지 않음을 의미합니다.

3. CSS 가시성 속성

CSS 가시성 속성은 요소의 표시 및 숨기기를 제어하는 ​​데에도 사용할 수 있습니다. 표시 속성과 달리 가시성 속성은 요소의 표시 여부만 제어하며 페이지의 요소 레이아웃에는 영향을 주지 않습니다. 가시성 속성의 선택적 값은 다음과 같습니다.

• visible: 요소가 표시되며 이는 표시 속성의 기본값과 동일합니다.
• hidden: 요소는 보이지 않지만 여전히 페이지 공간을 차지합니다.
• collapse: 테이블 요소에 사용됩니다. 축소로 설정하면 요소가 표시되지 않고 셀 테두리도 사라집니다.

다음은 CSS 가시성 속성을 사용하여 페이지 요소를 숨기는 방법을 보여주는 예입니다.

<div class="box">要隐藏的元素</div>

.box {
  visibility: hidden;
}

위 코드에서는 클래스 상자와 함께 div 요소를 사용하고 가시성 속성을 숨김으로 설정했습니다. 즉, div 요소는 페이지에 표시되지 않지만 여전히 페이지 공간을 차지합니다.

4. CSS div 요소를 사용하여 페이지 요소를 표시하고 숨기는 방법

위에서 CSS 표시 및 가시성 속성을 소개했습니다. 다음으로 이러한 속성을 결합하여 페이지에 div를 표시하거나 숨기는 버튼을 구현하겠습니다. 요소.

HTML 코드는 다음과 같습니다.

<button onclick="toggle()">点击我</button>
<div class="box">要显示或隐藏的元素</div>

위 코드에서는 버튼 요소를 생성하고 여기에 onclick 이벤트를 추가했습니다. 또한 숨기거나 표시하려는 요소인 클래스 상자를 사용하여 div 요소를 만듭니다.

다음으로 CSS 파일에 다음 코드를 추가합니다.

.box {
  visibility: hidden;
}

이렇게 하면 페이지가 로드될 때 상자 요소가 보이지 않게 됩니다.

마지막으로 페이지의 JavaScript 코드에 다음 코드를 추가합니다.

function toggle() {
  var box = document.querySelector('.box');
  if (box.style.display === 'none') {
    box.style.display = '';
  } else {
    box.style.display = 'none';
  }
}

위 코드에서는 토글()이라는 함수를 정의하고 이를 버튼의 onclick 이벤트에 바인딩합니다. 함수 내에서 document.querySelector() 메서드를 사용하여 상자 클래스가 있는 요소를 가져오고 해당 요소의 표시 속성이 없음인지 확인합니다. 그렇다면 표시 속성을 빈 문자열로 설정하여 상자 요소를 표시합니다. 그렇지 않으면 표시 속성을 없음으로 설정하여 상자 요소를 숨깁니다.

위는 CSS div 요소를 사용하여 페이지 요소를 표시하고 숨기는 방법입니다. 이러한 기술을 익히면 페이지를 더욱 역동적이고 대화형으로 만들 수 있습니다.

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