<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.img_wrap{
width: 300px;
height: 300px;
background-color: gray;
border: 10px solid black;
/* overflow: hidden; */
/* =>부모밖으로 넘처나는 자식을 안보이게 가려줌 */
/* overflow: scroll;
=>부모밖으로 넘처난 엘리먼트에 스크롤이 생성되어 확인가능함 */
overflow: auto;
}
.text_box{
width: 300px;
height: 300px;
border: 10px solid black;
margin-top: 50px;
overflow: auto;
/* =>자식이 부모 밖으로 넘쳐나면 자동으로 스크롤이 생성됨 */
}
</style>
</head>
<body>
<div class="img_wrap">
<img src="https://zeblishdnkazfgswusxd.supabase.co/storage/v1/object/public/avatars/5e950821-578c-41a8-ab2e-3887525c8c56/avatar.webp?v=1772670759630" alt="cat">
</div>
<div class="text_box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolore fuga ex, fugiat cupiditate accusantium illo mollitia autem molestiae quae rem hic ipsum at asperiores repudiandae debitis quasi necessitatibus nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolore fuga ex, fugiat cupiditate accusantium illo mollitia autem molestiae quae rem hic ipsum at asperiores repudiandae debitis quasi necessitatibus nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolore fuga ex, fugiat cupiditate accusantium illo mollitia autem molestiae quae rem hic ipsum at asperiores repudiandae debitis quasi necessitatibus nesciunt.
</div>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.img_wrap{
width: 300px;
height: 300px;
background-color: gray;
border: 10px solid black;
/* overflow: hidden; */
/* =>부모밖으로 넘처나는 자식을 안보이게 가려줌 */
/* overflow: scroll;
=>부모밖으로 넘처난 엘리먼트에 스크롤이 생성되어 확인가능함 */
overflow: auto;
}
.text_box{
width: 300px;
height: 300px;
border: 10px solid black;
margin-top: 50px;
overflow: auto;
/* =>자식이 부모 밖으로 넘쳐나면 자동으로 스크롤이 생성됨 */
}
</style>
</head>
<body>
<div class="img_wrap">
<img src="https://zeblishdnkazfgswusxd.supabase.co/storage/v1/object/public/avatars/5e950821-578c-41a8-ab2e-3887525c8c56/avatar.webp?v=1772670759630" alt="cat">
</div>
<div class="text_box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolore fuga ex, fugiat cupiditate accusantium illo mollitia autem molestiae quae rem hic ipsum at asperiores repudiandae debitis quasi necessitatibus nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolore fuga ex, fugiat cupiditate accusantium illo mollitia autem molestiae quae rem hic ipsum at asperiores repudiandae debitis quasi necessitatibus nesciunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolore fuga ex, fugiat cupiditate accusantium illo mollitia autem molestiae quae rem hic ipsum at asperiores repudiandae debitis quasi necessitatibus nesciunt.
</div>
</body>
</html>
#스타일시트 overflow