CSS
[CSS] 배경(background)
로아다
2023. 6. 4. 23:18
728x90
반응형
<div> : 영역을 지정하는 용도로 사용하는 태그
<!DOCTYPE html>
<html lang="ko">
<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>04_배경.html</title>
<link rel="stylesheet" href="./assets/css04.css">
</head>
<body>
<!-- div : 영역을 지정하는 용도로 사용하는 태그 -->
<div>Bakcground Test Div...1</div>
<div>Bakcground Test Div...2</div>
<div>Bakcground Test Div...3</div>
<div>Bakcground Test Div...4</div>
</body>
</html>
배경 이미지 설정하는 법
background-image: url('https://cdn.maily.so/kmvujyhbpk5at4ic8dkjf51kdjbn');
border : 해당 요소의 테두리 설정
border: solid 3px black;
height : 요소의 높이 설정
height: 300px;
font-size : 해당 요소의 글자 크기 설정
font-size: 30px;
background-size : 배경 이미지 크기 설정 (auto : 이미지에 맞게 자동 설정)
/* 배경 이미지 크기 설정 (너비, 높이) */
/* background-size: 200px 150px; */
/* background-size: 300px; 너비만 300px로 설정 */
background-size: auto 300px; /* 높이만 300px로 설정 */
배경 이미지 반복 설정
- no-repeat: 반복하지 않음
- repeat-x: 가로로만 반복
- repeat-y: 세로로만 반복
- round: 이미지 크기를 조절하여 요소를 깔끔하게 채우도록 유지
- space: 이미지 원본 크기를 유지하면서 공백으로 깔끔하게 배치하는 설정
background-repeat: no-repeat;
배경 이미지 위치 설정
/* background-position: right bottom; */
/* background-position: 200px 100px; */
background-position: right 150px;
배경 설정에 관한 추가적인 명령어
background-size: cover; /* 해당 요소를 100% 채울 수 있는 크기 */
background-size:contain; /* 해당 요소에 이미지를 100% 보여줄 수 있는 크기로 조절 */
background-attachment: fixed; /* 배경이 고정된다. */
div {
border: solid 3px black; /* 해당 요소의 테두리 설정 */
height: 300px; /* 요소의 높이 설정 */
font-size: 30px; /* 해당 요소의 글자 크기 설정 */
margin-bottom: 30px;
}
div:first-of-type {
/* 배경 이미지 설정 */
background-image: url('https://cdn.maily.so/kmvujyhbpk5at4ic8dkjf51kdjbn');
/* 배경 이미지 크기 설정 (너비, 높이) */
/* background-size: 200px 150px; */
/* background-size: 300px; 너비만 300px로 설정 */
background-size: auto 300px; /* 높이만 300px로 설정 */
/* # 배경 이미지 반복 설정
no-repeat: 반복하지 않음
repeat-x: 가로로만 반복
repeat-y: 세로로만 반복
round: 이미지 크기를 조절하여 요소를 깔끔하게 채우도록 유지
space: 이미지 원본 크기를 유지하면서 공백으로 깔끔하게 배치하는 설정
*/
background-repeat: no-repeat;
/* 배경 이미지 위치 설정 */
/* background-position: right bottom; */
/* background-position: 200px 100px; */
background-position: right 150px;
}
div:nth-of-type(2) {
background-image: url('https://cdn.maily.so/kmvujyhbpk5at4ic8dkjf51kdjbn');
background-size: cover; /* 해당 요소를 100% 채울 수 있는 크기 */
height: 800px;
}
div:nth-of-type(3) {
background-image: url('https://cdn.maily.so/kmvujyhbpk5at4ic8dkjf51kdjbn');
background-size:contain; /* 해당 요소에 이미지를 100% 보여줄 수 있는 크기로 조절 */
background-repeat: no-repeat;
height: 500px;
}
div:nth-of-type(4) {
background-image: url('https://cdn.maily.so/kmvujyhbpk5at4ic8dkjf51kdjbn');
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /* 배경이 고정된다. */
}
728x90
반응형