Display & Opacity
display
- 요소를 어떻게 보여줄지 결정한다.
| 프로퍼티값 키워드 | 설명 |
|---|---|
| block | block 특성을 가지는 요소(block 레벨 요소)로 지정 [width: 100%] |
| inline | inline 특성을 가지는 요소(inline 레벨 요소)로 지정 [컨텐츠를 딱 감쌀정도의 크기] |
| inline-block | inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정 |
| none | 해당 요소를 화면에 표시하지 않는다 (공간조차 사라진다 |
visibility
- 요소를 보여줄지 말지 결정한다.
| 프로퍼티값 키워드 | 설명 |
|---|---|
| visible | 해당 요소를 보이게 한다 (기본값) |
| collapse | table 요소에 사용하며 행이나 열을 보이지 않게 한다. |
| hidden | 해당 요소를 보이지 않게 한다. display: none;은 해당 요소의 공간까지 사라지게 하지만 visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다. |
| none | table 요소의 row나 column을 보이지 않게 한다. IE, 파이어폭스에서만 동작하며, 크롬에서는 hidden과 동일하게 동작한다. |
opacity
- 요소의 투명도를 정의한다.
- 0.0 ~ 1.0의 값을 입력하며 0.0은 투명, 1.0은 불투명을 의미한다.
div {
width: 150px;
background-color: black;
opacity: 0.8;
}
| Reference
https://poiemaweb.com/css3-display
Author And Source
이 문제에 관하여(Display & Opacity), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lucy_leee/Display-Opacity저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
