step14. 01~02. etc
<style>
#one{
/* 공간은 차지하고 보이지만 않음 */
visibility: hidden; /* visible(default) | hidden */
}
#two{
/*
1.0 : 완전 불투명
0.5 : 반투명
0.0 : 완전 투명(안보임)
*/
opacity: 0.5; /* 0.0 ~ 1.0 */
}
</style>
</head>
<body>
<h1>visiblity 속성</h1>
<img src="images/kim1.png" id="one"/>
<img src="images/rabbit_1.png" id="two"/>
</body>- visibility : default는 'visible'. 'hidden'으로 설정하면 공간만 차지하고 보이지는 않게 된다.
- opacity : 불투명도를 의미한다. 0과 1사이의 숫자로, 0에 가까울수록 투명해지고 1에 가까울수록 불투명해진다. 전공 용어로 쓰다가 여기에서 보니까 반가웠다.
<style> .wrapper1{ width: 300px; height: 300px; background-color: yellow; border: 1px solid green; color: white; overflow: visible; /* default 값 */ } #one{ width: 500px; height: 100px; background-color: blue; } .wrapper2{ width: 300px; height: 300px; background-color: yellow; border: 1px solid green; color: white; /* 넘친 컨텐츠 처리 visible | hidden | scroll | auto overflow, overflow-x, overflow-y */ overflow: scroll; } #two{ width: 100px; height: 500px; background-color: blue; } </style> </head> <body> <h1>overflow 처리</h1> <div class="wrapper1"> <div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, quia illo veritatis. Repellendus, numquam? Quisquam iste, dicta dignissimos magni dolores incidunt vel ipsam natus vero voluptatum enim voluptatibus cum maiores!</div> </div> <div class="wrapper2"> <div id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, quia illo veritatis. Repellendus, numquam? Quisquam iste, dicta dignissimos magni dolores incidunt vel ipsam natus vero voluptatum enim voluptatibus cum maiores!</div> </div> </body> - overflow : 넘치는 content를 처리하는 용도로 사용하는 옵션이다. visible이 default 값이다. hidden은 넘치는 content를 보이지 않게 하고, scroll은 넘치는 것에 상관없이 scroll을 만들어준다. auto는 넘치는 경우에만 scroll을 만들어준다. overflow: hidden 옵션은 float을 해제하는 내용에서도 등장했으나 사실상 편법이고 권장되지는 않는다는 언급이 있었다.1
- overflow-x or -y : x 방향으로 넘칠 때 어떻게 할지, y 방향으로 넘칠 때 어떻게 할지 정할 수 있는 속성이다.
'뒷북 정리 (국비 교육) > css' 카테고리의 다른 글
| [css] step16. unit (0) | 2021.12.14 |
|---|---|
| [css] step15. box-sizing (0) | 2021.12.14 |
| [css] step13. css weight (0) | 2021.12.14 |
| [css] step12. text (0) | 2021.12.14 |
| [css] step11. z-index (0) | 2021.12.14 |
댓글