728x90
★ OverFlow
- 박스 안, 내용물이 넘치면 어떻게 할 것인지 처리하는 옵션
- width와 height를 지정해주었을 때 사용함.
- overflow : visible | hidden | scroll | auto
- visible : 넘쳐도 그대로 보여줌
- hidden : 넘치지 않는 정도까지만 보여줌
- scroll : scroll이 생겨서, 내용이 넘치든 안넘치든 스크롤바가 생김
- auto : 내용이 넘치지 않으면, scroll이 생기지 않고, 넘치면 scroll이 생김
■ 스크롤이 넘쳤을 때
- 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border : 1px solid black;
width : 200px;
height : 200px;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.</div>
</body>
</html>
★ Visibility, 가시성
- 요소를 화면에 보일지? 말지?
- visibilty : visible | hidden
- hidden을 하면, 자리는 빈 상태로 빈공간으로 남는다.
- 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cat2 {
visibility:hidden;
}
</style>
</head>
<body>
<div id="box">
<img src="images/catty01.png" id="cat1">
<img src="images/catty02.png" id="cat2">
<img src="images/catty03.png" id="cat3">
</div>
</body>
</html>- 실행
■ hover를 이용하여 커서가 위치하였을 때, 이미지를 hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cat2 {
visibility:visible;
/* display :none; */
}
#box {
border : 10px solid black;
padding : 50px;
background-color: yellow;
}
#box img:hover {
visibility: hidden;
}
</style>
</head>
<body>
<div id="box">
<img src="images/catty01.png" id="cat1">
<img src="images/catty02.png" id="cat2">
<img src="images/catty03.png" id="cat3">
</div>
</body>
</html>
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 10 - Display (0) | 2023.04.17 |
|---|---|
| CSS STEP 9 - 적용 예제 (0) | 2023.04.14 |
| CSS STEP 7 - BOX (0) | 2023.04.14 |
| CSS STEP 6 - TEXT (0) | 2023.04.14 |
| CSS STEP 5 - BackGround (0) | 2023.04.13 |
728x90
★ OverFlow
- 박스 안, 내용물이 넘치면 어떻게 할 것인지 처리하는 옵션
- width와 height를 지정해주었을 때 사용함.
- overflow : visible | hidden | scroll | auto
- visible : 넘쳐도 그대로 보여줌
- hidden : 넘치지 않는 정도까지만 보여줌
- scroll : scroll이 생겨서, 내용이 넘치든 안넘치든 스크롤바가 생김
- auto : 내용이 넘치지 않으면, scroll이 생기지 않고, 넘치면 scroll이 생김
■ 스크롤이 넘쳤을 때
- 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border : 1px solid black;
width : 200px;
height : 200px;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.</div>
</body>
</html>
★ Visibility, 가시성
- 요소를 화면에 보일지? 말지?
- visibilty : visible | hidden
- hidden을 하면, 자리는 빈 상태로 빈공간으로 남는다.
- 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cat2 {
visibility:hidden;
}
</style>
</head>
<body>
<div id="box">
<img src="images/catty01.png" id="cat1">
<img src="images/catty02.png" id="cat2">
<img src="images/catty03.png" id="cat3">
</div>
</body>
</html>- 실행
■ hover를 이용하여 커서가 위치하였을 때, 이미지를 hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cat2 {
visibility:visible;
/* display :none; */
}
#box {
border : 10px solid black;
padding : 50px;
background-color: yellow;
}
#box img:hover {
visibility: hidden;
}
</style>
</head>
<body>
<div id="box">
<img src="images/catty01.png" id="cat1">
<img src="images/catty02.png" id="cat2">
<img src="images/catty03.png" id="cat3">
</div>
</body>
</html>
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 10 - Display (0) | 2023.04.17 |
|---|---|
| CSS STEP 9 - 적용 예제 (0) | 2023.04.14 |
| CSS STEP 7 - BOX (0) | 2023.04.14 |
| CSS STEP 6 - TEXT (0) | 2023.04.14 |
| CSS STEP 5 - BackGround (0) | 2023.04.13 |
