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을 해제하는 내용에서도 등장했으나 사실상 편법이고 권장되지는 않는다는 언급이 있었다.
- overflow-x or -y : x 방향으로 넘칠 때 어떻게 할지, y 방향으로 넘칠 때 어떻게 할지 정할 수 있는 속성이다.
댓글