CSS의 가시성 속성은 요소의 표시 여부를 설정하는 데 사용됩니다. JavaScript와 함께 이 속성을 사용하여 매우 복잡한 메뉴나 웹 페이지 레이아웃을 만들 수 있습니다. 예를 들어 웹 페이지에서 일부 테스트 문제를 수행할 때 가시성을 사용할 수 있습니다. 속성을 사용하여 질문에 대한 답변을 변경하거나 구문 분석을 숨기고 필요할 때 표시할 수 있습니다.
가시성 속성에 가능한 값은 다음과 같습니다.
예:
1. 보이는
표시되는(기본값) 사용량
기본 속성 값이 표시되기 때문입니다. 따라서 세 개의 작은 상자가 모두 표시됩니다.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>문서</title><style>div{width:100px ;높이:100px;}.on e{배경색:옅은녹색;}.two{배경색:palevioletred;}.3{배경색:papayawhip;}</style></head><body><div></div><div> </div><div></div></body></html>실행 결과:
2.숨겨진
첫 번째 작은 상자를 표시하지 않도록 설정해도(가시성: 숨김;) 두 번째 작은 상자는 여전히 원래 위치를 차지합니다.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>문서</title><style>div{width:100px ;높이:100px;}.one{백그로 und-color:palegreen;visibility:hidden;}.two{배경색:palevioletred;}.3{배경색:papayawhip;}</style></head><body><div></div>< div></div><div></div></body></html>실행 결과:
참고: 가시성이 요소를 숨긴 후에도 원래 위치를 계속 차지합니다.
숨겨진 요소가 원래 위치를 원할 경우 visible:hidden을 사용하세요.
숨겨진 요소가 원래 위치를 원하지 않으면 display:none을 사용하세요.
3.상속
예:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>문서</title><style>.one,.two ,.세{너비:100px;높이:100px;}.one{배경색:연녹색;}.two{b 배경색:palevioletred;}.3{배경색:papayawhip;}.4,.five{너비:50px;높이:50px;배경색:powderblue;}</style></head><body>< div><div></div></div><div><div></div></div><div></div></body></html>실행 결과:
상속 속성 값을 사용하는 경우.
(1) 첫 번째 큰 녹색 상자는 표시되지 않도록 설정되어 있으므로 첫 번째 상자의 작은 파란색 상자는 큰 상자의 숨겨진 속성을 상속받아 표시되지 않습니다.
(2) 두 번째 작은 파란색 상자는 큰 분홍색 상자에 표시되는 기본 표시 속성을 상속하므로 표시됩니다.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>문서</title><style>.one,.two ,.3{너비:100px;높이:100px;}.one{배경색:옅은녹색;가시성:숨김 n;}.two{배경-색상:palevioletred;}.3{배경-색상:papayawhip;}.four,.five{너비:50px;높이:50px;배경-색상:powderblue;}</style></style> head><body><div><div></div></div><div><div></div></div><div></div></body></html>실행 결과:
