overflow

6450 ワード

○overflow
親要素の範囲から離れるときの処理方法の指定
<!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>
        /* overflow : 영역 밖으로 넘어갔을 때 어떻게 처리할지 */
        /* 1. visible : 그대로 보여짐(기본값) */
        /* 2. hidden : 숨김처리 */
        /* 3. scroll : 스크롤처리(영역을 넘지 않아도 스크롤0)*/
        /* 4. auto : 영역밖으로 나가면 스크롤 생김
                           영역밖으로 나가지 않으면 스크롤 안생김 */
        div{
            height: 200px;
            background-color: palevioletred;
            overflow: hidden;
            overflow: scroll;
            overflow: auto;
            
        }
    </style>
</head>
<body>
    <div>You are my everything
        My everything
        My everything
        You are my everything
        My everything
        
        비가 내리는 날엔
        우리 방안에 누워
        아무 말이 없고
        감은 눈을 마주보면
        모든 게 우리 거야
        조금 핼쑥한 얼굴로
        날 찾아올 때도
        가끔 발칙한 얘기로
        날 놀랠킬 때도
        
        You are my everything
        My everything
        My everything
        You are my everything
        My everything
        
        넌 내 모든 거야
        내 여름이고
        내 꿈이야
        넌 내 모든 거야
        나 있는 그대로
        받아 줄게요
    
다시 내게 말해줄래?
난 아무것도 못 들었어
작을 불이 꺼진 거야
이젠 아무것도 볼 수 없어
순간 알 수 있었어
설렘도 지겨워 지려는 때가 온 거야
Ling Ling 슬픈 표정 짓지 마
내 경계 없는 맘엔
수상한 그런 설계가 없어
Ling Ling 이해하려 하지 마
연약한 걱정밖에 없는
난 원래 그런 사람이야
다시 내게 말해 줄래?
난 아무것도 못 들었어
넌 새로운 걸 찾는데도
지난날이 계속 기억날 걸
우린 추락할 거야
그래도 어지러운 것보다는 낫잖아
Ling Ling 너는 정말 바보야
나만큼 너를 사랑해 주는
그런 사람은 없어
Ling Ling 결국 알게 될 거야
평범한 거는 너랑 나에게
전혀 어울 리지 않아
My crush
You will always be my crush
Ling Ling 슬픈 표정 짓지 마
내 경계 없는 맘엔
수상한 그런 설계가 없어
Ling Ling 이해하려 하지 마
연약한 걱정밖에 없는 난 원래 그래
Ling Ling 아무 말도 하지 마
네가 돌아오는 날엔
더 이상 우릴 버리지 않아
Ling Ling 이건 한줌 모래야
흘리는 순간 떠내려가는
원래 그런 사이인 거야
    </div>
</body>
</html>