📌 background 속성

1. background-size : 배경 이미지의 크기 조정

• auto : 원래의 배경이미지 크기 만큼 표시 (default값)
• contain : 배경 이미지가 요소 크기에 맞게 모두 표시
• cover : 배경 이미지가 요소의 크기에 관계 없이 채워서 표시
• px % 로 조절 가능

2. background-position : 배경 이미지 배치하기

• background-position: <x축위치>, <y축위치>;

• vertical position : top center bottom px %
• horizontal position : left center right px %

• background-position: bottom 50px center;
  => 아래에서 50px만큼 떨어트리고 가로위치는 중앙 정렬

3. background-attachment : 배경 이미지 고정여부

• scroll : 배경 이미지가 화면 스크롤과 함께 스크롤됨 (default값)
• fixed : 배경 이미지 고정

📌 width: 100% vs auto

1. width: auto;

마진, 패딩, 보더 조절해서 width값을 조절해줌 (default 값)

        div {
            border: 1px solid red;
            width: 500px;
            height: 300px;
            margin: 100px auto;
        }

        p {
            border: 1px solid blue;
            margin: 10px;
            width: auto;
        }

2. width: 100%;
마진, 패딩, 보더 영역 포함시킴 box-sizing: border-box;로 해결가능

    <style>
        div {
            border: 1px solid red;
            width: 500px;
            height: 300px;
            margin: 100px auto;
        }

        p {
            border: 1px solid blue;
            margin: 10px;
            width: 100%;
        }
    </style>

자식요소가 부모요소를 빠져나가게 된다.
auto가 조금더 합리적!