📝 CSS
🖥️ 1. 백그라운드
1-1. 백그라운드 속성
background-color: 요소의 색을 지정할 때 사용 (디폴트값 : transparent)
background-image: 요소의 배경 이미지를 지정할 때 사용 (디폴트값 : none)
background-repeat: 이미지의 반복여부와 방향 설정 시 사용 (디폴트값 repeat)✔️ repeat : 요소의 영역을 모두 채울 때까지 이미지 반복
✔️ repeat-x : 요소의 영역을 모두 채울 때까지 가로로만 이미지 반복
✔️ repeat-y : 요소의 영역을 모두 채울 때까지 세로로만 이미지 반복
✔️ no-repeat : 이미지 반복 X
✔️ space : 요소의 영역을 이미지가 벗어나 잘리지 않을 만큼만 이미지 반복. 맨 처음 이미지와 마지막 이미지가 요소의 양 끝에 고정되고, 사이의 남은 여백을 고르게 나눠 가진다.
✔️ round : 반복되는 이미지 사이의 여백을 남기지 않고, 이미지의 비율을 깨서 공간을 채운다.
background-position: 배경 이미지의 위치를 설정할 때 사용 (디폴트값 : 0% 0%)✔️ 키워드 하나만 지정할 경우 다른 값은 center로 자동 지정
✔️ 0%와 위치 키워드를 함께 쓸 수 있다.
background-size: 배경 이미지의 크기를 설정할 때 사용 (디폴트값 : auto 원본 사이즈)✔️ contain : 비율을 유지하면서 width, height 모두 요소를 벗어나지 않는 범위에서 최대로 확대 (width, heigh 중 큰 값을 가진 쪽이 가득찰 때까지 확대한다.)
✔️ cover : 비율을 유지하면서 빈공간 없이 이미지를 요소에 가득 채운다. width / height 중 작은 값을 가진 쪽이 가득찰 때까지 확대하기 때문에 큰 값을 가진 쪽이 요소에서 벗어나 잘릴 수 있다.
✔️ auto : 이미지의 원본 크기 유지
background-origin: 배경 이미지의 원점(0,0)을 어디에서부터 시작할지를 설정할 때 사용 (디폴트값 : padding-box)✔️ border-box : 배경을 border의 left top(0,0)에서부터 시작한다.
✔️ padding-box : 배경을 border을 제외한 안쪽 여백의 제일 왼쪽 위에서부터 시작한다.
✔️ content-box : 배경을 내용(content)의 left top(0,0)에서부터 시작한다.
background-clip: 배경 이미지를 어느 영역까지 채울지 설정할 때 사용✔️ border-box : 배경 이미지를 border를 포함하여 그 안쪽 영역을 모두 채운다.
✔️ padding-box : 배경 이미지를 border를 제외하고, 안쪽 여백과 콘텐츠 영역을 채운다.
✔️ content-box : 배경 이미지를 콘텐츠 box 영역만 채운다.
background-attachment: 배경 이미지의 고정/스크롤 여부를 설정할 때 사용 (디폴트값 : scroll)✔️ scroll : 배경 이미지를 요소 자체에, 고정 요소에 스크롤이 있어도 배경은 스크롤 되지 않고 고정이 된다.
✔️ fixed : 배경 이미지를 viewport에, 고정 요소의 스크롤 뿐 아니라 viewport의 스크롤이 되지 않고 고정이 된다.
✔️ local : 배경 이미지를 콘텐츠에, 고정 요소에 스크롤이 있으면 배경 이미지는 콘텐츠와 함께 스크롤 된다.
📝 예제
EX)
<head>
...
<style>
div{
border: 5px solid gray;
background-color: yellow;
height: 500px;
background-image: url('img/spiderman.png');
background-repeat: no-repeat;
/* background-attachment: scroll; */
/*
cover : 이미지를 공간 안에 꽉 채운다.
contain : 이미지의 삭제 없이 다 채운다.
*/
/* background-size: contain; */
background-position: center;
}
</style>
</head>
<body>
<div>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div>
</body>이미지 및 자료 출처 : 디자이너의 기록 - 'background 속성 정리'
