더보기
CSS의 배경 관련 스타일에 대해 알아보자
<background~ 로 시작하는 코드>
background-color : 배경색을 지정할 때 사용
<style>
body {
background-color: skyblue;
/* body의 자식 요소인 h1, h3, div는 모두 투명색 */
}
#div-bg {
background-color: white;
border : 30px solid blue;
padding : 20px;
width : 50%; /* %: 가변길이 */
/* div의 content의 가로 길이는 부모 요소인 body의 50%로 지정하겠다는 의미 */
box-sizing : border-box;
/* 가로 길이를 border까지 포함해서 지정하겠다 */
}
</style>
<body>
<div id="div-bg">
청춘의 맺어, 보는 찾아 크고 길지 착목한는 곳이 동산에는 끓는다. 고동을 없는 것은 그들의 청춘은 소금이라 모래뿐일 군영과 것이다.보라, 봄바람이다. 품에 청춘의 인생을 유소년에게서 있는 봄바람이다. 싶이 바이며, 위하여, 우리의 구하지 그러므로 황금시대를 능히 가슴에 봄바람이다.
얼음 풍부하게 웅대한 수 갑 목숨을 그러므로 이상이 청춘 칼이다. 이 두기 맺어, 따뜻한 봄바람이다. 힘차게 설레는 꽃이 대고, 그러므로 철환하였는가?
</div>
</body>
backgound-clip: 배경을 적용시키고자 하는 범위를 지정할 때 사용
[ 표현법 ]
선택자 {
background-clip : border-box(기본값)/padding-box/content-box;
}
<style>
body {
background-color: skyblue;
/* body의 자식 요소인 h1, h3, div는 모두 투명색 */
}
.div-test {
margin : 30px;
border : 10px dashed;
padding : 20px;
background-color: yellow;
/* 배경색이 border (테두리) 부분까지 적용됨을 알 수 있음 */
}
#div1 {
background-clip : border-box; /* 기본값 */
}
#div2 {
background-clip : padding-box;
/* 배경색이 padding 부분까지 적용됨을 알 수 있음 */
}
#div3 {
background-clip : content-box;
}
</style>
<body>
<!-- div.div-test#div$*3 -->
<div class="div-test" id="div1">이것을 남는 청춘의 이상은 우리는 보는 뿐이다. 피는 미인을 같이, 간에 바이며, 군영과 수 자신과 같이, 봄바람이다. 열락의 풀밭에 그러므로 보배를
위하여, 투명하되 방지하는 것이다.</div>
<div class="div-test" id="div2">이것을 남는 청춘의 이상은 우리는 보는 뿐이다. 피는 미인을 같이, 간에 바이며, 군영과 수 자신과 같이, 봄바람이다. 열락의 풀밭에 그러므로 보배를
위하여, 투명하되 방지하는 것이다.</div>
<div class="div-test" id="div3">이것을 남는 청춘의 이상은 우리는 보는 뿐이다. 피는 미인을 같이, 간에 바이며, 군영과 수 자신과 같이, 봄바람이다. 열락의 풀밭에 그러므로 보배를
위하여, 투명하되 방지하는 것이다.</div>
</body>
배경 이미지 테스트
[ 표현법 ]
선택자 {
background-image : url("이미지경로");
backgound-repeat : repeat(기본값)/repeat-x/repeat-y/no-repeat;
background-size : auto/contain/cover/가로길이(px/%);
background-position : 좌/우/가운데 중 1 위/아래/가운데 중 1 또는 x좌표 y좌표;
background-attachment : scroll/fixed;
}
👉🏻 repeat: 창이 남으면 사진을 또 붙여넣겠다 (바둑판식 배열)
👉🏻 repeat-x: 좌/우로만 바둑판식 배열
👉🏻 repeat-y: 상/하로만 바둑판식 배열
👉🏻 contain: 창 크기에 맞게 늘리거나 줄이겠다
👉🏻 cover: 다 채우고 나서 안 맞는 부분은 잘라내겠다
![]() |
![]() |
창 줄였을 때 | 창 늘렸을 때 |
<style>
body {
background-color: skyblue;
/* body의 자식 요소인 h1, h3, div는 모두 투명색 */
}
#bg-img {
border : 1px solid black;
width : 70%;
height : 800px;
background-image : url("resources/image/bono.jpg");
background-repeat: repeat-y; /* 사진들이 세로로만 연이어서 반복 */
background-size : auto; /* 가로 세로 상관없이 둘 중에 하나가 가득 찰 때까지 크기를 맞춰 줌 */
background-size : contain;
background-position : 50% 50%; /* center center 와 같은 뜻 */
background-attachment : fixed; /* 스크롤 이동이 있어도 그 자리 그대로 고정 */
}
</style>
<body>
<div id="bg-img"></div>
</body>