#06 CSS 가시 속성
2022. 1. 19. 02:35ㆍCSS
display
- 요소를 화면 상에 어떻게 표시할지 지정하는 속성
- 속성 값
- none : 화면에서 제거한다 (레이아웃에서 제거된다)
- block : 블록레벨 요소로 표시한다
- inline : 인라인 요소로 표시한다
- inline-block : 인라인 요소로 표시하지만 블록레벨 요소처럼 크기 값을 지정할 수 있다
(인라인 요소와 블록레벨 요소의 장점만 모아놓은 속성)
<body>
<div class="pink">pink</div>
<div class="green">green</div>
<div class="red">red</div>
<div class="blue">blue</div>
</body>.pink {
display: block;
width: 200px;
height: 100px;
background-color: pink;
}
.green {
display: none;
width: 200px;
height: 100px;
background-color: green;
}
.red {
display: inline;
/* 인라인 요소로 변경되었기 때문에 크기값이 지정되지 않는다 */
width: 200px;
height: 100px;
background-color: red;
}
.blue {
display: inline-block;
width: 200px;
height: 100px;
background-color: blue;
}
visibility
- 요소를 보이게 하거나 숨기는 속성
- 요소를 숨겼을 때도 영역을 그대로 차지한다는 것이 display : none과의 차이점이다.
- 숨겨진 요소는 포커스를 받을 수 없다.
- 속성 값
- hidden : 화면에 표시하지 않는다 (레이아웃은 유지된다)
- visible : 화면에 표시한다
.green {
visibility: hidden;
width: 200px;
height: 100px;
background-color: green;
}
opacity
- 요소의 투명도를 지정하는 속성
- 0 ~ 1 사이 소수를 사용한다.
- 값이 작을수록 투명해진다.
- 요소의 투명도만 변경하는 속성이므로 투명도 값을 0으로 변경해도 영역을 차지하며, 포커스도 가능하다.
<div>
<a href="#" class="visibility">visibility</a>
</div>
<div>
<a href="#" class="opacity">opacity</a>
</div>div {
width: 200px;
border: 1px solid red;
}
.visibility {visibility: hidden;}
.visibility:hover {visibility: visible;}
/* visibility: hidden은 요소를 숨기기 때문에 hover효과가 적용되지 않는다 */
.opacity {opacity: 0;}
.opacity:hover {opacity: 1;}
/* opacity는 투명하게 보이는 것으므로 hover효과가 적용된다 */
반응형
'CSS' 카테고리의 다른 글
| #08 CSS background 속성 (0) | 2022.02.06 |
|---|---|
| #07 CSS 박스 모델 (0) | 2022.01.20 |
| #05 CSS 영역 크기 속성 (0) | 2022.01.19 |
| #04 CSS text 속성 (0) | 2022.01.18 |
| #03 CSS font 속성 (0) | 2022.01.17 |