CSS의 DIV 표시 DIV 숨기기

DIV는 HTML에서 가장 일반적으로 사용되는 요소 중 하나이며 웹 페이지에서 다양한 레이아웃과 컨테이너를 만드는 데 사용할 수 있습니다. CSS에서는 DIV를 사용하여 다른 DIV를 표시하거나 숨기는 것도 효과적인 기술입니다. 이 기사에서는 CSS를 사용하여 DIV를 표시하고 숨기는 방법을 소개합니다.

DIV 요소 표시

DIV 요소를 표시하려면 CSS 속성 표시를 사용하여 표시 모드를 제어할 수 있습니다. 표시 속성에는 일반적으로 사용되는 네 가지 값 유형이 있습니다.

block: 요소를 블록 수준 요소로 표시합니다.
inline-block: 요소를 인라인 블록 요소로 표시합니다(인라인 요소와 유사하지만 블록 수준 요소의 특성이 있음).
inline: 요소를 인라인 요소(예: 텍스트)로 표시합니다.
none: 요소를 숨기고 페이지의 어떤 공간도 차지하지 않습니다.

예를 들어 다음 CSS 스타일은 ID가 "demo"인 DIV 요소를 블록 수준 요소로 표시합니다.

demo {

display: block;

로그인 후 복사

}

물론 인라인 블록 요소로 표시할 수도 있습니다. 또는 인라인 요소인 경우 표시 속성의 값 유형을 "inline-block" 또는 "inline"으로 변경하면 됩니다.

DIV 요소 숨기기

DIV 요소를 숨기려면 가장 일반적인 방법은 아래와 같이 스타일 표시 속성의 값 유형을 "none"으로 설정하는 것입니다.

demo {

display: none;

로그인 후 복사

}

이 방법은 다음과 같습니다. make the target DIV 요소가 완전히 사라지고, 해당 값을 얻기 위해 JavaScript나 다른 방법을 사용해도 어떤 콘텐츠도 얻을 수 없습니다. DOM 요소의 표시를 "없음"으로 설정하면 페이지에 표시되지 않습니다. 높이와 너비를 설정하더라도 표시되지 않습니다.

물론 가시성 속성을 사용하는 등 다른 방법을 사용하여 DIV 요소를 숨길 수도 있습니다. 가시성 속성의 값 유형은 다음과 같습니다.

visible: 요소가 표시됩니다.
hidden: 요소가 표시되지 않지만 페이지에서 위치를 차지합니다.
collapse: 테이블에 사용되며 요소가 축소됩니다.

예를 들어 다음 CSS 스타일은 ID가 "demo"인 DIV 요소를 표시되지 않도록 설정합니다.

demo {

visibility: hidden;

로그인 후 복사

}

이때 DIV 요소는 표시되지 않지만 계속 표시됩니다. 페이지 위치의 공간을 차지하면 JavaScript 또는 기타 수단을 사용하여 해당 속성에 액세스할 때도 계속 표시됩니다.

JavaScript를 사용하여 DIV 요소의 표시 및 숨기기를 제어하세요

어떤 경우에는 JavaScript를 사용하여 DIV 요소의 표시 및 숨기기를 제어해야 할 수도 있습니다. 이때 DOM API에서 제공하는 style 속성을 이용하여 해당 요소의 CSS 스타일을 수정할 수 있습니다. 예를 들어 다음 JavaScript 코드는 ID가 "demo"인 DIV 요소를 표시합니다.

document.getElementById("demo").style.display = "block";

마찬가지로 이를 숨길 수도 있습니다.

document .getElementById("demo").style.display = "none";

style 속성은 인라인 스타일에만 액세스할 수 있지만 외부 스타일 시트 및 내장 스타일 시트에는 액세스할 수 없다는 점에 유의해야 합니다. 외부 스타일 시트를 사용하여 요소의 스타일을 제어하는 경우 DOM API를 통해 링크 요소를 조작하는 등 스타일 시트를 수정하는 다른 방법을 사용해야 합니다.

요약

CSS에서 DIV 요소를 사용하여 다른 요소를 표시하거나 숨기는 것은 매우 실용적인 기술입니다. 동적 웹 페이지 효과를 만들고, 광고와 콘텐츠를 숨기고, JavaScript를 사용하여 요소 상태를 제어하는 등의 작업에 사용할 수 있습니다. 주의할 점은 표시 속성과 가시성 속성의 값 유형이 매우 다르기 때문에 구체적인 구현 효과에 따라 선택해야 한다는 점입니다.

JavaScript를 사용하여 요소 스타일을 제어할 때 다양한 플랫폼과 장치를 더 잘 지원하려면 브라우저 호환성 문제에 주의해야 합니다. 동시에, 코드 유지 관리성과 성능을 향상시키기 위해 가능할 때마다 CSS를 사용하여 요소 스타일을 제어하는 것이 좋습니다.

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