가시속성은 보이는지 안보이는지를 정해주는 속성이다.
display, opacity, visibility 로
각각 공간을 차지 하는지 아닌지다 다르므로, 작성해 보도록 한다.
이 외에도, 넘치는 부분에 대한 가시속성인, overflow : auto | hidden | scroll 이 있다.
| 속성 | 속성값 | 설명 |
| display | none | block | 내용, 공간이 삭제됨 |
| opacity | 0~1 | 내용 안보이고, 공간 유지 |
| visibility | hidden | 내용 안보이고, 공간 유지 |
| overflow | hidden | 감싸는 요소의 크기를 넘치는 부분은 안보이게 함, 넘치는 공간 삭제됨 |
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width:100px;
height:100px;
float:left;
margin:5px;
background:red;
border:5px solid #333;
color:#fff;
font-weight:bold;
}
#box2{
display:none;
}
#box4{
visibility:hidden;
}
#box6{
opacity:0;
}
</style>
</head>
<body>
<div id="box1">111</div>
<div id="box2">222</div>
<div id="box3">333</div>
<div id="box4">444</div>
<div id="box5">555</div>
<div id="box6">666</div>
<div id="box7">777</div>
</body>
</html>
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| multi-column (0) | 2021.02.01 |
|---|---|
| 가시속성을 활용한 서브메뉴 (0) | 2021.01.29 |
| transform, transition 속성 (0) | 2021.01.29 |
| ankor link 2 - 외부 문서 내 특정위치로 이동 (0) | 2021.01.29 |
| anchor link 1 - 문서 내 이동 (0) | 2021.01.29 |
