반응형
안녕하세요.
html5에서 작성된 요소를 css3를 통해 디자인을 할 수 있습니다.
css3 속성 중 visibility 속성을 사용하면 요소를 투명하게 할 수 있습니다.
속성 값으로는 visible, hidden, collapse, inherit 가 있습니다.
-visible: 요소를 불투명하게 지정합니다.
-hidden: 요소를 투명하게 지정합니다.
-collapse: 요소를 표에서 지정할 경우 겹치돌록 지정합니다.
-inherit: 부모의 속성을 상속하도록 지정합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html>
<head>
<title>codeomni.tistory.com css3 visibility 속성 요소 불투명 태그 보이지 않게 하기 소스 코드 예제</title>
<style>
body {
background-color: #3e86d7;
}
</style>
</head>
<body>
<h1>codeomni</h1>
<div style="visibility: visible;">
<p>visible</p>
</div>
<div style="visibility: hidden;">
<p>hidden</p>
</div>
<div style="visibility: collapse;">
<p>collapse</p>
</div>
<div style="visibility: inherit;">
<p>inherit</p>
</div>
</body>
</html>
|
cs |
실행한 화면입니다.
visibility 속성 값인 visible, hidden, collapse, inherit가 적용된 것을 확인할 수 있습니다.
댓글