CSS 표시 및 숨기기

CSS 표시 및 숨기기

CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 설명하는 데 사용되는 스타일 시트 언어입니다. 웹 개발에서 CSS 표시 및 숨기기 기능은 매우 중요하며 이는 HTML 요소의 가시성을 제어하여 달성할 수 있습니다. 이 글에서는 CSS 표시 및 숨기기 구현 방법과 적용 방법을 소개합니다.

1. 기본 구문

CSS에서는 표시 속성을 설정하여 요소의 가시성을 제어합니다. 표시 속성의 값은 다음과 같습니다.

1. none: 요소를 숨기고 공간을 예약하지 않습니다.
2. block: 요소가 블록 수준 요소로 표시되어 공간 전체를 차지합니다.
3. inline: 요소가 인라인 요소로 표시되며 인라인 공간을 차지합니다.
4. inline-block: 요소는 인라인 블록 수준 요소로 표시되며 인라인 공간을 차지하지만 너비와 높이를 설정할 수 있습니다.
5. table: 요소가 테이블로 표시됩니다. 이때 요소의 표시 속성은 table-cell로 설정되며 table-cell은 테이블의 공간을 차지합니다.
6. table-row: 요소가 테이블 행으로 표시됩니다. 이때 요소의 표시 속성은 table-cell로 설정되며, table-cell은 테이블의 공간을 차지합니다.
7. table-cell: 요소가 표 셀로 표시되며 표의 공간을 차지합니다.

2. 구현 방법

1. 초기 숨기기

가장 간단한 구현 방법은 CSS에서 요소의 표시 속성을 없음으로 설정하는 것입니다. 예를 들어 다음 코드에서는 div 요소의 초기 상태가 숨겨집니다.

div{
  display:none;
}

2. Click to show

JavaScript를 사용하면 버튼을 클릭할 때 요소를 표시하거나 숨길 수 있습니다. 먼저 HTML로 버튼을 정의하세요.

<button onclick="toggle()">点击显示/隐藏</button>

여기서는 onclick 이벤트가 정의되어 있습니다. 버튼을 클릭하면 토글() 함수가 실행됩니다. 둘째, CSS에서 아래와 같이 요소의 표시 속성을 없음으로 설정합니다.

#box{
  display:none;
}

마지막으로 JavaScript에서 요소의 표시 속성을 변경하여 표시하거나 숨기도록 전환() 함수를 정의합니다.

function toggle(){
  var box = document.getElementById("box");
  if(box.style.display == "none"){
    box.style.display= "block";
  }
  else{
    box.style.display= "none";
  }
}

3. 마우스 슬라이드 오버 디스플레이

마우스를 롤오버할 때 JavaScript를 사용하여 요소를 표시하거나 숨길 수 있습니다. HTML에서는 다음 요소를 정의합니다.

<div onmouseover="show()" onmouseout="hide()">鼠标滑过显示/隐藏</div>

onmouseover 및 onmouseout 이벤트가 여기에 정의되어 있으며 각각 마우스 슬라이드 오버 및 떠나기 동작을 나타냅니다. 둘째, CSS에서 아래와 같이 요소의 표시 속성을 없음으로 설정합니다.

#box{
  display:none;
}

마지막으로 JavaScript에서 show() 및 hide() 함수를 정의합니다.

function show(){
  var box = document.getElementById("box");
  box.style.display= "block";
}

function hide(){
  var box = document.getElementById("box");
  box.style.display= "none";
}

3. 응용 예제

1. Pop- up box

CSS의 표시 속성을 통해 팝업 상자를 표시하거나 숨길 수 있습니다. HTML에서 버튼과 팝업 창을 정의합니다:

<button onclick="show()">点击弹窗</button>

<div id="dialog">
  <h2>弹窗标题</h2>
  <p>弹窗内容</p>
  <button onclick="hide()">关闭弹窗</button>
</div>

그런 다음 CSS에서 아래와 같이 팝업 창의 표시 속성을 없음으로 설정합니다.

#dialog{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  width:400px;
  height:300px;
  margin-left:-200px;
  margin-top:-150px;
  background:#fff;
  border:1px solid #ccc;
  padding:20px;
}

여기에는 너비, 높이, 위치 및 팝업 창의 배경에는 색상 및 기타 스타일이 설정됩니다. 마지막으로 JavaScript에서 팝업 창의 표시 및 숨기기를 각각 제어하는 ​​show() 및 hide() 함수를 정의합니다.

function show(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "block";
}

function hide(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "none";
}

2. Picture carousel

CSS의 표시 속성을 통해 그림 회전 목마를 얻을 수 있습니다. HTML에서 이미지 컨테이너와 여러 이미지를 정의합니다.

<div id="slider">
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
  <img src="img/3.jpg" />
  <img src="img/4.jpg" />
</div>

그런 다음 CSS에서 아래와 같이 이미지 컨테이너의 스타일을 설정합니다.

#slider{
  width:500px;
  height:300px;
  overflow:hidden;
  position:relative;
}

#slider img{
  position:absolute;
  top:0;
  left:0;
  display:none;
  width:100%;
  height:100%;
}

여기에서 이미지 컨테이너의 너비, 높이, 오버플로 숨기기 및 이미지를 설정합니다. 위치 및 표시 속성. 마지막으로 JavaScript에서는 이미지 캐러셀의 효과가 달성됩니다.

var imgs = document.querySelectorAll("#slider img");
var index = 0;

setInterval(function(){
  imgs[index].style.display = "none";
  index = (index + 1) % imgs.length;
  imgs[index].style.display = "block";
}, 2000);

여기에서는 setInterval 함수를 사용하여 2초마다 이미지를 전환합니다. 구체적인 구현 방법은 먼저 현재 이미지의 표시 속성을 없음으로 설정한 후 다음 이미지의 인덱스 값을 계산하고 마지막으로 이미지의 표시 속성을 블록으로 설정하는 것입니다.

4. 요약

CSS 표시 및 숨기기 기능 구현 방법은 매우 간단하지만 웹 개발의 기본 기술입니다. 실제 개발에서는 팝업창, 이미지 캐러셀 등 CSS의 표시 속성을 통해 다양한 효과를 얻을 수 있습니다. 동시에 JavaScript의 협력을 통해 더욱 풍부한 상호작용 효과를 얻을 수 있습니다.

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