[CSS] 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>
        .container {
            width: 150px;
            height: 150px;
            background-color: lightgray;
            /*  overflow : 부모 요소의 범위를 벗어날 때 어떻게 처리할지 지정 
                -> visible : 영역을 벗어나도 그대로 보임 (기본값) 
                -> hidden : 영역을 벗어나면 전부 숨김 처리
                -> sroll : 스크롤 처리
                -> auto : 영역을 벗어나면 스크롤 처리
                          영역을 벗어나지 않으면 스크롤 X
            */
            overflow: auto;
        
        }
    </style>
</head>
<body>
    <!-- div.container>p -->
    <div class="container">
        <p>
            한 시간 남았다!
            한 시간 남았다!
            한 시간 남았다!
        </p>
    </div>
</body>
</html>

정리

display : 요소가 화면에 보이는 방식 지정
(1) block -> 너비, 높이 지정 O (p요소) / 한줄 전체를 차지
(2) inline -> 너비, 높이 지정 X (span요소) / 입력한 컨텐츠만큼 차지
(3) none -> 화면에 보이지 않게 지정

margin : 요소의 바깥 여백 지정
padding : 요소의 안쪽 여백 지정

margin : 10px(모든 방향)
margin : 10px(위,아래) 10px(왼쪽,오른쪽)
margin : 10px(위) 10px(왼쪽,오른쪽) 10px(아래)
margin : 10px(위) 10px(오른쪽) 10px(아래) 10px(왼쪽)

position : 요소의 위치를 배치하는 속성
(1) static : 정적인, position 기본값, 위치속성 비활성화
(2) relative : 상대적인, 원래 있던 위치를 기준, 위치속성 활성화
(3) absolute : 절대적인, static이 아닌 부모 요소 기준(없다면 body), 위치속성 활성화
(4) fixed : 고정된, 부모와 스크롤 전부 무시, 최상위 태그 기준, 위치속성 활성화

z-index : 요소의 쌓이는 순서를 지정하는 속성
큰 숫자 -> 화면의 앞(99)
작은 숫자 -> 화면의 뒤(-99)

overflow : 부모 요소의 범위를 벗어날 때 어떻게 처리할지 지정
(1) visible : 기본값, 범위를 벗어나도 그대로 보여짐
(2) hidden : 범위를 벗어나는 부분 숨김 처리
(3) scroll : 스크롤 처리
(4) auto : 영역을 벗어나면 스크롤 처리,
영역을 벗어나지 않으면 스크롤 처리 X